腾讯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 继承使用分析
May 12 Javascript
早该知道的7个JavaScript技巧
Mar 27 Javascript
jquery 删除字符串最后一个字符的方法解析
Feb 11 Javascript
js获取checkbox值的方法
Jan 28 Javascript
基于jQuery实现的向下滑动二级菜单效果代码
Aug 31 Javascript
Node.js操作Firebird数据库教程
Mar 04 Javascript
JS判断iframe是否加载完成的方法
Aug 03 Javascript
基于BootStrap的文本编辑器组件Summernote
Oct 27 Javascript
微信小程序列表渲染功能之列表下拉刷新及上拉加载的实现方法分析
Nov 27 Javascript
webpack4 升级迁移的实现
Sep 12 Javascript
vue中前进刷新、后退缓存用户浏览数据和浏览位置的实例讲解
Sep 21 Javascript
vue使用screenfull插件实现全屏功能
Sep 17 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动态图像的创建
2006/10/09 PHP
PHP常用正则表达式集锦
2014/08/17 PHP
使用PHP接受文件并获得其后缀名的方法
2015/08/05 PHP
PHP后期静态绑定之self::限制实例分析
2018/12/21 PHP
JavaScript Tips 使用DocumentFragment加快DOM渲染速度
2010/06/28 Javascript
深入理解JavaScript系列(2) 揭秘命名函数表达式
2012/01/15 Javascript
基于pthread_create,readlink,getpid等函数的学习与总结
2013/07/17 Javascript
javascript常用函数归纳整理
2014/10/31 Javascript
nodejs开发微博实例
2015/03/25 NodeJs
Vue 过渡(动画)transition组件案例详解
2017/01/22 Javascript
超全面的javascript中变量命名规则
2017/02/09 Javascript
javascript  数组排序与对象排序的实例
2017/07/17 Javascript
vue实现样式之间的切换及vue动态样式的实现方法
2017/12/19 Javascript
javascript、php关键字搜索函数的使用方法
2018/05/29 Javascript
详解Angular6学习笔记之主从组件
2018/09/05 Javascript
vue基础之事件简写、事件对象、冒泡、默认行为、键盘事件实例分析
2019/03/11 Javascript
关于layui 实现点击按钮添加一行(方法渲染创建的table)
2019/09/29 Javascript
将RGB值转换为灰度值的简单算法
2019/10/09 Javascript
[03:48]DOTA2完美大师赛主赛事第二日精彩集锦
2017/11/24 DOTA
Python中map和列表推导效率比较实例分析
2015/06/17 Python
在python中利用最小二乘拟合二次抛物线函数的方法
2018/12/29 Python
解决在Python编辑器pycharm中程序run正常debug错误的问题
2019/01/17 Python
PyQt5笔记之弹出窗口大全
2019/06/20 Python
window7下的python2.7版本和python3.5版本的opencv-python安装过程
2019/10/24 Python
用python发送微信消息
2020/12/21 Python
阿里巴巴国际站:Alibaba.com
2016/07/21 全球购物
Linux开机引导的步骤是什么
2015/10/19 面试题
关于打架的检讨书
2014/01/17 职场文书
商务考察邀请函范文
2014/01/21 职场文书
新学期决心书
2014/03/11 职场文书
《称象》教学反思
2014/04/25 职场文书
路政管理求职信
2014/06/18 职场文书
2015年办公室工作总结范文
2015/03/31 职场文书
中标通知书
2015/04/17 职场文书
MySQL数据库配置信息查看与修改方法详解
2022/06/25 MySQL
使用JS前端技术实现静态图片局部流动效果
2022/08/05 Javascript