JQUERY dialog的用法詳細(xì)解析

更新時(shí)間：2013年12月19日 09:19:20 作者：

本篇文章主要是對(duì)JQUERY中dialog的用法進(jìn)行了詳細(xì)的分析介紹，需要的朋友可以過(guò)來(lái)參考下，希望對(duì)大家有所幫助

今天用到了客戶端的對(duì)話框，把 jQuery UI 中的對(duì)話框?qū)W習(xí)了一下。

準(zhǔn)備 jQuery 環(huán)境

首先，我們創(chuàng)建一個(gè)按鈕，點(diǎn)擊這個(gè)按鈕的時(shí)候，將會(huì)彈出一個(gè)對(duì)話框。

為了設(shè)置這個(gè)按鈕點(diǎn)擊的事件，需要準(zhǔn)備 jQuery 的環(huán)境。

在 ready 中設(shè)置按鈕的點(diǎn)擊事件。

復(fù)制代碼代碼如下:

 $(function() {
    // 初始化
    $("#btn").click(function() {
        alert("btn 被點(diǎn)擊啦！");
   }
 );

確認(rèn)這一步?jīng)]有問(wèn)題。

準(zhǔn)備對(duì)話框
第二步，需要準(zhǔn)備對(duì)話框的內(nèi)容。這些內(nèi)容來(lái)自 jQuery UI 的演示文件。

復(fù)制代碼代碼如下:

 <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 的對(duì)話框，需要增加這些文件的引用。

<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 中使用了大量的樣式來(lái)修飾，需要引用 jQuery UI 的樣式，注意，jquery.ui.all.css 這個(gè)文件引用了大量的其他樣式文件，將 jQuery UI 中 \development-bundle\themes\base 文件夾中的內(nèi)容都復(fù)制過(guò)來(lái)。

在 ready 函數(shù)中，同時(shí)也初始化這個(gè)對(duì)話框。

復(fù)制代碼代碼如下:

 $(function() {
     // 初始化
     $("#btn").click(function() {
         alert("btn 被點(diǎn)擊啦！");
     });

     // 初始化對(duì)話框
     $("#dialog-confirm").dialog();
 });

現(xiàn)在，打開這個(gè)頁(yè)面的時(shí)候，就已經(jīng)可以看到對(duì)話框了。

通過(guò)按鈕彈出對(duì)話框
我們希望頁(yè)面上初始化的時(shí)候看不到這個(gè)對(duì)話框，在點(diǎn)擊按鈕的時(shí)候再出現(xiàn)。那么需要這幾個(gè)工作。

先給對(duì)話框增加一個(gè)默認(rèn)不顯示的樣式。style="display: none"，這樣默認(rèn)就不會(huì)看到這一部分。

復(fù)制代碼代碼如下:

 <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>
 </div>

然后，在初始化對(duì)話框的時(shí)候，也不顯示，僅僅完成初始化工作。

在初始化對(duì)話框的時(shí)候，傳遞一個(gè)參數(shù) autoOpen: false

復(fù)制代碼代碼如下:

 $("#dialog-confirm").dialog(
     {
         autoOpen: false
     }
 );

在按鈕的點(diǎn)擊事件中，彈出這個(gè)對(duì)話框。

復(fù)制代碼代碼如下:

 $("#btn").click(function() {
     // alert("btn 被點(diǎn)擊啦！");
     $("#dialog-confirm").dialog("open");
 });

如果傳遞 close ，將會(huì)關(guān)閉對(duì)話框。

實(shí)現(xiàn)模式對(duì)話框
在實(shí)際應(yīng)用中，我們經(jīng)常需要實(shí)現(xiàn)模式對(duì)話框，在 Web 中需要增加一個(gè)遮罩層來(lái)?yè)踝〉讓拥脑兀M模式效果，這可以在初始化對(duì)話框的時(shí)候，傳遞一個(gè)參數(shù) modal: true 來(lái)實(shí)現(xiàn)。修改之后的初始化代碼成為：

復(fù)制代碼代碼如下:

 $("#dialog-confirm").dialog(
     {
         modal: true,             // 創(chuàng)建模式對(duì)話框
         autoOpen: false,         // 只初始化，不顯示
      }
 );

增加對(duì)話框的按鈕
可以為對(duì)話框增加任意的按鈕，并自定義按鈕的事件處理。我們先增加兩個(gè)按鈕，一個(gè)確定，一個(gè)取消，并讓他們先關(guān)閉對(duì)話框。

復(fù)制代碼代碼如下:

 // 初始化對(duì)話框
 $("#dialog-confirm").dialog(
 {
     modal: true,             // 創(chuàng)建模式對(duì)話框
     autoOpen: false,
     buttons: {
         "Ok": function() {
              $(this).dialog('close');
         },
         "Cancel": function() {
             $(this).dialog('close');
         }
     }
 }); 