萬盛學電腦網

 萬盛學電腦網 >> 腳本專題 >> javascript >> 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');          }      }  });   
copyright © 萬盛學電腦網 all rights reserved