Jquery UI Dialog 对话框学习

今天又发现了一个比较好的东西 jQuery UI ，学习学习。官网上面很详细，由于我英文不太好！所以了解的不是很好！如果有高手希望能多指教下。不胜感激！
官网：http://jqueryui.com/demos
介绍：
jQuery UI 是以 jQuery 为基础的开源 JavaScript 网页用户界面代码库。包含底层用户交互、动画、特效和可更换主题的可视控件。

使用方法：
首先导入JS和CSS文件:

所需文件也可以去官网下载。

每个 jQuery UI 组件提供一个可串联的标准 jQuery 方法，创建实例时，仅需在 jQuery 对象上调用组件方法。如：

$("#login-form").dialog(); // 创建对话框

组件方法可串联使用：

创建可拖动位置、可调整大小的对象

$("#id").draggable().resizable();

创建标签页，设置每5秒自动切换标签

$("#news-panel").tabs().tabs("rotate",5000);

创建一个简单对话框：

<script type="text/javascript> $.fx.speeds._default = 1000; $(function() { $("#dialog").dialog({ autoOpen: false, show: "blind", hide: "explode" }); $("#opener").click(function() { $("#dialog").dialog("open"); return false; }); }); script>

页面：

<div class="demo"> <div id="dialog" title="基本对话框"> <p> 这是一个对话框，窗口可以移动,缩放和关闭的“x”图标</p> </div> <button id="opener"> 打开对话框</button> </div>

平时使用的时候，如果需要操作多个DIV的显示隐藏会比较麻烦，所以我写了一个简单的方法，传入DIV的ID就可以了：

<script type="text/javascript" language="javascript"></script>

调用：

效果图如下：

创建实例时设置属性值

创建组件实例时，以 Object 型参数设置实例的属性。

$(".class").组件名({属性名1:值1,属性名2:值2});

如：

$(".class").draggable({axis:"x",cursor:"crosshair"});

获得属性值
组件实例化后，可以通过 option 方法获得属性值。

var a = $(".class").组件名("option",属性名);

如：

var axis = $(".class").draggable("option","axis");

重设属性值
组件实例化后，可以通过 option 方法重设属性值。

$(".class").组件名("option",属性名,属性值);

如：

$(".class").draggable("option","axis","y");

方法：

open .dialog("open")

显示对话框。

isOpen .dialog("isOpen")

对话框可见时返回 true。

moveToTop .dialog("moveToTop")

使对话框处于最前方。

close .dialog("close")

关闭对话框。

destroy .dialog("destroy")

销毁对话框实例。

disable .dialog("disable")

禁止操作对话框。

enable .dialog("enable")

允许操作对话框。

option .dialog("option",optionName[,value])

得到对话框属性，传递 value 参数时设置属性。

属性参考可以去http://jqueryui.net/dialog/ 中文文档