jQueryUI全教程之⼀（dialog的使⽤教程）
jQuery UI⽬前的版本已经更新到了1.8.7。个⼈感觉和easyui相⽐起来，jQuery UI在界⾯的美观程度和可定制型更强⼀些。所以再次将⼀些jQuery UI组件的⽤法说明⼀下，⽅便⽇后查阅。也⽅⾯没接触jQuery UI的⼈能早⽇使⽤jQuery UI套件
(⼀)⾸先来说jQuery UI使⽤频率较⾼dialog组件：
dialog就是我们常说的弹出层，应⽤还是⽐较⼴泛的，⽐如：可以使⽤弹出层做登录、注册和消息提⽰等功能
下⾯来详细说说dialog的使⽤⽅法
在官⽅提供的官⽅⽂档和⽰例中有六种形式的dialog，但是前五种都是⼤同⼩异，包括在编写代码⽅⾯也仅仅是多设置两个属性⽽已，没什么太⼤的不同，先来看看使⽤jQuery UI组件的时候需要那些前期贮备⼯作。
⾸先将需要依赖的js⽂件导⼊到你的页⾯中。需要依赖的⽂件如下：
jquery-ui-1.8.7.custom.css这个是jQuery UI套件的CSS样式表，demos.css这个是jQuery UIdemo中⽤到
的CSS样式，因为我⽤到了这些样式所以将它导⼊进来，如果⼤家不需要可以不导这个⽂件，jquery-1.4.4.min.js这个不⽤说了吧，jQuery的核⼼⽂件，没有它⼀切⼯作都⽆法开展。切记⼀点：⼀定要在引⼊其他的js⽂件之前引⼊jquery-1.4.4.min.js⽂件，别问为什么，懂点jQuery的⼈都能想的到。jquery-ui-
1.8.7.custom.min.js这个是jQueryUI的核⼼js⽂件，也是必须的。有了上述的引⽤后就可以在你的页⾯中使⽤jQuery UI了。
<link href="jqueryui/css/jquery-ui-1.10.1.custom.css" rel="stylesheet">
<script src="jqueryui/jquery-1.9.1.js"></script>
<script src="jqueryui/jquery-ui-1.10.1.custom.js"></script>
先看⼀个超级简单的DEMO：
<div id="tdiv" title="Basic dialog">
hello world,this is a dialog
</div>
在页⾯中加⼊上边的⼀⾏代码，然后加⼊⼀个script标签对，在脚本写如下代码：
$(function(){
$("#tdiv").dialog();
});
<!doctype html>
<html lang="us">
<head>
<meta charset="utf-8">
<title>jQuery UI-Test</title>
<link href="jqueryui/css/jquery-ui-1.10.1.custom.css" rel="stylesheet">
<script src="jqueryui/jquery-1.9.1.js"></script>
<script src="jqueryui/jquery-ui-1.10.1.custom.js"></script>
<script>
$(function(){
$("#tdiv").dialog({
//dialogClass:'alert',
draggable: true, //true 可拖动 flase不可拖动
jquery下载的文件怎么使用modal:true ,  //true带有遮罩;false 没有遮照
autoOpen:false,  //false 不会⾃动打开 ;true 会⾃动打开
height:"auto",  //值可以为“auto”，或者为具体像素，⽐如：400
maxHeight:300,  //可以调整的最⼤⾼度
resizable:true, //可调整⼤⼩的
/
/ show:3000,  //number||string("slow")
//hide:3000,  //number||string("slow")
buttons:{
ok:function(){
$(this).dialog("close");
},
cancel:function(){
$(this).dialog("close");
}
}
complaint怎么读});
/
/dialog 还有⼀些methods，官⽅API：api.jqueryui/dialog/
})
function openD(){
$("#tdiv").dialog("open");
}
</script>
</head>
<body>
<div id="tdiv" title="Basic dialog">
hello world,this is a dialog
</div>
<a href="javascript:void(0);" onclick = "openD()" >test dialog</a>通配符 是表示它所在位置上的什么
</body>
</html>
打开你的页⾯看⼀下吧，如果没什么意外你会看到⼀个类似这样的对话框
简单吧，这就是⼀个弹出层，其中div的title被当作了dialog的title，右上⾓有关闭的xx，右下⾓则可以拖拽改变⼤⼩
这就是⼀个默认的dialog，虽然我们没有为它指定⾼度和宽度，但是它有默认的值，在我们没有设定情况下dialog默认会弹出在屏幕的中央，⼤⼩也是有默认值的，可以改变⼤⼩，显⽰关闭按钮，这都是默认的样式，那么如果我们想⾃⼰定制⼀下dialog，
下⾯介绍⼀些属性和⽅法来改变⼀下这个dialog，⽤到的属性如下：
autoOpen,modal,buttons，根据这些属性我们来定制⼀个不会⾃动打开(当点击按钮或者通过其他的事件来触发弹出dialog的事件)，并且带有遮罩(模式窗体)和按钮的dialog
buttons属性是⼀个复合属性，使⽤形式如下：buttons{ok:function(){点击按钮执⾏的事件},cancel:function(){点击按钮执⾏的事件}}
其中ok是按钮显⽰的⽂本，⽽function是点击按钮后执⾏的事件。注意，在ok和function之间有冒号:，虽然按钮可以为中⽂，⽐如：确
定:function(){}这种形式，但是切记，在按钮⽂本和function之间的冒号⼀定是英⽂字符下的冒号，不要写成中⽂的全⾓冒号，否则会有错误。
将刚才的js脚本替换为：
$(function(){
$("#tdiv").dialog({
dialogClass:'alert',
draggable: true, //true 可拖动 flase不可拖动
modal:true ,  //true带有遮罩;false 没有遮照
autoOpen:true,  //false 不会⾃动打开 ;true 会⾃动打开
height:"auto",  //值可以为“auto”，或者为具体像素，⽐如：400
maxHeight:300,  //可以调整的最⼤⾼度
resizable:true, //可调整⼤⼩的
show:3000,  //number||string("slow")
hide:3000,  //number||string("slow")
buttons:{
ok:function(){
$(this).dialog("close");
},
cancel:function(){
$(this).dialog("close");
}
}
});
//dialog 还有⼀些methods，官⽅API：api.jqueryui/dialog/
})
//控制打开dialog的⽅法
function open_dialog(){
$("#tdiv").dialog("open");
}
这⾥的dialog将带有⼀个登录按钮。并且为带遮罩的模式窗体。默认不显⽰。所以我们需要在页⾯添加⼀个按钮，通过点击按钮来控制打开dialog
<input type="button" value="打开" οnclick="open_dialog();"/>
这样当点击这个按钮时会打开这个dialog.打开后的dialog如下图：
可能有的⼈会说为什么这个显⽰的颜⾊和样式都第⼀个不⼀样呢？
因为jQueryUI组件的⽪肤都是可定制的，⽽不是⼀尘不变。可以根据需要选择⾃⼰喜欢的⽪肤样式来使⽤，在jQueryUI的官⽅⽹站上有UI⽪肤下载的，可以先预览⽪肤的效果再下载，下载后只需要将当前项⽬中的CSS⽂件即可实现切换⽪肤
那么在dialog中显⽰的username:  password:    和两个⽂本框⼜是从何⽽来的？
这是⾃⼰写的⼀个表单，⽤于让⽤户登录的表单，还记得吗？dialog是通过在页⾯中指定⼀个div，然
后得到该div对象.dialog()就可以⽣成dialog了，同样的道理，我们可以在这个div中加⼊⾃⼰想要的表单域。这个就是我⾃⼰定制的登录表单。样式采⽤了UI提供的样式，当然，如果你觉得这个样式不好同样是可以⾃⼰定制⾃⼰的CSS来使⽤。完整的表单代码如下：
<!-- 登录区域表单信息 -->
<div id="dialog-form" class="ui-widget ui-widget-content ui-corner-all" title="⽤户登录">
<p id="login_tip"></p>
<form id="login-form">
<fieldset>
username:<input type="text" name="name" id="name" class="text ui-widget-content ui-corner-all" />
password:<input type="password" name="password" id="password" value="" class="text ui-widget-content ui-corner-all" />
</fieldset>
</form>
</div>
⼤家可以看到每个input标签都有⼀个class属性，指定了3个class样式。这就是jQueryUI给我们提供的，不需要我们去写样式表⽂件。
更多的属性应⽤⼤家可以参考官⽅提供的⽂档，由于属性较多，不再⼀⼀介绍。都很简单，需要⽤到的时候查询⼀下即可
下⾯说说dialog中的事件调⽤。在上⾯的例⼦中dialog只有⼀个按钮，⽤于登录。如果我想添加另外⼀个按钮：关闭，当我点击关闭时关闭dialog该如何做呢？在jQueryUI中，多数组件的事件都使⽤如下的形式来调⽤：
$("#dialog").dialog("close")；其中close就是事件的名称，这样当我点击这个按钮时就可以关闭该dialog了。如果要打开dialog也是同样的道理。$("#dialog").dialog("open")；这个⽤于打开dialog。更多的⽅法请查阅⽂档，事件的功能不⼀样，但是⽤法基本⼀致：
都是$.dialog("事件名称")；这种形式
下⾯我们以dialog为例，来实现⼀个实⽤dialog+form表单进⾏ajax注册的实例(只写前台实现，后台请根据⾃⼰所⽤的服务器端语⾔进⾏实现。)
⾸先看注册的dialog中都有什么内容。主页页⾯的dialog如下所⽰：
注册表单中有⽤户名、密码、email和⽤户的⽣⽇以及“提交”和“取消按钮”
功能描述：
当⽤户点击提交的时候⾸先进⾏客户端的验证，如果有不符合要求的则给与⽤户提⽰信息。提⽰信息会以醒⽬的⽅式显⽰在表单的最上⽅，不是alert()的⽅式。当验证通过后点击提交按钮发起ajax请求，将表单数据发送到后台处理，最终记录在数据库中，注册成功
html表单按钮边框颜修改先来看注册表单中div中的内容：
<div id="register-form" class="ui-widget ui-widget-content ui-corner-all" title="⽤户注册">
<p class="validateTips">所有的表单域都为必填项.</p>
<form id="reg-form">
<fieldset>
⽤户名:<input type="text" name="uname" id="uname" value="" class="text ui-widget-content ui-corner-all" />
密码:<input type="password" name="upass" id="upass" value="" class="text ui-widget-content ui-corner-all" />
email:<input type="text" name="email" id="email" value="" class="text ui-widget-content ui-corner-all" />
⽣⽇:<input type="text" readonly="readonly" name="birth" id="birth" value="" class="text ui-widget-content ui-corner-all" />
</fieldset>
</form>
</div>
上边的div中显⽰的就是注册表单的内容。⼀共四项，和⼤家看到的dialog中的是⼀致的
然后来看如何对这些数据进⾏验证，验证代码如下：
//注册表单相关函数和验证
//获取name,password,email和birth对象并将对象添加到⼀个空对象中备⽤
var uname = $("#uname"),
password = $("#upass"),
email = $("#email"),
birth = $("#birth"),
fields = $([]).add(uname).add(password).add(email),
tips = $(".validateTips");
$("#register-form").dialog({
//打开对话框的时候移除表单域的样式并设置错误信息显⽰⽂本为默认值
open:function(){
fields.val("");
},
modal:true,//弹出带有遮罩的模式窗体
autoOpen:false,//不⾃动打开
buttons:{
提交:function(){
//点击提交按钮时执⾏的事件
var chk = true;
三更视频下载教程
//验证字段长度是否符合要求
chk = chk && checkLength(uname,"username",2,15);
chk = chk && checkLength(password,"password",6,20);
chk = chk && checkLength(email,"email",6,40);
chk = chk && checkLength(birth,"birthday",8,10);
//正则表达式验证⽤户名和email是否合法
chk = chk && checkReg(name,/^([\u4E00-\uFA29]|[\uE7C7-\uE7F3]|[a-zA-Z])|_\w*$/,"⽤户名必须以字母、下划线或者汉字开头，请修改后提交");
chk = chk && checkReg(email,/\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/,"请输⼊正确的email格式，格式如下:admin@yahoo");
thinkphp漏洞反制
在上边的验证中使⽤到了checkLength()⽅法和checkReg⽅法，这两个⽅法分别都是⾃定义⽅法，分别是验证字段长度和通过正则表达式验证输⼊是否合法的⽅法，在jQueryUI官⽅提供的Demo⾥也有相应的⽅法，我在这⾥对⽅法做修改，因为官⽅的DEMO中当验证失败后，重新打开DIALOG时，验证失败的提⽰信息和错误样式都还保存着。⽽我写的⽅法已经做了修改。不会有这样的问题，下⾯是checkLength和checkReg⽅法，⽅法的注释我写的很清楚了，不再解释，我会说下关于添加错误CSS样式的东西。
//判断字段长度是否符合要求的⽅法，四个参数分别为：o被检测的对象,msg被检测对象显⽰名称
//min允许的最⼩长度,max允许的最⼤长度
function checkLength(o,msg,min,max){
if(o.val().length > max || o.val().length < min){
o.addClass("ui-state-error");//为当前的错误域添加CSS样式
updateTip(msg+"的长度必须在"+min+"到"+max+"之间");//更新提⽰区域的信息
return false;
}else{
//如果验证通过则移除当前对象的CSS错误样式
return true;
}
}
/
/通过正则表达式验证内容的⽅法,o为表单域对象,reg为正则表达式,n为错误提⽰信息
function checkReg(o,reg,n){
if(!st(o.val())){
o.addClass("ui-state-error");
updateTip(n);
return false;
}else{
return true;
}
}
在这两个⽅法中都⽤到了⼀个updateTip⽅法，该⽅法的作⽤就是给那个<p>标签也就是错误消息显⽰的地⽅添加⼀个css样式，⽤来⾼亮提⽰⽤户的。⽅法如下：
//更新提⽰信息的⽅法，传递的参数t为显⽰的错误信息，然后为显⽰信息的标签添加⾼亮
function updateTip(t){

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。