Jquery UI Dialog 对话框学习

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

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

<link href="../Styles/jquery-ui-1.8.6.custom.css" mce_href="Styles/jquery-ui-1.8.6.custom.css" rel="stylesheet" type="text/css"/> <script src="../Scripts/jquery-1.4.2.min.js" mce_src="Scripts/jquery-1.4.2.min.js" type="text/javascript"></script> <script src="../Scripts/jquery-ui-1.8.6.custom.min.js" mce_src="Scripts/jquery-ui-1.8.6.custom.min.js" type="text/javascript"></script>

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

每个 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"><!-- //隐藏层，传入DIV的id function hideDiv(id) { var divid = "#" + id; $(divid).dialog("close") return false; } //显示层，传入div的id function showDiv(id) { var divid = "#" + id; $(divid).dialog({ autoOpen: false, show: "blind", hide: "explode" }) $(divid).dialog("open"); return false; } // --></script>

调用：

<div id="Div1" title="基本对话框" style="display: none" mce_style="display: none"> <p> 用户名<asp:TextBox ID="TextBox3" runat="server"></asp:TextBox> </p> <p> 密码<asp:TextBox ID="TextBox4" runat="server" TextMode="Password"></asp:TextBox> </p> <div style="text-align: right" mce_style="text-align: right"> <asp:Button ID="Button2" runat="server" Text="提交" OnClientClick="hideDiv('Div1');" /> <input name="name" type="button" onclick="hideDiv('Div1');" value="关闭" /> </div> </div> </div> <input name="name" type="button" onclick="showDiv('Div1');" value="显示" />

效果图如下：

   

创建实例时设置属性值

创建组件实例时，以 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/ 中文文档