dialog的使用主要包含三方面的内容
一、对话框属性
autoOpen 对话框是否显示,默认显示 ture,否则 false
modal 是否模式化对话框,即是否锁住背景 默认false(不锁)
closeOnEscape 是否按esc退出 默认true,即退出
draggable是否允许拖动 默认true 即允许拖动
resizable 是否可以调整对话框的大小,默认为true
title 对话框的标题,可以是一个html串,比如一个超链接;也可以是一个字符串
position 用来设置对话框的位置,有三种方法
1字符串:center,left,right,top,bottom 例如 position:’center’
2数组包含两个像素的单位位置 positon:[100,100] 相对于左侧和顶部的距离
3字符串数组 postion:[‘left’,’center’]
hide 对话框关闭时的效果,取值可以为explode,slide;是否还可以取其他值没查到
show 对话框打开时的效果 ,取值可以为explode,slide;是否还可以取其他值没查到
stack 对话框是否在叠在其他对话框之上 默认true
zIndex 对话框z-index值 一个整数 越大越靠上
buttons 一个对象,
buttons:{
“OK”:function(){},//想当于确定按钮,点击确定按钮执行function操作
“Cancel”:function(){}//相当于取消按钮,点击确定按钮执行function操作
}
一组尺寸属性:
width 宽度 默认300
height 高度默认 ‘auto’
minWidth 最小高度,默认150
minHeight 最小高度,默认150
maxWight 最大宽度
maxHeight 最大高度
二、对话框的方法
close关闭对话框,例如$(this).dialog(‘close’);
destroy 删除对话框功能,并将元素还原到初始化状态。$(‘#dialog’).dialog(‘destory’)
isOpen 检查对话框的状态,如果打开返回true,var status =$(‘#dialog’).dialog(‘isOpen’);
moveToTop 移动对话框到对话框的顶部 $(“#dialog”).dialog(‘moveToTop’)
open 打开对话框
enable 启动对话框
disable 禁用对话框
option 读取或者设置参数 $(“#dialog”).dialog(‘option’)读取所有的参数,返回的是个对象
$(“#dialog”).dialog(‘option’,’modal’)读取参数值,返回一个值
$(“#dialog”).dialog(‘option’,’modal’,true)设置参数
实例代码
<!DOCTYPE html>
<html>
<head>
<link href="./public/css/jquery-ui-1.9.2.custom.css" rel="stylesheet" type="text/css"/>
<script src="./public/js/jquery-1.8.3.js"></script>
<script src="./public/js/jquery-ui-1.9.2.custom.js"></script>
<script>
$(document).ready(function() {
TTT();
});
function TTT(){
$("#dialog").dialog(
{autoOpen:true,
modal:false,
closeOnEscape:true,
draggable:true,
resizable:false,
title:'dialog测试',
position:[200,200],
show:'explode',
closeText:'hide',
buttons:{
"OK":function(){
$(this).dialog('close');
},
"Cancel":function(){
alert('谢谢你的关注');
$(this).dialog('close')
}
}
});
}
function change(){
var status = $("#dialog").dialog('isOpen');
if(status){
$("#dialog").dialog('close');
}else{
$("#dialog").dialog('open');
}
}
function dis(){
$('#dialog').dialog('destroy')
}
function read(){
var ss = $("#dialog").dialog('option','show');
alert(ss);
}
</script>
</head>
<body sytle="font-size:62.5%;">
<div id="dialog" title="Dialog Title" >这里面的内容是将来显示在对话框中,可以是一个字符串,也可以是一段html代码</div>
<div><a href="javascript:void(0)" οnclick="change()">改变对华框的状态</a></div>
<div><a href="javascript:void(0)" οnclick="dis()" title="销毁对话框,不刷新页面对话框不能再使用">销毁对话框</a></div>
<div><a href="javascript:void(0)" οnclick="read()">读取参数</a></div>
</body>
</html>