Jquery Dialog的使用说明

Jquery Dialog的使用说明

1、下载jquery的最新版本jquery.js 下载地址：jquery.com   http://code.jquery.com/jquery-1.6.1.min.js
2、下载Jqueryui.com中的对话框的相关文件。
进入网站：http://jqueryui.com/download
选择Widgets中的Dialog，然后下载任意版本就ok了。
3、里面有一个小例子，大家可以按照这个demo进行使用了。
下面简单介绍一下dialog的使用情况。
新建一个html页面，引入相应的jquery.js、jquerui.js、和相应的css文件后(注意如果你不是采用默认的图片的话，需要修改css中图片的路径)。
在body中写如下代码<p id="dialog">this is a dialog</p>。
然后
<script language="javascript" type="text/javascript">
    $(document).ready(function(){$("#dialog").dialog();});
</script>
看到了吧，只需要一句话，就可以显示一个消息框，是不是很简单啊 。
至于dialog的其他属性，可以到官方网站查看了。http://jqueryui.com/demos/dialog/。
属性的设置基本上都是$("#dialog").dialog("option","attr","value");
属性获取的方法也很简单：$("#dialog").dialog("option","attr");
还有就是初始化的时候，设置消息框属性：$("#dialog").dialog({attr:value,attr:value....});
慢慢的，你会发现dialog使用起来是如此的强大，如此的简单的。
最后，特别说到一个属性show，在官方网站没有列举他的属性值。在网上找了一下。特别列举到此处。
//example slide,blind,clip,drop,explode,fold,puff,scale,size,pulsate
$("#dialog2").dialog("option","show","pulsate");
给出结果的网站是：http://jsbin.com/uruba

补充20110718

1、进行.net web开发的时候，有时用到jquery dialog。但是dialog中的服务起控件不能使用。

解决办法是：

（1）通过设置dialog的默认设置：open:function(){$("#dialog的ID").parent().appendTo("form:first");}此处的form是指asp:form runat="server" 的form.

（2）也可以在js文件中，把默认dialog加载到form中。jquery默认是加载到body中的。

open: function () {
                   $("#companyAdd").parent().appendTo("form:first"); 

                    $(".ui-dialog-titlebar-close").hide();
                }

2、在jquery dialog的默认样式中，怎么去掉关闭按钮呢？

如上：

open：function(){$(".ui-dialog-titlebar-close").hide();}
或者在css中设置.ui-dialog-titlebar的样式。

3、判断dialog是否打开状态方法$("#dialog").dialog("isOpen") 返回true 、false.

if($("#dialog").dialog("isOpen")){

alert("打开状态");

}

else{

alert("关闭状态");

}