jqueryui教程之dialog的使用

jqueryui教程之dialog的使用

ID:8959413

大小:206.10 KB

页数:12页

时间:2018-04-13

jqueryui教程之dialog的使用_第1页
jqueryui教程之dialog的使用_第2页
jqueryui教程之dialog的使用_第3页
jqueryui教程之dialog的使用_第4页
jqueryui教程之dialog的使用_第5页
资源描述:

《jqueryui教程之dialog的使用》由会员上传分享,免费在线阅读,更多相关内容在应用文档-天天文库

1、本人初学jqueryui,使用php语言,以下是学习的过程,希望与大家共同进步。jQueryUI目前的版本已经更新到了1.9.2。在此将一些jQueryUI组件的用法说明一下,方便日后查阅。同时也方便没接触jQueryUI的人能早日使用jQueryUI套件。本文用的jqueryui组件是在http://jqueryui.com下载,进入网站后点击下图红框圈起的“theme”连接,在此页面可以选择主题预览,从而选择您要下载的jqueryui的主题样式。主题预览可以点击下图右侧的中的红框圈出的“Gallery”,然后点击其下的主题样式,就

2、可以在页面右侧看到相应的主题样式,选择一个您喜欢的样式,点击“Download”按钮按要求操作就可下载到你想要的jqueryui组件了。下载后将jquryui组件像平时使用的js文件一样放到js文件夹下即可(此处我下载的是第一个UIlightness样式,并将解压后的文件夹更名为jquery-ui文件夹了)。一、首先来说jQueryUI使用频率较高dialog组件:dialog就是我们常说的弹出层,应用还是比较广泛的,比如:可以使用弹出层做登录、注册和消息提示等功能。下面来详细说说dialog的使用方法。在官方提供的官方文档和示例中有

3、六种形式的dialog,但是前五种都是大同小异,包括在编写代码方面也仅仅是多设置两个属性而已,没什么太大的不同,先来看看使用jQueryUI组件的时候需要那些前期贮备工作。首先将需要依赖的js文件导入到你的页面中。需要依赖的文件如下:jquery-ui-1.9.2.custom.css(位于jquery-ui-1.9.2/css/smoothness下)这个是jQueryUI套件的CSS样式表,demos.css(位于jquery-ui-1.9.2/development-bundle/demos下)这个是jQueryUIdemo中用

4、到的CSS样式,因为本例中用到了这些样式所以将它导入进来,如果大家不需要可以不导这个文件,导入jquery核心文件jquery-1.8.3.min.js,没有它一切工作都无法开展。切记一点:一定要在引入其他的js文件之前引入jquery-1.8.3.min.js文件。jquery-ui-1.9.2.custom.min.js这个是jQueryUI的核心js文件,也是必须的。有了上述的引用后就可以在你的页面中使用jQueryUI了。先看一个超级简单的DEMO:

5、是一个采用默认样式的对话框

在页面中加入上边的一行代码,然后加入一个script标签对,在脚本写如下代码:$(function(){      $("#dialog").dialog();});打开你的页面看一下吧,如果没什么意外你会看到一个类似这样的对话框这就是一个弹出层,其中div的title被当作了dialog的title,右上角有关闭的按钮“x”,右下角则可以拖拽改变大小。这就是一个默认的dialog,虽然我们没有为它指定高度和宽度,但是它有默认的值,在我们没有设定情况下dialog默认会弹出在屏幕的中央,大

6、小也是有默认值的,可以改变大小,显示关闭按钮,这都是默认的样式,那么如果我们想自己定制一下dialog,不想让他这样显示该如何做?下面介绍一些属性和方法来改变一下这个dialog,用到的属性如下:autoOpen,modal,buttons,根据这些属性我们来定制一个不会自动打开(当点击按钮或者通过其他的事件来触发弹出dialog的事件),并且带有遮罩(模式窗体)和按钮的dialog。buttons属性是一个复合属性,使用形式如下:buttons:{ok:function(){点击按钮执行的事件},cancel:function(){

7、点击按钮执行的事件}}其中ok是按钮显示的文本,而function是点击按钮后执行的事件。注意,在ok和function之间有冒号(“:”),虽然按钮可以为中文,比如:确定:function(){}这种形式,但是切记,在按钮文本和function之间的冒号一定是英文字符下的冒号,不要写成中文的全角冒号,否则会有错误。在html页面输入下列代码:

8、dset>username:
password:

当前文档最多预览五页,下载文档查看全文

此文档下载收益归作者所有

当前文档最多预览五页,下载文档查看全文
温馨提示:
1. 部分包含数学公式或PPT动画的文件,查看预览时可能会显示错乱或异常,文件下载后无此问题,请放心下载。
2. 本文档由用户上传,版权归属用户,天天文库负责整理代发布。如果您对本文档版权有争议请及时联系客服。
3. 下载前请仔细阅读文档内容,确认文档内容符合您的需求后进行下载,若出现内容与标题不符可向本站投诉处理。
4. 下载文档时可能由于网络波动等原因无法下载或下载错误,付费完成后未能成功下载的用户请联系客服处理。
相关标签