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

最新推荐文章于 2024-05-20 13:34:34 发布

土豆侠

最新推荐文章于 2024-05-20 13:34:34 发布

阅读量861

点赞数

分类专栏： jQuery 文章标签： html jquery ui 对话框 dialog jquery

jQuery 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

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>

土豆侠

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery ui 翻译汇总之对话框（dialog）一

dialog的使用主要包含三方面的内容一、对话框属性autoOpen 对话框是否显示，默认显示 ture，否则 falsemodal 是否模式化对话框，即是否锁住背景默认false（不锁）closeOnEscape 是否按esc退出默认true，即退出draggable是否允许拖动默认true 即允许拖动resizable 是否可以调整对话框的大小，默认为true
复制链接

扫一扫