腾讯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 相关文章推荐
jQuery使用手册之三 CSS操作
Mar 24 Javascript
探索Emberjs制作一个简单的Todo应用
Nov 07 Javascript
bootstrap table 服务器端分页例子分享
Feb 10 Javascript
js面向对象的写法
Feb 19 Javascript
jQuery Easyui学习教程之实现datagrid在没有数据时显示相关提示内容
Jul 09 Javascript
一个仿微博登陆邮箱提示框js开发案例
Jul 28 Javascript
jQuery 实现双击编辑表格功能
Jun 19 jQuery
解决vue-cli项目webpack打包后iconfont文件路径的问题
Sep 01 Javascript
vue 利用路由守卫判断是否登录的方法
Sep 29 Javascript
浅谈Vue数据响应思路之数组
Nov 06 Javascript
javascript操作元素的常见方法小结
Nov 13 Javascript
JavaScript canvas实现跟随鼠标移动小球
Feb 09 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
全国FM电台频率大全 - 22 重庆市
2020/03/11 无线电
PhpMyAdmin中无法导入sql文件的解决办法
2010/01/08 PHP
ThinkPHP查询中的魔术方法简述
2014/06/25 PHP
php+html5实现无刷新图片上传教程
2016/01/22 PHP
jQuery Flash/MP3/Video多媒体插件
2010/01/18 Javascript
JS 实现完美include载入实现代码
2010/08/05 Javascript
JavaScript判断变量是否为undefined的两种写法区别
2013/12/04 Javascript
上传图片js判断图片尺寸和格式兼容IE
2014/09/01 Javascript
JavaScript中的setUTCDate()方法使用详解
2015/06/11 Javascript
js 判断所选时间(或者当前时间)是否在某一时间段的实现代码
2015/09/05 Javascript
jQuery实现的经典滑动门效果
2015/09/22 Javascript
js判断输入字符串是否为空、空格、null的方法总结
2016/06/14 Javascript
JS高仿抛物线加入购物车特效实现代码
2017/02/20 Javascript
Linux系统中利用node.js提取Word(doc/docx)及PDF文本的内容
2017/06/17 Javascript
js 原生判断内容区域是否滚动到底部的实例代码
2017/11/15 Javascript
vuejs实现本地数据的筛选分页功能思路详解
2017/11/15 Javascript
vue中element-ui表格缩略图悬浮放大功能的实例代码
2018/06/26 Javascript
服务端预渲染之Nuxt(使用篇)
2019/04/08 Javascript
layer.open组件获取弹出层页面变量、函数的实例
2019/09/25 Javascript
NUXT SSR初级入门笔记(小结)
2019/12/16 Javascript
Javascript操作select控件代码实例
2020/02/14 Javascript
JavaScript实现图片放大预览效果
2020/11/02 Javascript
浅谈Pandas中map, applymap and apply的区别
2018/04/10 Python
Python3爬虫之urllib携带cookie爬取网页的方法
2018/12/28 Python
Python学习笔记之视频人脸检测识别实例教程
2019/03/06 Python
Python将json文件写入ES数据库的方法
2019/04/10 Python
Python TKinter如何自动关闭主窗口
2020/02/26 Python
方太官方网上商城:销售方太抽油烟机、燃气灶、消毒柜等
2017/01/17 全球购物
英国奢侈皮具品牌:Aspinal of London
2018/09/02 全球购物
为什么要优先使用同步代码块而不是同步方法?
2013/01/30 面试题
介绍一下你对SOA的认识
2016/04/24 面试题
继承公证书样本
2014/04/04 职场文书
2014年国庆节演讲稿
2014/09/19 职场文书
2015年行政人事工作总结
2015/05/21 职场文书
大学军训通讯稿(2016最新版)
2015/12/21 职场文书
2016年社区“6.26”禁毒日宣传活动总结
2016/04/05 职场文书