使用 jQuery UI Dialog今天用到了客戶端的對(duì)話框，把 jQuery UI 中的對(duì)話框?qū)W習(xí)了一下。 準(zhǔn)備 jQuery 環(huán)境首先，我們創(chuàng)建一個(gè)按鈕，點(diǎn)擊這個(gè)按鈕的時(shí)候，將會(huì)彈出一個(gè)對(duì)話框。 1 <input type="button" value="刪除" id="btn" />
為了設(shè)置這個(gè)按鈕點(diǎn)擊的事件，需要準(zhǔn)備 jQuery 的環(huán)境。 1 <script type="text/javascript" src="scripts/jquery-1.4.2.js"></script>
在 ready 中設(shè)置按鈕的點(diǎn)擊事件。 1 $(function() { 2 // 初始化 3 $("#btn").click(function() { 4 alert("btn 被點(diǎn)擊啦！"); 5 } 6 );
確認(rèn)這一步?jīng)]有問題。
準(zhǔn)備對(duì)話框第二步，需要準(zhǔn)備對(duì)話框的內(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 的對(duì)話框，需要增加這些文件的引用。 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 這個(gè)文件引用了大量的其他樣式文件，將 jQuery UI 中 \development-bundle\themes\base 文件夾中的內(nèi)容都復(fù)制過來。 1 <link type="text/css" href="styles/jquery.ui.all.css" rel="stylesheet" /> 在 ready 函數(shù)中，同時(shí)也初始化這個(gè)對(duì)話框。 1 $(function() { 2 // 初始化 3 $("#btn").click(function() { 4 alert("btn 被點(diǎn)擊啦！"); 5 }); 6 7 // 初始化對(duì)話框 8 $("#dialog-confirm").dialog(); 9 });
現(xiàn)在，打開這個(gè)頁面的時(shí)候，就已經(jīng)可以看到對(duì)話框了。
通過按鈕彈出對(duì)話框我們希望頁面上初始化的時(shí)候看不到這個(gè)對(duì)話框，在點(diǎn)擊按鈕的時(shí)候再出現(xiàn)。那么需要這幾個(gè)工作。 先給對(duì)話框增加一個(gè)默認(rèn)不顯示的樣式。style="display: none"，這樣默認(rèn)就不會(huì)看到這一部分。 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>
然后，在初始化對(duì)話框的時(shí)候，也不顯示，僅僅完成初始化工作。 在初始化對(duì)話框的時(shí)候，傳遞一個(gè)參數(shù) autoOpen: false 1 $("#dialog-confirm").dialog( 2 { 3 autoOpen: false 4 } 5 ); 6
在按鈕的點(diǎn)擊事件中，彈出這個(gè)對(duì)話框。 1 $("#btn").click(function() { 2 // alert("btn 被點(diǎn)擊啦！"); 3 $("#dialog-confirm").dialog("open"); 4 }); 如果傳遞 close ，將會(huì)關(guān)閉對(duì)話框。
實(shí)現(xiàn)模式對(duì)話框在實(shí)際應(yīng)用中，我們經(jīng)常需要實(shí)現(xiàn)模式對(duì)話框，在 Web 中需要增加一個(gè)遮罩層來擋住底層的元素，模擬模式效果，這可以在初始化對(duì)話框的時(shí)候，傳遞一個(gè)參數(shù) modal: true 來實(shí)現(xiàn)。修改之后的初始化代碼成為： 1 $("#dialog-confirm").dialog( 2 { 3 modal: true, // 創(chuàng)建模式對(duì)話框 4 autoOpen: false, // 只初始化，不顯示 5 } 6 );
增加對(duì)話框的按鈕可以為對(duì)話框增加任意的按鈕，并自定義按鈕的事件處理。我們先增加兩個(gè)按鈕，一個(gè)確定，一個(gè)取消，并讓他們先關(guān)閉對(duì)話框。 1 // 初始化對(duì)話框 2 $("#dialog-confirm").dialog( 3 { 4 modal: true, // 創(chuàng)建模式對(duì)話框 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:///download
|
|
|
