前面一章已經對datepicker的使用，做了簡單的說明。這一章主要對dialog如何使用做個說明。
jquery ui-dialog在web開發中運用還是比較多的。最常見的例子就是登錄功能的實現。運用dialog的好處就是不用刷新網頁，直接彈出一個div層，讓用戶輸入信息。使用起來也比較方便。下面就學學如何使用它吧。
前提條件
- 導入jquery-1.7.2.js ，也可以是其它版本。
- 導入jquery-ui.js，也可以直接指向http://code.jquery.com/ui/1.10.2/jquery-ui.js 這個地址。前提是要有網絡。
- 導入jquery-ui.css，樣式表也可以自定義。
如何使用
最簡單的實現在jquery的ready方法里面配置一個dialog對話框即可。如：
|
1
|
$(
"#dialogDiv"
).dialog();
|
但是這個並不能滿足我們的要求，所以我們有必要了解它的常用屬性和方法。這是我demo中的配置。如下:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
$(
"#dialogDiv"
).dialog({
autoOpen :
false
,
// 是否自動彈出窗口
modal :
true
,
// 設置為模態對話框
resizable :
true
,
width : 410,
//彈出框寬度
height : 240,
//彈出框高度
title :
"用戶登錄"
,
//彈出框標題
position :
"center"
,
//窗口顯示的位置
buttons:{
'確定'
:
function
(){
//調用登錄的方法
},
'取消'
:
function
(){
$(
this
).dialog(
"close"
);
}
}
});
|
注:
”dialogDiv”表示元素的id。
常用屬性
- autoOpen：這個屬性為true的時候dialog被調用的時候自動打開dialog窗口。當屬性為false的時候，一開始隱藏窗口，調用dialog(“open”)的時候才彈出dialog窗口。默認為：true。
- position：dialog的顯示位置：可以是’center’, ‘left’, ‘right’, ‘top’, ‘bottom’,也可以是top和left的偏移量也可以是一個字符串數組例如['right','top']。
- title：dialog的標題，默認為空。
- modal：是否使用模式窗口，模式窗口打開后，頁面其他元素將不能點擊，直到關閉模式窗口。默認為false不是模式窗口。
- closeOnEscape： 為true的時候，點擊鍵盤ESC鍵關閉dialog，默認為true。
- draggable：draggable是否可以使用標題頭進行拖動，默認為true，可以拖動。
- resizable：resizable是否可以改變dialog的大小，默認為true，可以改變大小。
常用方法
- open：打開dialog，一句話$(“#id”).dialog(“open”)。
- close：關閉dialog，一句話 $(“#id”).dialog(“close”)。
- disable：設置dialog不可用。
- enable： 設置dialog可用。
- isOpen： 判斷dialog是否為打開狀態，如果處於打開狀態，返回true。
- destroy： 銷毀dialog。
- moveToTop：將dialog移到最上層。
- option：用於設置和取出dialog的值，比如我們為dialog設置標題，代碼：$(“#dialogDiv”).dialog(“option”, “title”, “登錄”)
看看我的demo吧，只是簡單的調用了open方法。其它方法自己可以試試，更多的屬性和方法請到官網去看看API，地址：
http://api.jqueryui.com/dialog/ 。這是我的登錄頁面。調用方法：
|
1
|
$(
"#dialogDiv"
).dialog(
"open"
);
|
效果如圖:
這是頁面的代碼，如下：
|
1
2
3
4
5
|
<input type=
"button"
id=
"login"
value=
"點擊登錄"
/>
<div id=
"dialogDiv"
style=
"text-align: center;padding-top: 24px"
>
<label>帳號:</label><input type=
"text"
id=
"user"
/><br>
<label>密碼:</label><input type=
"password"
id=
"password"
/><br>
</div>
|
頁面很干凈吧，樣式可以自己定的。dialog使用簡單方便，推薦大家使用。
原創文章，轉載請注明： 轉載自java開發者
本文鏈接地址: jquery dialog-優雅的彈出框