JQuery UI之(二)对话框——dialog

一、          前言

弹出框是非常实用的页面功能，它有两个特点：一是可拖拽(Draggable)、一是可改变大小(Resizeable)

 

二、          废话不说——先看如何弹出一个对话框

代码如下：

      先引入之前加入的css和js如下：

    <link type="text/css" rel="Stylesheet" href="Css/redmond/jquery-ui-1.7.2.custom.css" />

    <script type="text/javascript" src="Js/jquery-1.3.2.min.js"></script>

    <script type="text/javascript" src="Js/jquery-ui-1.7.2.custom.min.js"></script>

           然后添加一个激发弹出框的控件，如下：

    <div>

        <span id="openDialog" style="color:Red;">弹出窗口</span>

    </div>

           再添加要弹出的弹出框，它是一个Div，如下：

    <div id="divTip">

        <span>弹出窗口</span>

    </div>

           最后添加控制弹出窗口的JQuery代码，如下：

    <script type="text/javascript">

        $(function(){

            $("#openDialog").css("cursor", "pointer").bind("click", function(event){  //修改openDialog的鼠标样式，并绑定点击事件

                $("#divTip").dialog();    //初始化dialog并自动弹出

            });

        });

    </script>

 

           然后用浏览器打开页面，点击“弹出窗口”，呵呵一个可拖动可变换大小的窗口就出来了，而且在没有为它添加样式的情况下，它居然自动的有了漂亮的样式，这是拜了上面引入的css的功劳。这时你点击窗口上的“X”关闭对话框，如果你还有好奇的话，试着再点击一次，你会发现不论是单击、双击还是三击，对话框都不再打开了，这时怎么回事？要想知道原因请继续. . . . . .

 

三、          这是个黑盒，要慢慢摸索

首先，所有的JQuery UI plugins都有自己的状态，如是否可用或不可用，这些plugins都会在页面中初始化。而初始化了状态的plugins状态将会从初始化开始持续到其被销毁，因为状态管理的原因，我们不能在同一个元素中多次初始化同样的plugin，除非你在初始化之前将它销毁了。

现在出现的问题是因为，我们在初始化了dialog的情况下，没有销毁（destroy）dialog又企图再次初始化dialog，因为dialog()函数其实是完整了两个操作：一是初始化dialog、一是open这个初始化的dialog，所以按照这个思路，我们只要在每次调用前将前一次调用时初始化的dialog销毁就可以了。

代码如下：

    <script type="text/javascript">

        $(function(){

            $("#openDialog").css("cursor", "pointer").bind("click", function(event){

                $("#divTip").dialog("destroy");   //销毁dialog对象

                $("#divTip").dialog();

            });

        });

    </script>

      浏览页面，打开dialog然后关闭，再打开，再关闭，呵呵没问题了吧！

 

四、          事实还不只如此

上面已经说到，如果是直接调用dialog()函数的话，是相当于做了两个操作，一是初始化dialog、一是打开dialog，说以说不论是打开还是关闭操作都是在初始化操作之上的。为什么这两个操作会一起执行呢？因为dialog有一个autoOpen的选项，它是默认为true的，所以如果在没有销毁dialog的情况下多次调用dialog的话是会没有反应的。

现在我们就不必在每次调用前都销毁之前的dialog了，因为我们可以设置autoOpen为false，这样就不会在每次调用时都初始化一次dialog：

    <script type="text/javascript">

        $(function(){

            $("#openDialog").css("cursor", "pointer").bind("click", function(event){

                $("#divTip").dialog({autoOpen:false, title:"base dialog"})

                            .dialog("open");

            });

        });

    </script>

 

五、          通过上面的代码知道了如果打开一个dialog，现在来看看如何向dialog传递参数

先将span修改为如下：

<span id="openDialog" style="color:Red;" data="我是红色的">弹出窗口</span>

然后修改jQuery代码如下：

    <script type="text/javascript">

        $(function(){

            $("#openDialog").css("cursor", "pointer").bind("click", function(event){

                $("#divTip").dialog({autoOpen:false, title:"base dialog"})

                            .html($(event.target).attr("data"))   //读取span中的值

                            .dialog("open");

            });

        });

    </script>

 

六、          此外我们还可以设置很多很多属性

比如position：

      dialog("option", "position", [left,top])

      关闭dialog：

           dialog("close");

    设置动画效果：

        .show("slow")

        .dialog("open");

            Show必须在open之前