腾讯UED 漂亮的提示信息效果代码


Posted in Javascript onSeptember 12, 2011

腾讯UED 漂亮的提示信息效果代码

腾讯UED 漂亮的提示信息效果代码


CSS样式:
.zeng_msgbox_layer, 
.zeng_msgbox_layer .gtl_ico_succ, 
.zeng_msgbox_layer .gtl_ico_fail, 
.zeng_msgbox_layer .gtl_ico_hits, 
.zeng_msgbox_layer .gtl_ico_clear, 
.zeng_msgbox_layer .gtl_end{display:inline-block;height:54px;line-height:54px;font-weight:bold;font-size:14px;color:#606060;background-image:url("gb_tip_layer.png");_background-image:url("gb_tip_layer_ie6.png");background-repeat:no-repeat;} 
.zeng_msgbox_layer_wrap{width:100%;position:fixed;_position:absolute;top:46%;left:0;text-align:center;z-index:65533;} 
.zeng_msgbox_layer{background-position:0 -161px;background-repeat:repeat-x;padding:0 18px 0 9px;margin:0 auto;position:relative;} 
.zeng_msgbox_layer .gtl_ico_succ{background-position:-6px 0;left:-45px;top:0;width:45px;position:absolute;} 
.zeng_msgbox_layer .gtl_end{background-position:0 0;position:absolute;right:-6px;top:0;width:6px;} 
.zeng_msgbox_layer .gtl_ico_fail{background-position:-6px -108px;position:absolute;left:-45px;top:0;width:45px;} 
.zeng_msgbox_layer .gtl_ico_hits{background-position:-6px -54px;position:absolute;left:-45px;top:0;width:45px;} 
.zeng_msgbox_layer .gtl_ico_clear{background-position:-6px 0;left:-5px;width:5px;position:absolute;top:0;} 
.zeng_msgbox_layer img{float:left;margin:19px 10px 0 5px ;}

JAVASCRIPT:
window.ZENG=window.ZENG || {}; 
ZENG.dom = {getById: function(id) { 
return document.getElementById(id); 
},get: function(e) { 
return (typeof (e) == "string") ? document.getElementById(e) : e; 
},createElementIn: function(tagName, elem, insertFirst, attrs) { 
var _e = (elem = ZENG.dom.get(elem) || document.body).ownerDocument.createElement(tagName || "div"), k; 
if (typeof (attrs) == 'object') { 
for (k in attrs) { 
if (k == "class") { 
_e.className = attrs[k]; 
} else if (k == "style") { 
_e.style.cssText = attrs[k]; 
} else { 
_e[k] = attrs[k]; 
} 
} 
} 
insertFirst ? elem.insertBefore(_e, elem.firstChild) : elem.appendChild(_e); 
return _e; 
},getStyle: function(el, property) { 
el = ZENG.dom.get(el); 
if (!el || el.nodeType == 9) { 
return null; 
} 
var w3cMode = document.defaultView && document.defaultView.getComputedStyle, computed = !w3cMode ? null : document.defaultView.getComputedStyle(el, ''), value = ""; 
switch (property) { 
case "float": 
property = w3cMode ? "cssFloat" : "styleFloat"; 
break; 
case "opacity": 
if (!w3cMode) { 
var val = 100; 
try { 
val = el.filters['DXImageTransform.Microsoft.Alpha'].opacity; 
} catch (e) { 
try { 
val = el.filters('alpha').opacity; 
} catch (e) { 
} 
} 
return val / 100; 
} else { 
return parseFloat((computed || el.style)[property]); 
} 
break; 
case "backgroundPositionX": 
if (w3cMode) { 
property = "backgroundPosition"; 
return ((computed || el.style)[property]).split(" ")[0]; 
} 
break; 
case "backgroundPositionY": 
if (w3cMode) { 
property = "backgroundPosition"; 
return ((computed || el.style)[property]).split(" ")[1]; 
} 
break; 
} 
if (w3cMode) { 
return (computed || el.style)[property]; 
} else { 
return (el.currentStyle[property] || el.style[property]); 
} 
},setStyle: function(el, properties, value) { 
if (!(el = ZENG.dom.get(el)) || el.nodeType != 1) { 
return false; 
} 
var tmp, bRtn = true, w3cMode = (tmp = document.defaultView) && tmp.getComputedStyle, rexclude = /z-?index|font-?weight|opacity|zoom|line-?height/i; 
if (typeof (properties) == 'string') { 
tmp = properties; 
properties = {}; 
properties[tmp] = value; 
} 
for (var prop in properties) { 
value = properties[prop]; 
if (prop == 'float') { 
prop = w3cMode ? "cssFloat" : "styleFloat"; 
} else if (prop == 'opacity') { 
if (!w3cMode) { 
prop = 'filter'; 
value = value >= 1 ? '' : ('alpha(opacity=' + Math.round(value * 100) + ')'); 
} 
} else if (prop == 'backgroundPositionX' || prop == 'backgroundPositionY') { 
tmp = prop.slice(-1) == 'X' ? 'Y' : 'X'; 
if (w3cMode) { 
var v = ZENG.dom.getStyle(el, "backgroundPosition" + tmp); 
prop = 'backgroundPosition'; 
typeof (value) == 'number' && (value = value + 'px'); 
value = tmp == 'Y' ? (value + " " + (v || "top")) : ((v || 'left') + " " + value); 
} 
} 
if (typeof el.style[prop] != "undefined") { 
el.style[prop] = value + (typeof value === "number" && !rexclude.test(prop) ? 'px' : ''); 
bRtn = bRtn && true; 
} else { 
bRtn = bRtn && false; 
} 
} 
return bRtn; 
},getScrollTop: function(doc) { 
var _doc = doc || document; 
return Math.max(_doc.documentElement.scrollTop, _doc.body.scrollTop); 
},getClientHeight: function(doc) { 
var _doc = doc || document; 
return _doc.compatMode == "CSS1Compat" ? _doc.documentElement.clientHeight : _doc.body.clientHeight; 
} 
}; 
ZENG.string = {RegExps: {trim: /^\s+|\s+$/g,ltrim: /^\s+/,rtrim: /\s+$/,nl2br: /\n/g,s2nb: /[\x20]{2}/g,URIencode: /[\x09\x0A\x0D\x20\x21-\x29\x2B\x2C\x2F\x3A-\x3F\x5B-\x5E\x60\x7B-\x7E]/g,escHTML: {re_amp: /&/g,re_lt: /</g,re_gt: />/g,re_apos: /\x27/g,re_quot: /\x22/g},escString: {bsls: /\\/g,sls: /\//g,nl: /\n/g,rt: /\r/g,tab: /\t/g},restXHTML: {re_amp: /&/g,re_lt: /</g,re_gt: />/g,re_apos: /&(?:apos|#0?39);/g,re_quot: /"/g},write: /\{(\d{1,2})(?:\:([xodQqb]))?\}/g,isURL: /^(?:ht|f)tp(?:s)?\:\/\/(?:[\w\-\.]+)\.\w+/i,cut: /[\x00-\xFF]/,getRealLen: {r0: /[^\x00-\xFF]/g,r1: /[\x00-\xFF]/g},format: /\{([\d\w\.]+)\}/g},commonReplace: function(s, p, r) { 
return s.replace(p, r); 
},format: function(str) { 
var args = Array.prototype.slice.call(arguments), v; 
str = String(args.shift()); 
if (args.length == 1 && typeof (args[0]) == 'object') { 
args = args[0]; 
} 
ZENG.string.RegExps.format.lastIndex = 0; 
return str.replace(ZENG.string.RegExps.format, function(m, n) { 
v = ZENG.object.route(args, n); 
return v === undefined ? m : v; 
}); 
}}; 
ZENG.object = { 
routeRE: /([\d\w_]+)/g, 
route: function(obj, path) { 
obj = obj || {}; 
path = String(path); 
var r = ZENG.object.routeRE, m; 
r.lastIndex = 0; 
while ((m = r.exec(path)) !== null) { 
obj = obj[m[0]]; 
if (obj === undefined || obj === null) { 
break; 
} 
} 
return obj; 
}}; 
var ua = ZENG.userAgent = {}, agent = navigator.userAgent; 
ua.ie = 9 - ((agent.indexOf('Trident/5.0') > -1) ? 0 : 1) - (window.XDomainRequest ? 0 : 1) - (window.XMLHttpRequest ? 0 : 1); 
if (typeof (ZENG.msgbox) == 'undefined') { 
ZENG.msgbox = {}; 
} 
ZENG.msgbox._timer = null; 
ZENG.msgbox.loadingAnimationPath = ZENG.msgbox.loadingAnimationPath || ("loading.gif"); 
ZENG.msgbox.show = function(msgHtml, type, timeout, opts) { 
if (typeof (opts) == 'number') { 
opts = {topPosition: opts}; 
} 
opts = opts || {}; 
var _s = ZENG.msgbox, 
template = '<span class="zeng_msgbox_layer" style="display:none;z-index:10000;" id="mode_tips_v2"><span class="gtl_ico_{type}"></span>{loadIcon}{msgHtml}<span class="gtl_end"></span></span>', loading = '<img src="' + (opts.customIcon || _s.loadingAnimationPath) + '" alt="" />', typeClass = [0, 0, 0, 0, "succ", "fail", "clear"], mBox, tips; 
_s._loadCss && _s._loadCss(opts.cssPath); 
mBox = ZENG.dom.get("q_Msgbox") || ZENG.dom.createElementIn("div", document.body, false, {className: "zeng_msgbox_layer_wrap"}); 
mBox.id = "q_Msgbox"; 
mBox.style.display = ""; 
mBox.innerHTML = ZENG.string.format(template, {type: typeClass[type] || "hits",msgHtml: msgHtml || "",loadIcon: type == 6 ? loading : ""}); 
_s._setPosition(mBox, timeout, opts.topPosition); 
}; 
ZENG.msgbox._setPosition = function(tips, timeout, topPosition) { 
timeout = timeout || 5000; 
var _s = ZENG.msgbox, bt = ZENG.dom.getScrollTop(), ch = ZENG.dom.getClientHeight(), t = Math.floor(ch / 2) - 40; 
ZENG.dom.setStyle(tips, "top", ((document.compatMode == "BackCompat" || ZENG.userAgent.ie < 7) ? bt : 0) + ((typeof (topPosition) == "number") ? topPosition : t) + "px"); 
clearTimeout(_s._timer); 
tips.firstChild.style.display = ""; 
timeout && (_s._timer = setTimeout(_s.hide, timeout)); 
}; 
ZENG.msgbox.hide = function(timeout) { 
var _s = ZENG.msgbox; 
if (timeout) { 
clearTimeout(_s._timer); 
_s._timer = setTimeout(_s._hide, timeout); 
} else { 
_s._hide(); 
} 
}; 
ZENG.msgbox._hide = function() { 
var _mBox = ZENG.dom.get("q_Msgbox"), _s = ZENG.msgbox; 
clearTimeout(_s._timer); 
if (_mBox) { 
var _tips = _mBox.firstChild; 
ZENG.dom.setStyle(_mBox, "display", "none"); 
} 
};

调用:
ZENG.msgbox.show("设置成功!", 4, 2000); 
ZENG.msgbox.show("服务器繁忙,请稍后再试。", 1, 2000); 
ZENG.msgbox.show("数据拉取失败", 5, 2000); 
ZENG.msgbox.show(" 正在加载中,请稍后...", 6,8000);

演示和下载体验: 腾讯UED-漂亮的提示信息
Javascript 相关文章推荐
javascript脚本调试方法小结
Nov 24 Javascript
js中array的sort()方法使用介绍
Feb 20 Javascript
js中运算符&amp;&amp; 和 || 的使用记录
Aug 21 Javascript
jQuery通过点击行来删除HTML表格行的实现示例
Sep 10 Javascript
基于JS实现类似支付宝支付密码输入框
Sep 02 Javascript
浅谈js函数的多种定义方法与区别
Nov 29 Javascript
Bootstrap表单使用方法详解
Feb 17 Javascript
利用百度地图API获取当前位置信息的实例
Nov 06 Javascript
vue富文本编辑器组件vue-quill-edit使用教程
Sep 21 Javascript
vue-router传递参数的几种方式实例详解
Nov 13 Javascript
JavaScript实现文件下载并重命名代码实例
Dec 12 Javascript
四十九个javascript小知识实用技巧
Nov 20 Javascript
jQuery的.live()和.die() 使用介绍
Sep 10 #Javascript
jquery tab插件精简版分享
Sep 10 #Javascript
javascript语言结构小记(一)
Sep 10 #Javascript
JavaScript高级程序设计 客户端存储学习笔记
Sep 10 #Javascript
JavaScript高级程序设计 错误处理与调试学习笔记
Sep 10 #Javascript
JavaScript高级程序设计 事件学习笔记
Sep 10 #Javascript
JavaScript高级程序设计 XML、Ajax 学习笔记
Sep 10 #Javascript
You might like
php 抽象类的简单应用
2011/09/06 PHP
PHP常用技巧总结(附函数代码)
2012/02/04 PHP
PHP中实现生成静态文件的方法缓解服务器压力
2014/01/07 PHP
php验证身份证号码正确性的函数
2016/07/20 PHP
php过滤输入操作之htmlentities与htmlspecialchars用法分析
2017/02/17 PHP
jQuery中removeProp()方法用法实例
2015/01/05 Javascript
AngularJS进行性能调优的7个建议
2015/12/28 Javascript
javascript中arguments,callee,caller详解
2016/03/16 Javascript
微信小程序 基础知识css样式media标签
2017/02/15 Javascript
Vuex模块化实现待办事项的状态管理
2017/03/15 Javascript
关于vuex的学习实践笔记
2017/04/05 Javascript
vue监听input标签的value值方法
2018/08/27 Javascript
基于vue实现web端超大数据量表格的卡顿解决
2019/04/02 Javascript
Vue实现简单计算器案例
2020/02/25 Javascript
vant-ui AddressEdit地址编辑和van-area的用法说明
2020/11/03 Javascript
原生JS实现弹幕效果的简单操作指南
2020/11/10 Javascript
[01:31]DOTA2上海特级锦标赛 SECRET战队完整宣传片
2016/03/16 DOTA
[02:22]《新闻直播间》2017年08月14日
2017/08/15 DOTA
Python抓取Discuz!用户名脚本代码
2013/12/30 Python
基于Python中单例模式的几种实现方式及优化详解
2018/01/09 Python
在Django中实现添加user到group并查看
2019/11/18 Python
HTML5 Canvas 实现圆形进度条并显示数字百分比效果示例
2017/08/18 HTML / CSS
加拿大最大的体育用品、鞋类和服装零售商:Sport Chek
2018/11/29 全球购物
美赞臣营养马来西亚旗舰店:Enfagrow马来西亚
2019/07/26 全球购物
英国旅行箱包和行李箱购物网站:Travel Luggage & Cabin Bags
2019/08/26 全球购物
应届大学毕业生找工作的求职信范文
2013/11/29 职场文书
中学教师请假制度
2014/02/03 职场文书
工作会议方案
2014/05/21 职场文书
小学生植树节活动总结
2014/07/04 职场文书
个人租房协议书
2014/11/28 职场文书
岳庙导游词
2015/02/04 职场文书
入党积极分子群众意见
2015/06/01 职场文书
遗嘱格式范本
2015/08/07 职场文书
2016年村党支部公开承诺书
2016/03/24 职场文书
爱心捐款倡议书:点燃希望,传递温暖
2019/11/04 职场文书
使用Springboot实现健身房管理系统
2021/07/01 Java/Android