Dialog插件artDialog

最新推荐文章于 2024-11-02 19:19:35 发布

aizhanqian5077

最新推荐文章于 2024-11-02 19:19:35 发布

阅读量96

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/zcynine/p/5426003.html

版权

经本人测试，发现没有layer好用，因为artDialog不能拖拽。不过除了拖拽，其他还蛮简洁的，在自定义上的灵活性也还可以。下面是我自己写的测试demo。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
    <title></title>
    <link rel="stylesheet" href="./js/artDialog/ui-dialog.css">
</head>
<body>
    <input type="button" id="test1" value="对话框" />
    <input type="button" id="test2" value="tips" />
    <input type="button" id="test3" value="confirm" />
    <input type="button" id="test4" value="close" />
    <input type="button" id="test5" value="drag" />


    <script src="./js/jquery-1.11.3.min.js"></script>
    <script src="./js/artDialog/dialog.js"></script>
    <script type="text/javascript">
        var d1 = dialog({
            title: '欢迎',
            content: '欢迎使用 artDialog 对话框组件！',
            cancelValue: 'OK',
            cancelDisplay: false,
            cancel: function () {
                this.close();
                return false;
            }
        });
        
        $("#test1").on("click", function(){
            //d1.show();
            d1.showModal();
        });

        var d2 = dialog({
            content: 'Hello World!',
            align: 'bottom',
            quickClose: true// 点击空白处快速关闭
        });

        $("#test2").on("click", function(){
            d2.show(document.getElementById('test2'));

            setTimeout(function(){
                d2.close();
            }, 2000);
        });

        var d3 = dialog({
            title: '提示',
            content: '按钮回调函数返回 false 则不许关闭',
            okValue: '确定',
            ok: function () {
                this.title('提交中…');
                this.close();
                return false;
            },
            cancelValue: '取消',
            cancel: function () {
                this.close();
                return false;
            }
        });

        $("#test3").on("click", function(){
            d3.show();
        });

        var d4 = dialog({
            content: '对话框将在两秒内关闭'
        });

        $("#test4").on("click", function(){
            d4.show();

            setTimeout(function(){
                d4.close();
            }, 2000);
        });

        var d5 = dialog({
            content:"anyway...",
            title:"anyway",
            width: 500,
            height: 300,
            cancelDisplay: false,
            cancel: function(){
                this.close();
                return false;
            }
        });

        $("#test5").on("click", function(){
            d5.show();
        });
    </script>
</body>
</html>