深入浅出jQuery（五）如何自定义UI-Dialog？
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
深⼊浅出jQuery（五）如何⾃定义UI-Dialog？
1. 前⾔
a. 随着Web⽹页的开速度，jQuery库越来越不能满⾜开发⼈员的需要，慢慢的有⼈开发出来了jQuery-UI库，专门⽤
来设计Web前端的界⾯库，我们只需在程序中引⼊这个库即可轻松便捷的设计出各种绚丽的界⾯效果。
2. 简介
a. jQuery-UI（User Interface）是在jQuery库的基础之上开发的，因此它依赖于jQuery，⽬前jQuery-UI已经开发到了
1-9-0版本，⾥⾯提供了平时开发中常⽤的⼤部分界⾯效果，⽐如按钮、滚动条、GridView、弹出框等等，另外如果你⽔平够⾼，还可以⾃⼰开发UI控件，⽬前很多公司⾥⾯都在⽤它来开发前台。
3. ⼀种最简单的例⼦--Dialog
a. 如果想在Web页⾯上出现⼀个提⽰信息对话框，⼀般有两种⽅法，⼀是在JavaScript中内置的 Confirm()、Alert()
之类的；另⼀种是Web页⾯，设置它的⼤⼩改变的和对话框类似，但这两种对话框局限性⽐较⼤，满⾜不了我们开发中的需求，⾄少你不能在上⾯⾃定义按钮、显⽰图⽚、视频等等，⽽Dialog可以，它不仅仅提供了很多默认属性，还可以⾃定义新属性，⼤⼤扩展了对话框的功能，下⾯先看⼀下它常⽤的属性、⽅法。
b.
c. 应⽤
i. 引⼊⽤到的UI库以及CSS，如下
1. <link rel="stylesheet" href="css/jquery.ui.all.css">
<script src="script/jquery-1.4.4.js"></script>
<script src="script/external/jquery.bgiframe-2.1.2.js"></script>
<script src="script/jquery.ui.core.js"></script>
<script src="script/jquery.ui.widget.js"></script>
<script src="script/jquery.ui.mouse.js"></script>
<script src="script/jquery.ui.button.js"></script>
<script src="script/jquery.ui.draggable.js"></script>
<script src="script/jquery.ui.position.js"></script>
<script src="script/jquery.ui.resizable.js"></script>
<script src="script/jquery.ui.dialog.js"></script>
<link rel="stylesheet" href="css/demos.css">
ii. 建⽴⼀个DIV标签，如下
1. <body>
//打开对话框按钮
<input id="btn" type="button" value="打开对话框" />
//DIV标签
<div id="dialog" title="信息提⽰框">
<p>你好！李龙⽣</p>
</div>
</body>
iii. 现在就可以建⽴对话框了，然后，我们可以根据⾃⼰需要定制⼀些属性值
1. <script type="text/javascript">
$(function() {
//单击确定按钮时，从对话框中取得数据
var getResponse=function(){
//更新数据库操作
var value;
value=$("p").val();
alert(value);
//关闭对话框
$( this ).dialog( "close" );
};
//单击取消按钮
var doCancel=function(){
$( this ).dialog( "close" );
};
//设置对话框的默认值
var dialogOpts={
//添加按钮
buttons:{Ok:getResponse,
cancel:Cancel
},
//禁⽌⾃动开发
autoOpen:false,
//关闭时效果
hide:true
};
//加载对话框
$( "#dialog" ).dialog(dialogOpts);
//按钮的单击事件
$("#btn").click(function(){
//打开对话框
$( "#dialog" ).dialog("open");
});
});
</script>
2.
3. 默认值dialogOpts通过声明⼀个对象数组，并赋初值来绑定
4. ⾃⼰写插件默认值可以通过$.extend 来⾃定义
5. Button，通过Key/Value⽅式设定，Value值表⽰⼀个CallBack回调函数，当单击某⼀个按钮时相应的回
调函数就会触发，然后，执⾏代码。
a. 例如：当对话框是⼀个删除提⽰时，单击了确定按钮，就会执⾏给确定按钮设置的回调函数，更新
数据库操作等
b. 需要注意的是当⾃⼰写函数之后，后⾯需要⽤到的函数要写在前⾯，否则经常找不到
c. 它的各种样式，背景、颜⾊等可以⾃定义，需要在CSS⽂件⾥⾯修改
4区别
a. jQuery UI实际上是jQuery插件，专指由jQuery官⽅维护的UI⽅向的插件
b. jQuery UI 与 jquery 的主要区别是：
c. jQuery是⼀个js库，主要提供的功能是选择器，属性修改和事件绑定等等。
d. jQuery UI则是在jQuery的基础上，利⽤jQuery的扩展性，设计的插件。
提供了⼀些常⽤的界⾯元素，诸如对话框、拖动⾏为、改
变⼤⼩⾏为等等。
e. jQuery本⾝注重于后台，没有漂亮的界⾯，⽽jQuery UI则补充了前者的不⾜，他提供了华丽的展⽰界⾯，使⼈更容易接受。
既有
强⼤的后台，⼜有华丽的前台。
5.下载。