<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>jQuery對話框</title>
<link rel="stylesheet"
href="${pageContext.request.contextPath}/jquery-ui-1.9.2/themes/base/jquery.ui.all.css">
<script type="text/javascript"
src="${pageContext.request.contextPath}/jquery-ui-1.9.2/jquery-1.8.3.js"></script>
<script type="text/javascript"
src="${pageContext.request.contextPath}/jquery-ui-1.9.2/ui/jquery-ui.js"></script>
<script type="text/javascript">
$.fx.speeds._default = 500; //動畫時間
$(function() {
$("#dialog").dialog({
draggable : true, //是否允許拖動
resizable : false, //是否允許改變對話框大小
autoOpen : false, //自動打開對話框
title : '標題', //設置窗口標題
width : 300,
height : 200,
show : "explode", //顯示方式
hide : "explode", //隱藏方式
closeOnEscape : true, //按ESC是否退出
modal : true, //模式窗口
position : 'center', //窗口位置，可以爲座標[100,100]
buttons : {
"關閉按鈕" : function() {
$(this).dialog("close");
},
"第二個按鈕" : function() {
$(this).dialog("close");
}
},
//打開窗口時觸發
open : function() {
alert("open...");
},
//拖動前觸發
dragStart : function() {
alert("dragStart...");
},
//窗口關閉後觸發
close : function() {
alert("close...");
},
//這個事件在dialog試圖關閉時觸發. 如果回調函數返回false,關閉將停止
beforeClose : function() {
alert("beforeClose...");
//return false;
}
});
$("#opener").click(function() {
$("#dialog").dialog("open");
});
});
</script>
</head>
<body>
<div id="dialog">對話框的內容</div>
<button id="opener">打開對話框</button>
</body>
</html>常用屬性
- 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”, “登錄”)