1 / 15
文档名称:

jQuery UI全教程之一(dialog的使用教程).docx

格式:docx   大小:86KB   页数:15页
下载后只包含 1 个 DOCX 格式的文档,没有任何的图纸或源代码,查看文件列表

如果您已付费下载过本站文档,您可以点这里二次下载

分享

预览

jQuery UI全教程之一(dialog的使用教程).docx

上传人:小枷 2019/3/6 文件大小:86 KB

下载得到文件列表

jQuery UI全教程之一(dialog的使用教程).docx

相关文档

文档介绍

文档介绍:。个人感觉和easyui相比起来,jQueryUI在界面的美观程度和可定制型更强一些。所以再次将一些jQueryUI组件的用法说明一下,方便日后查阅。也方面没接触jQueryUI的人能早日使用jQueryUI套件(一)首先来说jQueryUI使用频率较高dialog组件:dialog就是我们常说的弹出层,应用还是比较广泛的,比如:可以使用弹出层做登录、注册和消息提示等功能下面来详细说说dialog的使用方法在官方提供的官方文档和示例中有六种形式的dialog,但是前五种都是大同小异,包括在编写代码方面也仅仅是多设置两个属性而已,没什么太大的不同,先来看看使用jQueryUI组件的时候需要那些前期贮备工作。首先将需要依赖的js文件导入到你的页面中。需要依赖的文件如下:jquery-ui-,,因为我用到了这些样式所以将它导入进来,如果大家不需要可以不导这个文件,jquery-,jQuery的核心文件,没有它一切工作都无法开展。切记一点:一定要在引入其他的js文件之前引入jquery-,别问为什么,懂点jQuery的人都能想的到。jquery-ui-,也是必须的。有了上述的引用后就可以在你的页面中使用jQueryUI了。先看一个超级简单的DEMO:<divid="dialog"title="basicdialog"><p>这是一个采用默认样式的对话框</p></div>在页面中加入上边的一行代码,然后加入一个script标签对,在脚本写如下代码:$(function(){      $("#dialog").dialog();});打开你的页面看一下吧,如果没什么意外你会看到一个类似这样的对话框简单吧,这就是一个弹出层,其中div的title被当作了dialog的title,右上角有关闭的xx,右下角则可以拖拽改变大小这就是一个默认的dialog,虽然我们没有为它指定高度和宽度,但是它有默认的值,在我们没有设定情况下dialog默认会弹出在屏幕的中央,大小也是有默认值的,可以改变大小,显示关闭按钮,这都是默认的样式,那么如果我们想自己定制一下dialog,不想让他这样显示该如何做?下面介绍一些属性和方法来改变一下这个dialog,用到的属性如下:autoOpen,modal,buttons,根据这些属性我们来定制一个不会自动打开(当点击按钮或者通过其他的事件来触发弹出dialog的事件),并且带有遮罩(模式窗体)和按钮的dialogbuttons属性是一个复合属性,使用形式如下:buttons{ok:function(){点击按钮执行的事件},cancel:function(){点击按钮执行的事件}}其中ok是按钮显示的文本,而function是点击按钮后执行的事件。注意,在ok和function之间有冒号:,虽然按钮可以为中文,比如:确定:function(){}这种形式,但是切记,在按钮文本和function之间的冒号一定是英文字符下的冒号,不要写成中文的全角冒号,否则会有错误。将刚才的js脚本替换为:$("#dialog-form").dialog({       autoOpen:false,        modal:true,       buttons:{              登录:function(){                     alert("您点击了登录按钮");              }       }})//控制打开dialog的方法functionopen_dialog(){       $("#dialog-form").dialog("open");}这里的dialog将带有一个登录按钮。并且为带遮罩的模式窗体。默认不显示。所以我们需要在页面添加一个按钮,通过点击按钮来控制打开dialog<inputtype="button"value="打开"onclick="open_dialog();"/>:可能有的人会说为什么这个显示的颜色和样式都第一个不一样呢?因为jQueryUI组件的皮肤都是可定制的,而不是一尘不变。可以根据需要选择自己喜欢的皮肤样式来使用,在jQueryUI的官方网站上有UI皮肤下载的,可以先预览皮肤的效果再下载,下载后只需要将当前项目中的CSS文件即可实现切换皮肤那么在dia