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之前