Jquery中dialog属性小记


Posted in Javascript onSeptember 03, 2010
$('#dialogDiv').dialog( 
{ 
hide:true, //点击关闭是隐藏,如果不加这项,关闭弹窗后再点就会出错. 
autoOpen:false, 
height:380, 
width:800, 
modal:true, //蒙层(弹出会影响页面大小) 
title:'开标人', 
overlay: {opacity: 0.5, background: "black" ,overflow:'auto'}, 
buttons:{ 
'确定':function(){ 
// 处理方法 addUser(); 
}, 
'取消':function(){ 
//关闭当前Dialog 
$(this).dialog("close"); 
} 
} 
} 
); 
$('#addItems').click(function(){ 
loadPage('buildOpeningGroupAddOpering.htm','#dialogDiv'); //dialog记取页面 
//$(window.parent.document).find("#projectSpaceContent .show").height(600)//调整当前Iframe高度 
$('#dialogDiv').data('title.dialog', '新增开标人').dialog('open'); //修改标题 
return false; 
}) function loadPage(path,id) { 
$.get(path, function(data) { 
// data = data.replace(/<script.*>.*<\/script>/ig,""); //移除script 标签 
data = data.replace(/<\/?link.*>/ig,""); //移除 link 标签 
data = data.replace(/<\/?html.*>/ig,""); //移除 html 标签 
data = data.replace(/<\/?body.*>/ig,""); //移除 body 标签 
data = data.replace(/<\/?head.*>/ig,""); //移除 head 标签 
data = data.replace(/<\/?!doctype.*>/ig,""); //移除 doctype 标签 
data = data.replace(/<title.*>.*<\/title>/ig,""); //移除 title 标签 
$(id).empty().html(data);//清空contentMain内容并加载html 
}); 
} 
//为弹出层增加关闭按钮 
$('.ui-dialog-buttonpane').show().empty(); 
$('<button>关闭</button>').click(function(){ 
$("#dialogDiv").dialog('close'); 
return false; 
}).appendTo('.ui-dialog-buttonpane');

还是先看例子吧。另外如果要拖动、改变dialog的大小的话要加上ui.draggble.js和ui.resizable.js
<!DOCTYPE html> 
<html> 
<head> 
<link type="text/css" href="http://jqueryui.com/latest/themes/base/ui.all.css" rel="stylesheet" /> 
<script type="text/javascript" src="http://jqueryui.com/latest/jquery-1.3.2.js"></script> 
<script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.core.js"></script> 
<script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.dialog.js"></script> <script> 
$("#dialog").dialog({autoOpen:false,buttons:{"确定":function(){$(this).dialog("close");}},closeOnEscape:true,hide:"slide",modal:true,title:"对话 框"}).dialog("open"); 
</script> 
<div id="dialog" title="Dialog Title">你是个猪头!</div>

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' )

Javascript 相关文章推荐
在 IE 中调用 javascript 打开 Excel 表
Dec 21 Javascript
科讯商业版中用到的ajax空间与分页函数
Sep 02 Javascript
js选取多个或单个元素的实现代码(用class)
Aug 22 Javascript
使用JQuery快速实现Tab的AJAX动态载入(实例讲解)
Dec 11 Javascript
node.js中的http.response.addTrailers方法使用说明
Dec 14 Javascript
JavaScript随机生成信用卡卡号的方法
Apr 07 Javascript
详解用vue.js和laravel实现微信授权登陆
Jun 23 Javascript
vue实现样式之间的切换及vue动态样式的实现方法
Dec 19 Javascript
js运算符的一些特殊用法
Jul 29 Javascript
vue-router权限控制(简单方式)
Oct 29 Javascript
微信小程序局部刷新触发整页刷新效果的实现代码
Nov 21 Javascript
JavaScript实现网页tab栏效果制作
Nov 20 Javascript
javascript中使用css需要注意的地方小结
Sep 01 #Javascript
js截取函数(indexOf,join等)
Sep 01 #Javascript
qTip 基于JQuery的Tooltip插件[兼容性好]
Sep 01 #Javascript
jQuery选中select控件 无法设置selected的解决方法
Sep 01 #Javascript
JavaScript的类型转换(字符转数字 数字转字符)
Aug 30 #Javascript
De facto standard 世界上不可思议的事实标准
Aug 29 #Javascript
js 中 document.createEvent的用法
Aug 29 #Javascript
You might like
codeigniter自带数据库类使用方法说明
2014/03/25 PHP
php对文件进行hash运算的方法
2015/04/03 PHP
微信公众号开发之获取位置信息php代码
2018/06/13 PHP
javascript Array对象基础知识小结
2010/11/16 Javascript
JQuery中阻止事件冒泡几种方式及其区别介绍
2014/01/15 Javascript
js的2种继承方式详解
2014/03/04 Javascript
JavaScript中匿名函数用法实例
2015/03/23 Javascript
全国省市二级联动下拉菜单 js版
2016/05/10 Javascript
jquery自适应布局的简单实例
2016/05/28 Javascript
AngularJS使用拦截器实现的loading功能完整实例
2017/05/17 Javascript
jquery.param()实现数组或对象的序列化方法
2018/10/08 jQuery
微信小程序地图(map)组件点击(tap)获取经纬度的方法
2019/01/10 Javascript
Vue form表单动态添加组件实战案例
2019/09/02 Javascript
微信小程序 生成携带参数的二维码
2019/10/23 Javascript
jQuery+Ajax+js实现请求json格式数据并渲染到html页面操作示例
2020/06/02 jQuery
详解JavaScript 作用域
2020/07/14 Javascript
three.js 利用uv和ThreeBSP制作一个快递柜功能
2020/08/18 Javascript
动态创建类实例代码
2009/10/07 Python
python使用paramiko模块实现ssh远程登陆上传文件并执行
2014/01/27 Python
列举Python中吸引人的一些特性
2015/04/09 Python
用Python编写一个每天都在系统下新建一个文件夹的脚本
2015/05/04 Python
python简单实现计算过期时间的方法
2015/06/09 Python
Python中.py文件打包成exe可执行文件详解
2017/03/22 Python
Python+OpenCV目标跟踪实现基本的运动检测
2018/07/10 Python
Linux系统(CentOS)下python2.7.10安装
2018/09/26 Python
对Python3 * 和 ** 运算符详解
2019/02/16 Python
Python实现的读取文件内容并写入其他文件操作示例
2019/04/09 Python
Python对列表的操作知识点详解
2019/08/20 Python
Python基于execjs运行js过程解析
2020/11/27 Python
用Python自动清理系统垃圾的实现
2021/01/18 Python
浙江文明网签名寄语
2014/01/18 职场文书
委托书格式
2014/08/01 职场文书
初中班主任工作总结2015
2015/05/13 职场文书
2015年档案管理员工作总结
2015/05/13 职场文书
太行山上观后感
2015/06/05 职场文书
Golang标准库syscall详解(什么是系统调用)
2021/05/25 Golang