jQuery UI dialog 參数说明
前段时间碰到个问题 jquery UI dialog弹出层 弹出多个层是 比方弹出两个层A和B B层假设显示的数据表格太大,伸到了A层的外面,那伸到A层之外的部分就看不到了,由于B层是在A层上弹出的 B的大小受到A层大小的限制
于是找到了这个资料 保存下来
-----------------------------------------------------------------------------------------------------
初始化參数
对于 dialog 来说,首先须要进行初始化,在调用 dialog 函数的时候,假设没有传递參数,或者传递了一个对象,那么就表示在初始化一个对话框。
没有參数,表示依照默认的设置初始化对话框,在当前最新版本号的 jQuery UI 1.8.9 中, dialog 支持下列属性。
autoOpen 初始化之后,是否马上显示对话框,默觉得 true
modal 是否模式对话框,默觉得 false
closeOnEscape 当用户按 Esc 键之后,是否应该关闭对话框,默觉得 true
draggable 是否同意拖动,默觉得 true
resizable 能否够调整对话框的大小,默觉得 true
title 对话框的标题,能够是 html 串,比如一个超级链接。
position 用来设置对话框的位置,有三种设置方法
1. 一个字符串,同意的值为 'center', 'left', 'right', 'top', 'bottom'. 此属性的默认值即为 'center',表示对话框居中。
2. 一个数组,包括两个以像素为单位的位置,比如,
var dialogOpts = {
position: [, ]
};
3. 一个字符串组成的数组,比如, ['right','top'],表示对话框将会位于窗体的右上角。
var dialogOpts = {
position: ["left", "bottom"]
};
一组关于尺寸的属性,以像素为单位。
width 宽度, 默认 300
height 高度,默认 'auto'
minWidth 最小宽度,默认 150
minHeight 最小高度,默认 150
maxWidth 最大宽度
maxHeight 最大高度
还有关于关闭的效果
hide 当对话框关闭时的效果,默觉得 null, 比如, hide: 'slide'
show 当对话框打开时的效果。默觉得 null
堆叠
stack 对话框是否叠在其它对话框之上。默觉得 true
zIndex 对话框的 z-index 值,一个整数,越大越在上面。默认 1000
button
buttons 一个对象,属性名将会被作为button的提示文字,属性值为一个函数,即button的处理函数。
var dialogOpts = {
buttons: {
"Ok": function() { } ,
"Cancel": function() {}
}
}
$("#myDialog").dialog(dialogOpts);
IE6 的 select 元素穿透问题
bgiframe 解决 IE6 的 select 元素穿透问题,通过添加一个 iframe 来解决。默觉得 true
这一功能须要使用脚本 jquery.bgiframe-2.1.2,脚本在 jQuery UI 压缩包中 development-bundle/external 目录中,须要将这个文件增加到页面中。
<script src="../jquery-1.4.4.js"></script>
<script src="../external/jquery.bgiframe-2.1.2.js"></script>
<script src="../ui/jquery.ui.core.js"></script>
这个控件如今有一个bug,在弹出窗体有遮罩层的情况下,在chrome下,假设出现纵向滚动栏,无法用鼠标拖动,仅仅能使用滚轮。
上边的说明来自 王洋
设置前
设置后
演示样例
$("#dialog").dialog({
bgiframe: true,
resizable: false,
height:,
modal: true,
overlay: {
backgroundColor: '#000',
opacity: 0.5
},
buttons: {
'Delete all items in recycle bin': function() {
$(this).dialog('close');
},
Cancel: function() {
$(this).dialog('close');
}
}
});
效果例如以下。
对话框的方法
初始化之后,就能够使用对话框了,比方说打开对话框,关闭对话框,这须要通过对话框的方法来完毕。
对话框的方法须要通过调用 dialog 函数,并传递字符串形式的方法来完毕。比如,dialog( "open" ) 表示调用对话框的 open 方法。
open 打开对话框,须要注意的是,并没有 open() 方法,而是通过 dialog( "open" ) 来调用。比如, .dialog( "open" )
close 关闭对话框
$(this).dialog('close');
destroy 摧毁一个对话框,去除对话框功能,将元素还原为初始化之前的状态。
isOpen 检查对话框的状态,假设已经打开,返回 true.
moveToTop 将对话框移到对话框的顶端
option 设置或者读取对话框某个属性的值,有两种使用方法。
假设第二个參数为字符串,假设提供了三个參数,表示设置,假设两个參数,表示读取。 比如 .dialog( "option" , optionName , [value] )
假设第二个參数为对象,表示一次性设置多个属性。
enable 启用对话框
disable 禁用对话框
对话框的事件
在对话框使用过程中,还将触发多种事件,我们能够自己定义事件处理函数进行响应。
create
open
focus
dragStart
drag
dragStop
resizeStart
resize
resizeStop
beforeClose
close
比如,以下的设置了 open,close,beforeClose 的事件处理,显示窗体的状态。
var dialogOpts = {
open: function() {
$("#status").find(".ui-widget-content").text("The dialog is open");
},
close: function() {
$("#status").find(".ui-widget-content").text("The dialog is closed");
},
beforeclose: function() {
if (parseInt($(".ui-dialog").css("width")) == ||
parseInt($(".ui-dialog").css("height")) == ) {
return false
}
}
};
$("#myDialog").dialog(dialogOpts);
效果例如以下
对话框使用常见问题
常见的问题就是多次初始化一个对话框。
对话框只须要初始化一次,多次初始化会有问题。
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常用的参数有: 1.autoOpen:默认true,即dialog方法创建就显示对话框 2.buttons:默认无,用于设置显示的按钮,可以是JSON和Array形式: ...
- jQuery UI dialog 参数说明
前段时间碰到个问题 jquery UI dialog弹出层 弹出多个层是 比如弹出两个层A和B B层如果显示的数据表格太大,伸到了A层的外面,那伸到A层之外的部分就看不到了,因为B层是在A层上弹出的 ...
- 【Jquery】jQuery获取URL參数的两种方法
jQuery获取URL參数的关键是获取到URL,然后对URL进行过滤处理,取出參数. location.href是取得URL.location.search是取得URL"?"之后的 ...
- JQuery UI dialog 弹窗实例及参数说明
按钮代码: <a id="suprise" style="margin-left: 0.5em;cursor:pointer;">点我会有惊喜< ...
- jQuery UI dialog
初始化参数 对于 dialog 来说,首先需要进行初始化,在调用 dialog 函数的时候,如果没有传递参数,或者传递了一个对象,那么就表示在初始化一个对话框. 没有参数,表示按照默认的设置初始化对话 ...
随机推荐
- SDUT 2498-AOE网上的关键路径(spfa+字典序路径)
AOE网上的关键路径 Time Limit: 1000ms Memory limit: 65536K 有疑问?点这里^_^ 题目描写叙述 一个无环的有向图称为无环图(Directed Acycl ...
- HDU 别easy在一系列的
别easy在一系列的 Time Limit : 2000/1000ms (Java/Other) Memory Limit : 65536/32768K (Java/Other) Total Su ...
- RESTful架构详解(转)
1. 什么是REST REST全称是Representational State Transfer,中文意思是表述(编者注:通常译为表征)性状态转移. 它首次出现在2000年Roy Fielding的 ...
- 装双系统(win7/win8/ubuntu)问题总结
1.假设你要安装双系统,装系统是最好安装winows,然后再装ubuntu,因此,不解决它自己入选,我一般装ubuntu时刻.第一分区删除.然后用U硬盘直接安装ubuntu.在这一刻ubuntu将投入 ...
- 解析grant connect, resource to user语句
今天同事问了一个问题:"创建用户分配的权限是:grant connect,resource to user;,可是建立view的时候失败了,错误是权限不够,后来我给这个用户分配了创建view ...
- tomcat内存溢出,改动设置
问题描写叙述: 1. java.lang.OutOfMemoryError: Java heap space JVM堆的设置是指java程序执行过程中JVM能够调配使用的内存空间的设置.JVM在启动的 ...
- Jplayer小样
最近应公司要求需要一个MP3播放的插件,网上找了很多插件,看来看去还是jPlayer用着最舒服也最容易扩展.所以就找了个资料研究了下,简单做了个小DEMO.支持实时控制列表,常见的播放器功能. jPl ...
- android app启动过程(转)
Native进程的运行过程 一般程序的启动步骤,可以用下图描述.程序由内核加载分析,使用linker链接需要的共享库,然后从c运行库的入口开始执行. 通常,native进程是由shell或者init启 ...
- (大数据工程师学习路径)第三步 Git Community Book----中级技能(下)
一.追踪分支 1.追踪分支 在Git中‘追踪分支’是用于联系本地分支和远程分支的. 如果你在’追踪分支'(Tracking Branches)上执行推送(push)或拉取(pull)时,它会自动推送( ...
- web富客户端应用下,前端架构、系列(二)。
序 我们在上面的文章中已经建立起来一个比较简单的 前端架构 虽然这个看上去很简陋. 不过毕竟也是思想的结晶. 从这一篇文章开始,我将陆续完善这一个前端架构.. 重新构思 上一篇我们把前端架构分为3个模 ...