JQUERY dialog的用法詳細解析

JQUERY dialog的用法詳細解析

 本篇文章主要是對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-bundlethemesbase 檔案夾中的內容都複製過來。

 

<link type="text/css" href="styles/jquery.ui.all.css" rel="stylesheet" />

 

在 ready 函數中，同時也初始化這個對話方塊。

 代碼如下:

 $(function() {

     // 初始化

     $("#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>

 </div>

 

然後，在初始化對話方塊的時候，也不顯示，僅僅完成初始化工作。

 

在初始化對話方塊的時候，傳遞一個參數 autoOpen: false

 

代碼如下:

 $("#dialog-confirm").dialog(

     {

         autoOpen: false

     }

 );

 

在按鈕的點擊事件中，彈出這個對話方塊。

代碼如下:

 $("#btn").click(function() {

     // alert("btn 被點擊啦！");

     $("#dialog-confirm").dialog("open");

 });

 

如果傳遞 close ，將會關閉對話方塊。

 

實現強制回應對話方塊

在實際應用中，我們經常需要實現強制回應對話方塊，在 Web 中需要增加一個遮罩層來擋住底層的元素，類比模式效果，這可以在初始化對話方塊的時候，傳遞一個參數 modal: true 來實現。修改之後的初始化代碼成為：

 

代碼如下:

 $("#dialog-confirm").dialog(

     {

         modal: true,             // 建立模式對話方塊

         autoOpen: false,         // 只初始化，不顯示

      }

 );

 

增加對話方塊的按鈕

可以為對話方塊增加任意的按鈕，並自訂按鈕的事件處理。我們先增加兩個按鈕，一個確定，一個取消，並讓他們先關閉對話方塊。

 代碼如下:

 // 初始化對話方塊

 $("#dialog-confirm").dialog(

 {

     modal: true,             // 建立模式對話方塊

     autoOpen: false,

     buttons: {

         "Ok": function() {

              $(this).dialog('close');

         },

         "Cancel": function() {

             $(this).dialog('close');

         }

     }

 });