jQuery ui 翻译汇总之对话框（dialog）一

来源：互联网发布：epub drm 去除 mac 编辑：程序博客网时间：2024/05/08 09:28

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)" onclick="change()">改变对华框的状态</a></div>    <div><a href="javascript:void(0)" onclick="dis()" title="销毁对话框，不刷新页面对话框不能再使用">销毁对话框</a></div>    <div><a href="javascript:void(0)" onclick="read()">读取参数</a></div></body></html>