《jquery_ui全教程之一(dialog的使用教程)》由会员分享，可在线阅读，更多相关《jquery_ui全教程之一(dialog的使用教程)（15页珍藏版）》请在金锄头文库上搜索。
1、jQuery UI 目前的版本已经更新到了 1.8.7。个人感觉和 easyui 相比起来，jQuery UI 在界面的美观程度和可定制型更强一些。所以再次将一些 jQuery UI 组件的用法说明一下，方便日后查阅。也方面没接触jQuery UI 的人能早日使用 jQuery UI 套件(一)首先来说 jQuery UI 使用频率较高 dialog 组件：dialog 就是我们常说的弹出层，应用还是比较广泛的，比如：可以使用弹出层做登录、注册和消息提示等功能下面来详细说说 dialog 的使用方法在官方提供的官方文档和示例中有六种形式的 dialog,但是前五种都是大同小异，包括在编写代码方
2、面也仅仅是多设置两个属性而已，没什么太大的不同，先来看看使用 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 文件之前引入 jqu
3、ery-1.4.4.min.js 文件，别问为什么，懂点 jQuery 的人都能想的到。jquery-ui-1.8.7.custom.min.js 这个是 jQueryUI 的核心 js 文件，也是必须的。有了上述的引用后就可以在你的页面中使用 jQuery UI 了。先看一个超级简单的 DEMO：这是一个采用默认样式的对话框在页面中加入上边的一行代码，然后加入一个 script 标签对，在脚本写如下代码：$(function()$(“#dialog“).dialog(););打开你的页面看一下吧，如果没什么意外你会看到一个类似这样的对话框简单吧，这就是一个弹出层，其中 div 的 title
4、 被当作了 dialog 的 title,右上角有关闭的 xx，右下角则可以拖拽改变大小这就是一个默认的 dialog，虽然我们没有为它指定高度和宽度，但是它有默认的值，在我们没有设定情况下 dialog 默认会弹出在屏幕的中央，大小也是有默认值的，可以改变大小，显示关闭按钮，这都是默认的样式，那么如果我们想自己定制一下 dialog，不想让他这样显示该如何做？下面介绍一些属性和方法来改变一下这个 dialog，用到的属性如下：autoOpen,modal,buttons，根据这些属性我们来定制一个不会自动打开(当点击按钮或者通过其他的事件来触发弹出 dialog 的事件)，并且带有遮罩(模式
5、窗体)和按钮的 dialogbuttons 属性是一个复合属性，使用形式如下：buttonsok:function()点击按钮执行的事件,cancel:function()点击按钮执行的事件其中 ok 是按钮显示的文本，而 function 是点击按钮后执行的事件。注意，在 ok 和 function 之间有冒号:，虽然按钮可以为中文，比如:确定:function()这种形式，但是切记，在按钮文本和 function 之间的冒号一定是英文字符下的冒号，不要写成中文的全角冒号，否则会有错误。将刚才的 js 脚本替换为：$(“#dialog-form“).dialog(autoOpen:false
6、,modal:true,buttons:登录:function()alert(“您点击了登录按钮“);)/控制打开 dialog 的方法function open_dialog()$(“#dialog-form“).dialog(“open“);这里的 dialog 将带有一个登录按钮。并且为带遮罩的模式窗体。默认不显示。所以我们需要在页面添加一个按钮，通过点击按钮来控制打开 dialog这样当点击这个按钮时会打开这个 dialog.打开后的 dialog 如下图：可能有的人会说为什么这个显示的颜色和样式都第一个不一样呢？因为 jQueryUI 组件的皮肤都是可定制的，而不是一尘不变。可以根据
7、需要选择自己喜欢的皮肤样式来使用，在 jQueryUI 的官方网站上有 UI 皮肤下载的，可以先预览皮肤的效果再下载，下载后只需要将当前项目中的 CSS 文件即可实现切换皮肤那么在 dialog 中显示的 username: password: 和两个文本框又是从何而来的？这是自己写的一个表单，用于让用户登录的表单，还记得吗？dialog 是通过在页面中指定一个 div，然后得到该 div 对象.dialog()就可以生成 dialog 了，同样的道理，我们可以在这个 div 中加入自己想要的表单域。这个就是我自己定制的登录表单。样式采用了 UI 提供的样式，当然，如果你觉得这个样式不好同样是
8、可以自己定制自己的 CSS 来使用。完整的表单代码如下：username:password:大家可以看到每个 input 标签都有一个 class 属性，指定了 3 个 class 样式。这就是 jQueryUI 给我们提供的，不需要我们去写样式表文件。更多的属性应用大家可以参考官方提供的文档，由于属性较多，不再一一介绍。都很简单，需要用到的时候查询一下即可下面说说 dialog 中的事件调用。在上面的例子中 dialog 只有一个按钮，用于登录。如果我想添加另外一个按钮：关闭，当我点击关闭时关闭 dialog 该如何做呢？在 jQueryUI 中，多数组件的事件都使用如下的形式来调用：$(“
9、#dialog“).dialog(“close“);其中 close 就是事件的名称，这样当我点击这个按钮时就可以关闭该 dialog 了。如果要打开 dialog 也是同样的道理。$(“#dialog“).dialog(“open“);这个用于打开 dialog。更多的方法请查阅文档，事件的功能不一样，但是用法基本一致：都是$.dialog(“事件名称“);这种形式下面我们以 dialog 为例，来实现一个实用 dialog+form 表单进行 ajax 注册的实例(只写前台实现，后台请根据自己所用的服务器端语言进行实现。)首先看注册的 dialog 中都有什么内容。主页页面的 dialog
10、 如下所示：注册表单中有用户名、密码、email 和用户的生日以及“提交”和“取消按钮”功能描述：当用户点击提交的时候首先进行客户端的验证，如果有不符合要求的则给与用户提示信息。提示信息会以醒目的方式显示在表单的最上方，不是 alert()的方式。当验证通过后点击提交按钮发起 ajax 请求，将表单数据发送到后台处理，最终记录在数据库中，注册成功先来看注册表单中 div 中的内容：所有的表单域都为必填项.用户名:密码:email:生日:上边的 div 中显示的就是注册表单的内容。一共四项，和大家看到的 dialog 中的是一致的然后来看如何对这些数据进行验证，验证代码如下：/注册表单相关函数和
11、验证/获取 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()tips.removeCl
12、ass().text(“所有的表单域都为必填项.“);fields.removeClass(“ui-state-error“);fields.val(“);,modal:true,/弹出带有遮罩的模式窗体autoOpen:false,/不自动打开buttons:提交:function()/点击提交按钮时执行的事件var chk = true;/验证字段长度是否符合要求chk = chk chk = chk chk = chk chk = chk /正则表达式验证用户名和 email 是否合法chk = chk chk = chk 在上边的验证中使用到了 checkLength()方法和 che
13、ckReg 方法，这两个方法分别都是自定义方法，分别是验证字段长度和通过正则表达式验证输入是否合法的方法，在 jQueryUI 官方提供的 Demo 里也有相应的方法，我在这里对方法做修改，因为官方的 DEMO 中当验证失败后，重新打开 DIALOG 时，验证失败的提示信息和错误样式都还保存着。而我写的方法已经做了修改。不会有这样的问题，下面是checkLength 和 checkReg 方法，方法的注释我写的很清楚了，不再解释，我会说下关于添加错误 CSS样式的东西。/判断字段长度是否符合要求的方法,四个参数分别为：o 被检测的对象,msg 被检测对象显示名称/min 允许的最小长度,max
14、 允许的最大长度function checkLength(o,msg,min,max)if(o.val().length max | o.val().length 标签也就是错误消息显示的地方添加一个 css 样式，用来高亮提示用户的。方法如下：/更新提示信息的方法，传递的参数 t 为显示的错误信息，然后为显示信息的标签添加高亮function updateTip(t)tips.text(t).addClass(“ui-state-highlight“);验证的过程就是如上面显示的那样，方法都有比较详细的注释，大家可以自己看当用户输入的都被我们验证，并通过后，应该像后台发起 ajax 请求了。
15、具体代码如下：此处用到了一个 formSerialize()方法，是一个 jquery.form.js 的脚本文件，针对表单的一个 jq 插件，可以序列化表单，这样我们只需要把序列化后的值传递给后台就行，不用一个个获取再拼接了。如果需要用到请自行引入该脚本if(chk)/验证通过后移除提示处的样式和错误消息tips.removeClass().text(“);/序列化表单var user = $(“#reg-form“).formSerialize();/发起 ajax 请求$.ajax(type:post,url: $path/UserAction?method=register,data:
16、user,success:function(msg)if(msg = “success“)$(“#register-form“).dialog(“close“);elsealert(“服务器异常,请稍后再试“);,error:function()alert(“ajax 请求失败“););整个的注册流程就是这样，当注册完成后会关闭 dialog,下面的图片显示当验证出现错误时的样式下一次将会讲解 jQueryUI 的 datepicker 组件的使用1. Javascript 返回上一页 history.go(-1), 返回两个页面: history.go(-2);2. history.back().3. window.history.forward()返回下一页4. window.history.go(返回第几页,也可以使用访问过的 URL) 例:向上一页response.Write(“)response.Write(“if(!confir
