jquery UI dialog详解

直接代码：

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>jQuery UI Dialog - Default functionality</title>
    <link rel="stylesheet" href="../jquery.ui.all.css" />
    <link rel="stylesheet" href="../images" />
    <link rel="stylesheet" href="../demos.css" />
    <script type="text/javascript" src="http://www.cnblogs.com/jquery/jquery.1.8.3.js"></script>
    <script type="text/javascript" src="http://www.cnblogs.com/jquery/jquery.ui.1.9.2.js"></script>
    <script src="../external/jquery.bgiframe-2.1.2.js"></script>

    <script>
        $.fx.speeds._default = 1000;
        $(function() {
            $("#dialog").dialog({

                //属性
                autoOpen: true,    //是否自动打开
                modal: true,        //背部的显示方式
                closeOnEscape: true,//是否可以用esc键关闭弹出层
                stack: true,        //是否可覆盖其它对话框。
                //dialogClass:"alert",

                resizable: true,    //resizable是否可以改变dialog的大小，默认为true，可以改变大小。
                draggable: true,    //draggable是否可以使用标题头进行拖动，默认为true，可以拖动;

                show: "slide",
                //show: "blind",        //显示的方式
                hide: "explode",    //隐藏的方式

                maxHeight: false,    //最大最小高度宽度
                maxWidth: false,
                minHeight: 150,
                minWidth: 150,

                height: "auto",        //初始的高与宽,表示长度，不是坐标
                width: 800,

                title: "内部设定的标题",        //重新设定标题
                buttons:{                //按钮设置
                    "OK":function(){
                        console.log('OK');
                        $(this).dialog("close");
                    },
                    "NO":function(){
                        console.log('NO');
                        $(this).dialog("close");
                    },
                },

                position: ['right','top'],

                zIndex: 1000,
                //closeText: "hide"   ??

                //事件  在对象中初始化或者绑定事件用bind()
                /* 在这里初始化不行，在初始化后绑定可以  ？？
                //对话框关闭前执行，返回 false 防止对话框关闭。
                beforeclose: function(event,ui) {
                    console.log("beforeclose");
                    return false;
                },
                //打开对话框时执行
                open: function(event,ui) {
                    console.log("open");
                    return false;
                },
                //对话框获得焦点时执行
                focus: function(event,ui) {
                    console.log("focus");
                    return false;
                },
                //dragStart开始对话框拖动时执行     drag:拖动对话框时执行 dragStop:停止拖动对话框时执行
                dragStart: function(event,ui) {
                    console.log("dragStart");
                    return false;
                },
                resize:调整对话框大小时执行  resizeStart:开始调整对话框大小时执行   resizeStop:结束调整对话框大小时执行

                close:关闭对话框时执行
                */

                //方法
                //isOpen:对话框可见时返回 true

            });
            // 初始化后绑定
            //$("#dialog").dialog("option","position",["right","top"]);//绑定属性

            $("#dialog").dialog("isOpen");//对话框可见时返回 true
            $("#dialog").dialog("moveToTop");//使对话框处于最前方
            $("#dialog").dialog("disable");//禁止操作对话框
            $("#dialog").dialog("enable");允许操作对话框
            //var autoOpen = $("#id").dialog("option","autoOpen");//读取
            //$("#id").dialog("option","autoOpen",false);//设置

            $("#dialog").dialog("close");//关闭对话框
            $("#dialog").dialog("open");
            $("#dialog").dialog("destroy");//销毁对话框实例
            //绑定事件
            $("#dialog").bind("dialogbeforeclose",function(event,ui){
                console.log("beforeclose");
                return false;
            });

            $("#dialog").bind("dialogopen",function(event,ui){
                console.log("dialogopen");
                return false;
            });

            $("#dialog").bind("dialogfocus",function(event,ui){
                console.log("dialogfocus");
                return false;
            });

            $("#dialog").bind("dialogdragStart",function(event,ui){
                console.log("dialogdragStart");
                return false;
            });

            $("#opener").click(function() {
                $("#dialog").dialog("open");
                $("#dialog").dialog("close");
                //return false;
            });

        });
    </script>
</head>
<body>
    <div id="dialog" title="Basic dialog">
        <p>哈哈 ，这是我的第一个dialog</p>
    </div>

    <button id="opener">Open Dialog</button>
</body>
</html>

 

posted on 2013-01-11 16:32  color_story  阅读(466)  评论(0)  编辑  收藏  举报

导航