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);
创建一个简单对话框：
view plaincopy to clipboardprint?
<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>
<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>
页面：
view plaincopy to clipboardprint?
<div class="demo">
<div id="dialog" title="基本对话框">
<p>
这是一个对话框， 窗口可以移动,缩放和关闭的“x”图标</p>
</div>
<button id="opener">
打开对话框</button>
</div>
<div class="demo">
<div id="dialog" title="基本对话框">
<p>
这是一个对话框， 窗口可以移动,缩放和关闭的“x”图标</p>
</div>
<button id="opener">
打开对话框</button>
</div>
平时使用的时候，如果需要操作多个DIV的显示隐藏会比较麻烦，所以我写了一个简单的方法，传入DIV的ID就可以了：
view plaincopy to clipboardprint?
<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>
<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>
调用：
view plaincopy to clipboardprint?
<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="显示" />
<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/ 中文文档