本篇文章主要是對JQUERY中dialog的用法進行了詳細的分析介紹,需要的朋友可以過來參考下,希望對大家有所幫助
今天用到了用戶端的對話框,把 jQuery UI 中的對話框學習了一下。
準備 jQuery 環境
首先,我們建立一個按鈕,點選這個按鈕的時候,将會彈出一個對話框。
<input type="button" value="删除" id="btn" />
為了設定這個按鈕點選的事件,需要準備 jQuery 的環境。
<script type="text/javascript" src="scripts/jquery-1.4.2.js"></script>
在 ready 中設定按鈕的點選事件。
複制代碼 代碼如下:
$(function() {
// 初始化
$("#btn").click(function() {
alert("btn 被點選啦!");
}
);
确認這一步沒有問題。
準備對話框
第二步,需要準備對話框的内容。這些内容來自 jQuery UI 的示範檔案。
<div id="dialog-confirm" title="Empty the recycle bin?" >
<p>
<span class="ui-icon ui-icon-alert" style="float: left; margin: 0 7px 20px 0;"></span>
These items will be permanently deleted and cannot be recovered. Are you sure?</p>
</div>
為了使用 jQuery UI 的對話框,需要增加這些檔案的引用。
<script type="text/javascript" src="scripts/jquery.ui.core.js"></script>
<script type="text/javascript" src="scripts/jquery.ui.widget.js"></script>
<script type="text/javascript" src="scripts/jquery.ui.mouse.js"></script>
<script type="text/javascript" src="scripts/jquery.ui.button.js"></script>
<script type="text/javascript" src="scripts/jquery.ui.draggable.js"></script>
<script type="text/javascript" src="scripts/jquery.ui.position.js"></script>
<script type="text/javascript" src="scripts/jquery.ui.dialog.js"></script>
增加樣式
jQuery UI 中使用了大量的樣式來修飾,需要引用 jQuery UI 的樣式,注意,jquery.ui.all.css
這個檔案引用了大量的其他樣式檔案,将 jQuery UI 中 \development-bundle\themes\base
檔案夾中的内容都複制過來。
<link type="text/css" href="styles/jquery.ui.all.css" rel="stylesheet" />
在 ready 函數中,同時也初始化這個對話框。
// 初始化
$("#btn").click(function() {
alert("btn 被點選啦!");
});
// 初始化對話框
$("#dialog-confirm").dialog();
});
現在,打開這個頁面的時候,就已經可以看到對話框了。
通過按鈕彈出對話框
我們希望頁面上初始化的時候看不到這個對話框,在點選按鈕的時候再出現。那麼需要這幾個工作。
先給對話框增加一個預設不顯示的樣式。style="display: none",這樣預設就不會看到這一部分。
<div id="dialog-confirm" title="Empty the recycle bin?" style="display: none">
<p>
<span class="ui-icon ui-icon-alert" style="float: left; margin: 0 7px 20px 0;"></span>
These items will be permanently deleted and cannot be recovered. Are you sure?</p>
然後,在初始化對話框的時候,也不顯示,僅僅完成初始化工作。
在初始化對話框的時候,傳遞一個參數 autoOpen: false
$("#dialog-confirm").dialog(
{
autoOpen: false
}
在按鈕的點選事件中,彈出這個對話框。
$("#btn").click(function() {
// alert("btn 被點選啦!");
$("#dialog-confirm").dialog("open");
如果傳遞 close ,将會關閉對話框。
實作模式對話框
在實際應用中,我們經常需要實作模式對話框,在 Web 中需要增加一個遮罩層來擋住底層的元素,模拟模式效果,這可以在初始化對話框的時候,傳遞一個參數 modal: true 來實作。修改之後的初始化代碼成為:
modal: true, // 建立模式對話框
autoOpen: false, // 隻初始化,不顯示
}
增加對話框的按鈕
可以為對話框增加任意的按鈕,并自定義按鈕的事件處理。我們先增加兩個按鈕,一個确定,一個取消,并讓他們先關閉對話框。
// 初始化對話框
{
modal: true, // 建立模式對話框
autoOpen: false,
buttons: {
"Ok": function() {
$(this).dialog('close');
},
"Cancel": function() {
$(this).dialog('close');