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

来源：互联网发布：淘宝上怎么买高仿的包编辑：程序博客网时间：2024/05/20 04:28

继续对话框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="更改对话框的状态" onclick="change()"/></div>    <div><input type="button" value="销毁对话框" onclick="destroydia()"/></div>    <div><input type="button" value="创建对话框" onclick="TTT()"/></div>    <div id="mydialog">显示对话框的状态</div>    <div id="status">0</div>    <div id="status2">0</div></body></html>