? 博客園首頁使用 jQuery UI Dialog
作者：
haogj 來源：
博客園 發(fā)布時間：2011-02-16 17:09 閱讀：1944 次
原文鏈接 [收藏]今天用到了客戶端的對話框，把 jQuery UI 中的對話框?qū)W習(xí)了一下。
準(zhǔn)備 jQuery 環(huán)境
首先，我們創(chuàng)建一個按鈕，點擊這個按鈕的時候，將會彈出一個對話框。
1 <input type="button" value="刪除" id="btn" />
為了設(shè)置這個按鈕點擊的事件，需要準(zhǔn)備 jQuery 的環(huán)境。
1 <script type="text/javascript" src="scripts/jquery-1.4.2.js"></script>
在 ready 中設(shè)置按鈕的點擊事件。
1 $(function() {
2 // 初始化
3 $("#btn").click(function() {
4 alert("btn 被點擊啦！");
5 }
6 );
確認(rèn)這一步?jīng)]有問題。
準(zhǔn)備對話框
第二步，需要準(zhǔn)備對話框的內(nèi)容。這些內(nèi)容來自 jQuery UI 的演示文件。
1 <div id="dialog-confirm" title="Empty the recycle bin?" >
2 <p>
3 <span class="ui-icon ui-icon-alert" style="float: left; margin: 0 7px 20px 0;"></span>
4 These items will be permanently deleted and cannot be recovered. Are you sure?</p>
5 </div>
為了使用 jQuery UI 的對話框，需要增加這些文件的引用。
1 <script type="text/javascript" src="scripts/jquery.ui.core.js"></script>
2 <script type="text/javascript" src="scripts/jquery.ui.widget.js"></script>
3 <script type="text/javascript" src="scripts/jquery.ui.mouse.js"></script>
4 <script type="text/javascript" src="scripts/jquery.ui.button.js"></script>
5 <script type="text/javascript" src="scripts/jquery.ui.draggable.js"></script>
6 <script type="text/javascript" src="scripts/jquery.ui.position.js"></script>
7 <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 文件夾中的內(nèi)容都復(fù)制過來。
1 <link type="text/css" href="styles/jquery.ui.all.css" rel="stylesheet" />
在 ready 函數(shù)中，同時也初始化這個對話框。
1 $(function() {
2 // 初始化
3 $("#btn").click(function() {
4 alert("btn 被點擊啦！");
5 });
6
7 // 初始化對話框
8 $("#dialog-confirm").dialog();
9 });
現(xiàn)在，打開這個頁面的時候，就已經(jīng)可以看到對話框了。
通過按鈕彈出對話框
我們希望頁面上初始化的時候看不到這個對話框，在點擊按鈕的時候再出現(xiàn)。那么需要這幾個工作。
先給對話框增加一個默認(rèn)不顯示的樣式。style="display: none"，這樣默認(rèn)就不會看到這一部分。
1 <div id="dialog-confirm" title="Empty the recycle bin?" style="display: none">
2 <p>
3 <span class="ui-icon ui-icon-alert" style="float: left; margin: 0 7px 20px 0;"></span>
4 These items will be permanently deleted and cannot be recovered. Are you sure?</p>
5 </div>
然后，在初始化對話框的時候，也不顯示，僅僅完成初始化工作。
在初始化對話框的時候，傳遞一個參數(shù) autoOpen: false
1 $("#dialog-confirm").dialog(
2 {
3 autoOpen: false
4 }
5 );
6
在按鈕的點擊事件中，彈出這個對話框。
1 $("#btn").click(function() {
2 // alert("btn 被點擊啦！");
3 $("#dialog-confirm").dialog("open");
4 });
如果傳遞 close ，將會關(guān)閉對話框。
實現(xiàn)模式對話框
在實際應(yīng)用中，我們經(jīng)常需要實現(xiàn)模式對話框，在 Web 中需要增加一個遮罩層來擋住底層的元素，模擬模式效果，這可以在初始化對話框的時候，傳遞一個參數(shù) modal: true 來實現(xiàn)。修改之后的初始化代碼成為：
1 $("#dialog-confirm").dialog(
2 {
3 modal: true, // 創(chuàng)建模式對話框
4 autoOpen: false, // 只初始化，不顯示
5 }
6 );
增加對話框的按鈕
可以為對話框增加任意的按鈕，并自定義按鈕的事件處理。我們先增加兩個按鈕，一個確定，一個取消，并讓他們先關(guān)閉對話框。
1 // 初始化對話框
2 $("#dialog-confirm").dialog(
3 {
4 modal: true, // 創(chuàng)建模式對話框
5 autoOpen: false,
6 buttons: {
7 "Ok": function() {
8 $(this).dialog('close');
9 },
10 "Cancel": function() {
11 $(this).dialog('close');
12 }
13 }
14 });
jQuery UI 下載地址：
http://jqueryui.com/download下載完整示例jQuery UI Dialog 的詳細(xì)使用說明》點擊查看原文...程序員找工作，就在博客園
