Jquery ui彈框筆記
阿新 • • 發佈：2018-11-03
jquery ui 彈框還是比較豐富的，提前準備好彈窗內容標籤。呼叫dialog()方法，傳遞相關引數即可，接下來將作相關的介紹。
內容標籤準備
對話方塊使用div標籤包裹彈框內容，這個是常用的，在div上加上title屬性將在彈出對話方塊的頭部進行顯示，不加頭部顯示空白。
簡單示例：
<body> <button>彈出對話方塊</button> <div id="dialog" title="基本對話方塊" style="display: none"> <p>這是一個預設的對話方塊</p> </div> <script type="text/javascript"> $("button").button().click(function(){ $("#dialog").dialog(); }); </script> </body>
彈出的對話方塊預設是可以改變視窗大小，而且帶一個X關閉按鈕，並且可以拖動。
增加彈出及關閉的效果。
$("button").button().click(function(){
$("#dialog").dialog({
show : {
effect : "blind",
duration : 1000
},
hide : {
effect : "explode",
duration : 1000
}
});
});
Jquery ui 目前實現的效果有：blind,explode,highlight,size,scale,puff,pulsate,shake,slide,bounce,clip,drop,fade,fold
帶按鈕的彈窗示例：
帶按鈕，檢視原始碼，只需要傳遞一個buttons陣列即可。陣列中text為顯示的文字，click為點選的觸發事件。
$("#dialog").dialog({
buttons : [
{
text : "確定",
click : function(){
alert("點選了確定按鈕");
}
},
{
text : "取消",
click : function(){
alert("點選了取消按鈕");
}
}
]
});
對應的原始碼
看過原始碼之後，想展示帶圖示按鈕，想必你已經知道怎麼弄了吧。
無參的dialog()預設生成的最小高度min-height:87px，並且height自動根據內容適應。
上面的最小高度在原始碼上是150px，原始碼上可以看到好多預設值，如autoOpen自動開啟，預設是不帶button的，buttons:[]，預設可拖放，draggable:true,預設可調大小resizable: true。附原始碼配置：
options: {
appendTo: "body",
autoOpen: true,
buttons: [],
classes: {
"ui-dialog": "ui-corner-all",
"ui-dialog-titlebar": "ui-corner-all"
},
closeOnEscape: true,
closeText: "Close",
draggable: true,
hide: null,
height: "auto",
maxHeight: null,
maxWidth: null,
minHeight: 150,
minWidth: 150,
modal: false,
position: {
my: "center",
at: "center",
of: window,
collision: "fit",
// Ensure the titlebar is always visible
using: function( pos ) {
var topOffset = $( this ).css( pos ).offset().top;
if ( topOffset < 0 ) {
$( this ).css( "top", pos.top - topOffset );
}
}
},
resizable: true,
show: null,
title: null,
width: 300,
// Callbacks
beforeClose: null,
close: null,
drag: null,
dragStart: null,
dragStop: null,
focus: null,
open: null,
resize: null,
resizeStart: null,
resizeStop: null
}
我們可以傳遞height改變視窗的高度，width改變視窗的寬度，modal：true則為模態框（具有遮罩的效果）
手工關閉彈窗，呼叫dialog(“close”)方法。
$("#dialog").dialog({
buttons : [
{
text : "關閉",
click : function(e){
console.log(e);
$("#dialog").dialog("close");
}
}
]
});
其中點選事件裡e,返回的是一個jQuery.Event物件。
也支援簡單的寫法，不用傳遞一個數組。
$("#dialog").dialog({
buttons : {
確定 : function(){
$(this).dialog("close");
}
}
});