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

最新推荐文章于 2021-08-05 12:54:53 发布

土豆侠

最新推荐文章于 2021-08-05 12:54:53 发布

阅读量1.2k

点赞数

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

jQuery 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

继续对话框dialog的第一部分

三、对话框的事件

注意：有些事件之间是相互排斥的，想测试那个，可以把其他的注释掉，效果明显，避免事件间相互触发

create 对话框创建的时候触发的事件

open 打开对话框后触发的事件

close 关闭对话框后出发的事件

beforClose 关闭对话框前出发的事件（函数）

fouce 这一事件被出发时，对话框获取焦点

dragStart 此事件在对话款被触发时开始执行

drag 这一事件被调用是，对话框拖动

dragStop此事件后对话框被调用

resizeStart 此事件在对话框被缩放开始的的时候触发

resize 此事件在对话框调整过程中被触发

resizeStop 此事件在对话框被调整结束时触发

<!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();
    


var dialogOpts = {
     open: function() {
             $("#mydialog").text("The dialog is open");
         },
     close: function() {
             $("#mydialog").text("The dialog is closed");
         },
     beforeClose: function() {
            alert('关闭对话框前执行的操作，对话框马上关闭了');
        },
    drag:function(){
        var i=1;
        adTime = setInterval(function(){
            $("#status").html(i);
            i++;
        },1000);
    },
    create:function(){
        $("#status").html('对话框创建了');
    
    },
    resizeStart:function(){
        alert('对话框大小调整开始了！');
    
    },
    resizeStop:function(){
        alert('对话框大小调整结束了');
    },
    resize:function(){
        var j=1;
        adTime = setInterval(function(){
            $("#status2").html(j);
            j++;
        },1000);
    
    },
   /* focus:function(){//注意此方法容易和其他的方法产生冲突，而出现死循环，实验室注意，我暂时注释掉
        alert('对话框获取焦点了');
        return false;
    }*/

};

$("#dialog").dialog(dialogOpts);

});

function TTT(){
    $("#dialog").dialog(
    {autoOpen:false,
          modal:false,
          closeOnEscape:true,
          draggable:true,
          resizable:true,
          title:'dialog测试',
          position:[200,200],
          show:'explode',
          buttons:{
              "OK":function(){
                $(this).dialog('close');
              },
              "Cancel":function(){
                $(this).dialog('close')
              }
          }
      });
  }


 function change(){
    var status =  $("#dialog").dialog('isOpen');
    if(status){
       $("#dialog").dialog('close');
        }else{
        $("#dialog").dialog('open');
    }
}

function destroydia(){
    $("#dialog").dialog('destroy');

}



</script>
</head>
<body style="font-size:62.5%;">
  
    <div id="dialog" title="Dialog Title" >I'm in a dialogI'm in a dialogI'm in a dialogI'm in a dialogI'm in a dialogI'm in a dialogI'm in a dialogI'm in a dialogI'm in a dialogI'm in a dialogI'm in a dialogI'm in a dialogI'm in a dialogI'm in a dialog
    </div>
    <div><input type="button" value="更改对话框的状态" οnclick="change()"/></div>
    <div><input type="button" value="销毁对话框" οnclick="destroydia()"/></div>
    <div><input type="button" value="创建对话框" οnclick="TTT()"/></div>
    <div id="mydialog">显示对话框的状态</div>
    <div id="status">0</div>
    <div id="status2">0</div>

</body>
</html>