jQuery UI dialog 使用记录
1 属性
1.11 autoOpen ,这个属性为true的时候dialog被调用的时候自动打开dialog窗口。当属性为false的时候,一开始隐藏窗口,知道.dialog("open")的时候才弹出dialog窗口。默认为:true。
1.12 初始化例:请注意,$('.selector')是dialog 的类名,在本例中.selector=#dialoag,以后不再说明。
$('.selector').dialog({ autoOpen: false });
1.13 初始化后,得到和设置此属性例:
//获得
var autoOpen = $('.selector').dialog('option', 'autoOpen');
//设置
$('.selector').dialog('option', 'autoOpen', false);
1.21 bgiframe 默认为false ,When true, the bgiframe plugin will be used, to fix the issue in IE6 where select boxes show on top of other elements, regardless of zIndex. Requires including the bgiframe plugin. Future versions may not require a separate plugin.
在IE6下,让后面那个灰屏盖住select。
1.22 初始化例:
$('.selector').dialog({ bgiframe: true });
1.23 初始化后,得到和设置:
//获取
var bgiframe = $('.selector').dialog('option', 'bgiframe');
//设置
$('.selector').dialog('option', 'bgiframe', true);
1.31 buttons 显示一个按钮,并写上按钮的文本,设置按钮点击函数。默认为{},没有按钮。
最上面的例子中已经有buttons属性的用法,请注意。
1.32 初始化例:
$('.selector').dialog({ buttons: { "Ok": function() { $(this).dialog("close"); } } });
1.33 初始化后,得到和设置:
//获取
var buttons = $('.selector').dialog('option', 'buttons');
//设置
$('.selector').dialog('option', 'buttons', { "Ok": function() { $(this).dialog("close"); } });
1.41 closeOnEscape 为true的时候,点击键盘ESC键关闭dialog,默认为true;
1.42 初始化例:
$('.selector').dialog({ closeOnEscape: false });
1.43 初始化后,得到和设置:
//获取
var closeOnEscape = $('.selector').dialog('option', 'closeOnEscape');
//设置
$('.selector').dialog('option', 'closeOnEscape', false);
1.51 dialogClass 类型将被添加到dialog,默认为空
1.52 初始化例:
$('.selector').dialog({ dialogClass: 'alert' });
1.53 初始化后,得到和设置:
//获取
var dialogClass = $('.selector').dialog('option', 'dialogClass');
//设置
$('.selector').dialog('option', 'dialogClass', 'alert');
1.61 draggable、resizable : draggable是否可以使用标题头进行拖动,默认为true,可以拖动;resizable是否可以改变dialog的大小,默认为true,可以改变大小。
1.62 初始化例:
$('.selector').dialog({ draggable: false,resizable:false });
1.63 初始化后,得到和设置:
//获取
var draggable = $('.selector').dialog('option', 'draggable');
//设置
$('.selector').dialog('option', 'draggable', false);
1.71 width、height ,dialog的宽和高,默认为auto,自动。
1.72 初始化例:
$('.selector').dialog({ height: 530,width:200 });
1.73 初始化后,得到和设置:请参考1.63
1.81 maxWidth、maxHeight、minWidth、minHeight ,dialog可改变的最大宽度、最大高度、最小宽度、最小高度。maxWidth、maxHeight的默认为false,为不限。minWidth、minHeight的默认为150。要使用这些属性需要ui.resizable.js 的支持。
1.82 初始化例:
$('.selector').dialog({ maxHeight: 400,maxWidth:600,minHeight:300,minWidth:300 });
1.83 初始化后,得到和设置:请参考1.63
1.91 hide、show ,当dialog关闭和打开时候的效果。默认为null,无效果
1.92 初始化例:最上面的实例中用到,请自己看吧。
1.93 初始化后,得到和设置:请参考1.63
1.101 modal,是否使用模式窗口,模式窗口打开后,页面其他元素将不能点击,直到关闭模式窗口。默认为false不是模式窗口。
1.102 初始化例:$('.selector').dialog({ modal: true });
1.103 初始化后,得到和设置:请参考1.63
1.111 title,dialog的标题文字,默认为空。
1.112 初始化例:见最上面的实例。1.113 初始化后,得到和设置:请参考1.63
1.121 position ,dialog的显示位置:可以是'center', 'left', 'right', 'top', 'bottom',也可以是top和left的偏移量也可以是一个字符串数组例如['right','top']。
1.122 初始化例:$('.selector').dialog({ position: ['top','right'] }); 1.123 初始化后,得到和设置:请参考1.63
1.131 zIndex, dialog的zindex值,默认值为1000.
1.132 初始化例:$('.selector').dialog({ zIndex: 3999 }); 1.133 初始化后,得到和设置:请参考1.63
1.141 stack 默认值为true,当dialog获得焦点是,dialog将在最上面。
1.142 初始化例:$('.selector').dialog({ stack: false }); 1.143 初始化后,得到和设置:请参考1.63
2 事件
2.11 beforeclose 类型dialogbeforeclose , 当dialog尝试关闭的时候此事件将被触发,如果返回false,那么关闭将被阻止。
2.12 初始化例:$('.selector').dialog({
beforeclose: function(event, ui) { ... }
});
2.13 使用类型绑定此事件例:$('.selector').bind('dialogbeforeclose', function(event, ui) {
...
});
2.21 close 类型:dialogclose ,当dialog被关闭后触发此事件。
2.22 初始化例:$('.selector').dialog({
close: function(event, ui) { ... }
});
2.23 使用类型绑定此事件例:$('.selector').bind('dialogclose', function(event, ui) {
...
});
2.3 open 类型:dialogopen ,当dialog打开时触发。(篇幅有限,该省略的就省略了啊,初始化例和使用类型绑定事件可以向上参考。)
2.4 focus 类型:dialogfocus ,当dialog获得焦点时触发。
2.5 dragStart 类型:dragStart,当dialog拖动开始时触发。
2.6 drag 类型:drag ,当dialog被拖动时触发。
2.7 dragStop 类型:dragStop ,当dialog拖动完成时触发。
2.8 resizeStart 类型:resizeStart ,当dialog开始改变窗体大小时触发。
2.9 resize 类型:resize,当dialog被改变大小时触发。
2.10 resizeStop 类型:resizeStop,当改变完大小时触发。
3 方法
3.1 destroy ,我喜欢这个哦,摧毁地球。。。 例:.dialog( 'destroy' )
3.2 disable,dialog不可用,例:.dialog('disable');
3.3 enable,dialog可用,例,如3.2
3.4 close,open,关闭、打开dialog
3.5 option ,设置和获取dialog属性,例如:.dialog( 'option' , optionName , [value] ) ,如果没有value,将是获取。
3.6 isOpen ,如果dialog打开则返回true,例如:.dialog('isOpen')
3.7 moveToTop ,将dialog移到最上层,例如:.dialog( 'moveToTop' )
jQuery UI dialog 使用记录的更多相关文章
- 解决Select2控件不能在jQuery UI Dialog中不能搜索的bug
本文使用博客园Markdown编辑器进行编辑 1.问题呈现 项目中使用了jQuery UI的Dialog控件,一般用来处理需要提示用户输入或操作的简单页面.逻辑是修改一个广告的图片和标题. 效果截图如 ...
- [转]jQuery UI Dialog Modal Popup Yes No Confirm example in ASP.Net
本文转自:http://www.aspsnippets.com/Articles/jQuery-UI-Dialog-Modal-Popup-Yes-No-Confirm-example-in-ASPN ...
- API分析——Jquery UI Dialog
1.阅读API文档的一般方法? 通常地, API由三部分构成:属性.方法.事件. 属性表示参数配置,作为一个组件的微调,或者功能的开启与关闭: 方法表示组件能够发生的动作,或者组件的状态监测: 事件表 ...
- jQuery UI dialog 的使用
今天用到了客户端的对话框,把 jQuery UI 中的对话框学习了一下. 准备 jQuery 环境 首先,我们创建一个按钮,点击这个按钮的时候,将会弹出一个对话框. 1 <input type= ...
- jQuery UI dialog 參数说明
前段时间碰到个问题 jquery UI dialog弹出层 弹出多个层是 比方弹出两个层A和B B层假设显示的数据表格太大,伸到了A层的外面,那伸到A层之外的部分就看不到了,由于B层是在A层上弹出的 ...
- Jquery - UI - Dialog(转)
jQuery UI Dialog常用的参数有: 1.autoOpen:默认true,即dialog方法创建就显示对话框 2.buttons:默认无,用于设置显示的按钮,可以是JSON和Array形式: ...
- jQuery UI dialog 参数说明
前段时间碰到个问题 jquery UI dialog弹出层 弹出多个层是 比如弹出两个层A和B B层如果显示的数据表格太大,伸到了A层的外面,那伸到A层之外的部分就看不到了,因为B层是在A层上弹出的 ...
- JQuery UI dialog 弹窗实例及参数说明
按钮代码: <a id="suprise" style="margin-left: 0.5em;cursor:pointer;">点我会有惊喜< ...
- jQuery UI dialog
初始化参数 对于 dialog 来说,首先需要进行初始化,在调用 dialog 函数的时候,如果没有传递参数,或者传递了一个对象,那么就表示在初始化一个对话框. 没有参数,表示按照默认的设置初始化对话 ...
随机推荐
- SQL语句中order_by_、group_by_、having的用法区别
order by 从英文里理解就是行的排序方式,默认的为升序. order by 后面必须列出排序的字段名,可以是多个字段名. group by 从英文里理解就是分组.必须有“聚合函数”来配合才能使用 ...
- 蜗牛慢慢爬 LeetCode 19. Remove Nth Node From End of List [Difficulty: Medium]
题目 Given a linked list, remove the nth node from the end of list and return its head. For example, G ...
- 蜗牛慢慢爬 LeetCode 5.Longest Palindromic Substring [Difficulty: Medium]
题目 Given a string s, find the longest palindromic substring in s. You may assume that the maximum le ...
- ACM数论之旅11---浅谈指数与对数(长篇)(今天休息,不学太难的数论> 3<)
c/c++语言中,关于指数,对数的函数我也就知道那么多 exp(),pow(),sqrt(),log(),log10(), exp(x)就是计算e的x次方,sqrt(x)就是对x开根号 pow()函数 ...
- how to insert js to iframe page in order to disabled open new page/window
how to insert js to iframe page in order to disabled open new page/window js 禁用 iframe 中的页面打开新页面 htt ...
- hdu6438 Buy and Resell
多少年不写题了... (我把每一天看作是一个商品,第i天是第i个商品) 一开始看了半天看出来一个性质:买的所有商品中最贵的不会比卖的所有商品中最便宜的贵,然后似乎没有什么用处.... 所以最后还是看题 ...
- 使用简单zzupdate命令轻松升级Ubuntu到较新版本
zzupdate是一个开源的命令行实用程序,通过将几个更新命令组合到一个命令中,使得将Ubuntu桌面版和服务器版升级到更新版本的任务变得容易一些. 将Ubuntu系统升级到更新的版本并不是一项艰巨的 ...
- PE文件解析 基础篇
PE文件解析 基础篇 来源 https://bbs.pediy.com/thread-247114.htm 前言 之前学习了PE格式,为了更好的理解,决定写一个类似LoadPE的小工具. 编译器是VS ...
- 【BZOJ1011】遥远的行星(???)
题面 BZOJ 洛谷 题解 大概就是分个块,然后每块取平均数算贡献啥的. BZOJ上过不去??? #include<iostream> #include<cstdio> usi ...
- 【hdu3555】 Bomb
http://acm.hdu.edu.cn/showproblem.php?pid=3555 (题目链接) 题意 求区间${[1,n]}$含有49的数的个数. Solution 数位dp,先求出不含4 ...