腾讯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模板技术
Apr 27 Javascript
JavaScript 拾碎[三] 使用className属性
Oct 16 Javascript
myEvent.js javascript跨浏览器事件框架
Oct 24 Javascript
js快速排序的实现代码
Dec 08 Javascript
多种方法实现load加载完成后把图片一次性显示出来
Feb 19 Javascript
JavaScript代码生成PDF文件的方法
Feb 26 Javascript
js实现常见的工具条效果
Mar 02 Javascript
详解使用React全家桶搭建一个后台管理系统
Nov 04 Javascript
JS实现自定义弹窗功能
Aug 08 Javascript
基于jquery实现九宫格拼图小游戏
Nov 30 jQuery
引入外部js脚本加载慢与页面白屏问题的解决
Dec 10 Javascript
Vue OpenLayer测距功能的实现
Apr 20 Vue.js
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/01 PHP
PHP将session信息存储到数据库的类实例
2015/03/04 PHP
php从数据库查询结果生成树形列表的方法
2015/04/17 PHP
ajax 缓存 问题 requestheader
2010/08/01 Javascript
autoIMG 基于jquery的图片自适应插件代码
2011/03/12 Javascript
JavaScript常用对象的方法和属性小结
2012/01/24 Javascript
JSON中双引号的轮回使用过程中一定要小心
2014/03/05 Javascript
javascript 处理null及null值示例
2014/06/09 Javascript
jquery滚动到顶部底部代码
2015/04/20 Javascript
微信小程序 教程之引用
2016/10/18 Javascript
JS判断是否为JSON对象及是否存在某字段的方法(推荐)
2016/11/29 Javascript
利用Node.js编写跨平台的spawn语句详解
2017/02/12 Javascript
详解node HTTP请求客户端 - Request
2017/05/05 Javascript
iview table render集成switch开关的实例
2018/03/14 Javascript
vue-router权限控制(简单方式)
2018/10/29 Javascript
js实现网页同时进行多个倒计时功能
2019/02/25 Javascript
微信小程序 点击切换样式scroll-view实现代码实例
2019/10/11 Javascript
小程序识别身份证,银行卡,营业执照,驾照的实现
2019/11/05 Javascript
viewer.js一个强大的基于jQuery的图像查看插件(支持旋转、缩放)
2020/04/01 jQuery
js 函数性能比较方法
2020/08/24 Javascript
vue+高德地图实现地图搜索及点击定位操作
2020/09/09 Javascript
[01:57]2018DOTA2亚洲邀请赛赛前采访-iG
2018/04/03 DOTA
python正则匹配抓取豆瓣电影链接和评论代码分享
2013/12/27 Python
CentOS6.5设置Django开发环境
2016/10/13 Python
Python编程实战之Oracle数据库操作示例
2017/06/21 Python
Python中利用xpath解析HTML的方法
2018/05/14 Python
Python读取实时数据流示例
2019/12/02 Python
Python求平面内点到直线距离的实现
2020/01/19 Python
Pycharm配置autopep8实现流程解析
2020/11/28 Python
HTML5新增的表单元素和属性实例解析
2014/07/07 HTML / CSS
英国国家美术馆商店:National Gallery
2019/05/01 全球购物
《分一分》教学反思
2014/04/13 职场文书
办理房产证委托书
2014/09/18 职场文书
幼儿园欢迎词范文
2015/01/26 职场文书
vue如何批量引入组件、注册和使用详解
2021/05/12 Vue.js
Python实现仓库管理系统
2022/05/30 Python