前端开发jQuery Alert 自定义顶部通知
摘要： 前端开发清理缓存插件 前端开发插件 谷歌 火狐前端开发插件推荐 用法 javascript 代码片段 $.Alert(‘你好 :)’) $.Alert(‘大师兄，不好了 :(‘, false) $.Alert({ msg: &……
| 前端开发清理缓存插件 |
| 前端开发插件 谷歌 |
| 火狐前端开发插件推荐 |
用法
javascript 代码片段
$.Alert(‘你好 :)’)
$.Alert(‘大师兄，不好了 :(‘, false)
$.Alert({
msg: ‘大师兄，师傅又被抓走了 :(‘,
goodNews: false,
showTime: 3000,
})
源码
html 代码片段
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″ />
<meta
name=”viewport”
content=”width=device-width, user-scalable=no, initial-scale=1.0″
/>
<title>jquery Alert Demo</title>
<script>
$(function() {
$.extend({
Alert: (function() {
var msgWrap = $(‘<div>’)
.css({
position: ‘fixed’,
top: ‘0’,
zIndex: ‘10000’,
width: ‘30%’,
minWidth: ‘320px’,
margin: ‘auto’,
left: 0,
right: 0,
background: ‘#fff’,
})
.appendTo($(‘body’))
var removeBtn = $(‘<div><span>×</span></div>’).css({
textAlign: ‘right’,
display: ‘none’,
fontSize: ‘1.5em’,
})
removeBtn
.find(‘span’)
.css({
cursor: ‘pointer’,
display: ‘inline-block’,
padding: ‘0 10px’,
})
.on(‘click’, function() {
msgWrap.find(‘.msg’).remove()
removeBtn.hide()
})
removeBtn.appendTo(msgWrap)
msgWrap.hover(
function() {
removeBtn.slideDown()
},
function() {
removeBtn.slideUp()
},
)
return function(msg, goodNews, showTime) {
var options = {
msg:
msg ||
‘jquery Alert, Created by rango@yuanoook.com !’,
goodNews:
$.type(goodNews) == ‘boolean’
? goodNews
: true,
showTime: showTime,
}
if ($.type(msg) == ‘object’)
for (var i in msg) options[i] = msg[i]
options.showTime =
options.showTime ||
(options.goodNews ? 1000 : 5000)
var msgDiv = $(‘<div class=”msg”>’)
.css({
padding: ’10px’,
background: options.goodNews
? ‘#DEFCD5’
: ‘#F1D7D7’,
color: options.goodNews
? ‘#52A954’
: ‘#A95252’,
fontWeight: ‘900’,
textAlign: ‘center’,
overflow: ‘hidden’,
display: ‘none’,
boxShadow: ‘2px 2px 7px #CCC’,
})
.text(options.msg)
.appendTo(msgWrap)
msgDiv.slideDown(function() {
setTimeout(function() {
msgDiv.slideUp(300, function() {
msgDiv.remove()
})
}, options.showTime)
})
}
})(),
})
})
</script>
</head>
<body>
<center>
<b>
<h4>
<a href=”javascript:$.Alert(‘好消息！’)”>
javascript:$.Alert(‘好消息！’)
</a>
<a href=”javascript:$.Alert(‘坏消息！’,false)”>
javascript:$.Alert(‘坏消息！’,false)
</a>
<a href=”javascript:$.Alert(‘300毫秒的好消息！’,true,300)”>
javascript:$.Alert(‘300毫秒的好消息！’,true,300)
</a>
<a
href=”javascript:$.Alert(‘一年的好消息！’,true,1314000000)”
>
javascript:$.Alert(‘一年的好消息！’,true,1314000000)
</a>
</h4>
</b>
</center>
</body>
</html>
| 前端开发插件api文档 |
| 前端开发小图标插件 |
| 前端开发 引用插件 |
» 本文来自：前端开发者 » 《前端开发jQuery Alert 自定义顶部通知》
» 本文链接地址：https://www.rokub.com/6417.html
» 您也可以订阅本站：https://www.rokub.com
近期评论