《jqueryui教程之dialog的使用》由会员分享，可在线阅读，更多相关《jqueryui教程之dialog的使用（12页珍藏版）》请在金锄头文库上搜索。
1、本人初学jquery ui，使用php语言，以下是学习的过程，希望与大家共同进步。jQuery UI目前的版本已经更新到了1.9.2。在此将一些jQuery UI组件的用法说明一下，方便日后查阅。同时也方便没接触jQuery UI的人能早日使用jQuery UI套件。本文用的jquery ui组件是在http:/ 下载,进入网站后点击下图红框圈起的“theme”连接，在此页面可以选择主题预览，从而选择您要下载的jquery ui的主题样式。主题预览可以点击下图右侧的中的红框圈出的“Gallery”，然后点击其下的主题样式，就可以在页面右侧看到相应的主题样式，选择一个您喜欢的样式，点击“Down
2、load”按钮按要求操作就可下载到你想要的jquery ui组件了。 下载后将jqury ui组件像平时使用的js文件一样放到js文件夹下即可（此处我下载的是第一个UI lightness样式，并将解压后的文件夹更名为jquery-ui文件夹了）。一、首先来说jQuery UI使用频率较高dialog组件：dialog就是我们常说的弹出层，应用还是比较广泛的，比如：可以使用弹出层做登录、注册和消息提示等功能。下面来详细说说dialog的使用方法。在官方提供的官方文档和示例中有六种形式的dialog,但是前五种都是大同小异，包括在编写代码方面也仅仅是多设置两个属性而已，没什么太大的不同，先来看看
3、使用jQuery UI组件的时候需要那些前期贮备工作。首先将需要依赖的js文件导入到你的页面中。需要依赖的文件如下：jquery-ui-1.9.2.custom.css（位于jquery-ui-1.9.2/css/smoothness下）这个是jQuery UI套件的CSS样式表，demos.css（位于jquery-ui-1.9.2/development-bundle/demos下）这个是jQuery UIdemo中用到的CSS样式，因为本例中用到了这些样式所以将它导入进来，如果大家不需要可以不导这个文件，导入jquery核心文件jquery-1.8.3.min.js，没有它一切工作都无法
4、开展。切记一点：一定要在引入其他的js文件之前引入jquery-1.8.3.min.js文件。jquery-ui-1.9.2.custom.min.js这个是jQueryUI的核心js文件，也是必须的。有了上述的引用后就可以在你的页面中使用jQuery UI了。先看一个超级简单的DEMO：这是一个采用默认样式的对话框在页面中加入上边的一行代码，然后加入一个script标签对，在脚本写如下代码：$(function() $(#dialog).dialog(););打开你的页面看一下吧，如果没什么意外你会看到一个类似这样的对话框这就是一个弹出层，其中div的title被当作了dialog的titl
5、e,右上角有关闭的按钮“x”，右下角则可以拖拽改变大小。这就是一个默认的dialog，虽然我们没有为它指定高度和宽度，但是它有默认的值，在我们没有设定情况下dialog默认会弹出在屏幕的中央，大小也是有默认值的，可以改变大小，显示关闭按钮，这都是默认的样式，那么如果我们想自己定制一下dialog，不想让他这样显示该如何做？下面介绍一些属性和方法来改变一下这个dialog，用到的属性如下：autoOpen,modal,buttons，根据这些属性我们来定制一个不会自动打开(当点击按钮或者通过其他的事件来触发弹出dialog的事件)，并且带有遮罩(模式窗体)和按钮的dialog。buttons属性
6、是一个复合属性，使用形式如下：buttons:ok:function()点击按钮执行的事件,cancel:function()点击按钮执行的事件其中ok是按钮显示的文本，而function是点击按钮后执行的事件。注意，在ok和function之间有冒号（“:”），虽然按钮可以为中文，比如:确定:function()这种形式，但是切记，在按钮文本和function之间的冒号一定是英文字符下的冒号，不要写成中文的全角冒号，否则会有错误。在html页面输入下列代码：username: password: $(function()$(#dialog-form).dialog( autoOpen:fal
7、se, modal:true, buttons:登录:function() alert(您点击了登录按钮！); );); function open_dialog()$(#dialog-form).dialog(open);以上的dialog将带有一个登录按钮。并且为带遮罩的模式窗体。默认不显示。所以我们需要在页面添加一个按钮，通过点击按钮来控制打开dialog,当点击这个按钮时会打开这个dialog，打开后的dialog如下图：可能有的人会说为什么这个显示的颜色和样式都和我的不一样呢？因为jQueryUI组件的皮肤都是可定制的，而不是一成不变。可以根据需要选择自己喜欢的皮肤样式来使用，在jQ
8、ueryUI的官方网站上有UI皮肤下载的，可以先预览皮肤的效果再下载（上文提及过的“主题”），下载后只需要将当前项目中引入CSS文件即可实现切换皮肤主题。以上例子，大家可以看到每个input标签都有一个class属性。上例指定了3个class样式。这就是jQueryUI给我们提供的，不需要我们去写样式表文件。更多的属性应用大家可以参考官方提供的文档，由于属性较多，不再一一介绍。都很简单，需要用到的时候查询一下即可。下面说说dialog中的事件调用。在上面的例子中dialog只有一个按钮，用于登录。如果我想添加另外一个按钮：关闭，当我点击关闭按钮时关闭dialog该如何做呢？在jQuery UI
9、中，多数组件的事件都使用如下的形式来调用：$(#dialog-form).dialog(close);其中close就是事件的名称，这样当我点击这个按钮时就可以关闭该dialog了。如果要打开dialog也是同样的道理。$(#dialog-form).dialog(open);这个用于打开dialog。更多的方法请查阅文档，事件的功能不一样，但是用法基本一致：都是$.dialog(事件名称);这种形式。下面我们以dialog为例，来实现一个实用dialog+form表单进行ajax注册的实例(只写前台实现，后台请根据自己所用的服务器端语言进行实现) 。首先看注册的dialog中都有什么内容。主
10、页页面的dialog如下所示：注册表单中有用户名、密码、email和用户的生日以及“提交”和“取消按钮”功能描述：当用户点击提交的时候首先进行客户端的验证，如果有不符合要求的则给与用户提示信息。提示信息会以醒目的方式显示在表单的最上方。当验证通过后点击提交按钮发起ajax请求，将表单数据发送到后台处理（本文用的是php语言，后台处理页为data_ajax.php），最终记录在数据库中，注册成功。先来看注册表单中div中的内容：所有的表单域都为必填项. 用户名:密 码: email: 生 日: 上边的div中显示的就是注册表单的内容。一共四项。然后来看如何对这些数据进行验证，
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.removeClass().text(所有的表单域都为必填项.);fields.removeClass(ui-state-error);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 & checkLengt
