找回密码
当前位置：前端开发者 > jQuery > 正文

前端开发jQuery Alert 自定义顶部通知

2018-11-14 22:14:09 分类：jQuery 阅读(258) 评论(0)
前端开发清理缓存插件
前端开发插件 谷歌
火狐前端开发插件推荐

用法

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 src=”http://yuanoook.com/cdn/jquery.min.js”></script>
        <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
赞(0)
64K
标签：前端开发者

前端开发者

相关推荐

评论 抢沙发

评论前必须登录！

 

最新评论