2020年8月20日 星期四

jQuery UI SPA 應用程式 (三) : 按鈕與對話盒

網頁應用程式在協助作業自動化上, 主要是透過網頁按鈕觸發事件執行 Javascript 程式來擷取剖析資料, 並自動製作下一步要在維運機器上執行的作業指令, 省卻人工下指令撈資料後用 EXCEL 進行資料處理與人工製作指令的麻煩, 還可避免操作過程中可能發生的錯誤. 本系列之前的測試文章參考 :

# jQuery UI SPA 應用程式 (一) : 環境配置與程式架構
# jQuery UI SPA 應用程式 (二) : 動態表格 DataTables

本篇是在前面兩篇的基礎上加入按鈕以及所觸發產生的對話盒最元件, 常用的對話盒有三種 : 訊息盒, 輸入盒, 以及確認盒, 其中確認盒最常用, 主要是作為執行指定 Javascript 應用程式前確認之用, 用法參考之前的文章 :

# jQuery UI widget 之訊息盒與輸入盒應用範例
# jQuery UI 學習筆記 (二) : 按鈕 (Button)
# jQuery UI 學習筆記 (三) : 對話盒 (Dialog)


1. 按鈕 : 

只要加上特定的樣式類別 :

class="ui-button ui-widget ui-corner-all"

jQuery UI 就可將下列三種 HTML 元素 (a, button, input) 轉成主題佈景按鈕 :
  • <a href="#" class="ui-button ui-widget ui-corner-all">訊息盒</a>
  • <button class="ui-button ui-widget ui-corner-all">確認盒</button>
  • <input type="button" value="輸入盒" class="ui-button ui-widget ui-corner-all">
注意, input 按鈕的顯示文字是放在 value 屬性中; 而 a 與 button 元素則是放在 DOM 的 innerHTML 中. 其次, 只要套用 class="ui-button ui-widget ui-corner-all" 樣式類別就可以將三者外觀轉成按鈕, 不需要呼叫 jQuery 物件的 button() 函數, 例如 :


範例 6 : jQuery UI 對話盒的容器

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>jQuery UI Single Page Application</title>
  <script src="jquery/jquery.js"></script>
  <script src="jquery/jquery-ui.js"></script>
  <script src="jquery/datatables.js"></script>
  <link id="theme" href="jquery/themes/hot-sneaks/jquery-ui.css" rel="stylesheet">
  <link href="jquery/datatables.css" rel="stylesheet">
  <style>
    body {
      font-family: Arial, Helvetica, sans-serif;
      font-size:10px;
      }
  </style>
</head>
<body>
  <!-- 主題佈景選擇器 -->
  <select id="themes">
    <option value="base">base</option>
    <option value="black-tie">black-tie</option>
    <option value="blitzer">blitzer</option>
    <option value="cupertino">cupertino</option>
    <option value="dark-hive">dark-hive</option>
    <option value="dot-luv">dot-luv</option>
    <option value="eggplant">eggplant</option>
    <option value="excite-bike">excite-bike</option>
    <option value="flick">flick</option>
    <option value="hot-sneaks">hot-sneaks</option>
    <option value="humanity">humanity</option>
    <option value="le-frog">le-frog</option>
    <option value="mint-choc">mint-choc</option>
    <option value="overcast">overcast</option>
    <option value="pepper-grinder">pepper-grinder</option>
    <option value="redmond">redmond</option>
    <option value="smoothness">smoothness</option>
    <option value="south-street">south-street</option>
    <option value="start">start</option>
    <option value="sunny">sunny</option>
    <option value="swanky-purse">swanky-purse</option>
    <option value="trontastic">trontastic</option>
    <option value="ui-darkness">ui-darkness</option>
    <option value="ui-lightness">ui-lightness</option>
    <option value="vader">vader</option>
  </select>
  <script>
    $(function(){
      $("#themes").selectmenu();
      $("#themes").val("hot-sneaks");
      $("#themes").selectmenu("refresh");
      $('#themes').on('selectmenuchange', function() {
        var theme=$(this).val();
        var href="jquery/themes/" + theme + "/jquery-ui.min.css";
        $("#theme").attr("href", href);
        });
      });
  </script>
  <!-- 頁嵌面板 -->
  <div id="tabs">
    <ul>
      <li><a href="#tabs-1">A 元素按鈕</a></li>
      <li><a href="#tabs-2">Button 元素按鈕</a></li>
      <li><a href="#tabs-3">Input 元素按鈕</a></li>
    </ul>
    <div id="tabs-1">
      <a id="open_msgbox" href="#" class="ui-button ui-widget ui-corner-all">開啟訊息盒</a>
    </div>
    <div id="tabs-2">
      <button id="open_confirmbox" class="ui-button ui-widget ui-corner-all">開啟確認盒</button>
    </div>
    <div id="tabs-3">
      <input type="button" id="open_inputbox" class="ui-button ui-widget ui-corner-all" value="開啟輸入盒">
    </div>
  </div>
  <div id="msgbox" title="訊息"></div>
  <div id="confirmbox" title="確認"></div>
  <div id="inputbox" title="輸入"></div>
  <script>
    $(function(){
      $("#tabs" ).tabs();
      }); 
  </script>
</body>
</html>

此網頁中的三個頁籤分別放了標示為 "訊息盒", "確認盒", 以及 "輸入盒" 之按鈕, 只要套用 class="ui-button ui-widget ui-corner-all" 樣式類別就將其變成主題按鈕, 結果如下 :






按此三個按鈕預期要分別開啟  "訊息盒", "確認盒", 以及 "輸入盒" 三個對話盒, 但是目前按此三個按鈕均不會有反應, 因為還沒有為其綁定 click 點擊事件. 在處理 click 事件之前需先將這三個對話盒的 HTML 與 JS 程式碼準備好.


2. 對話盒 : 

jQuery UI 的對話盒內容都是放在 div 元素容器內 :

<div id="msgbox"  title="通知"></div>
<div id="confirmbox" title="確認"></div>
<div id="inputbox" title="輸入"></div>

div 元素的 title 屬性即對話盒標題, 在取得 div 元素之 jQuery 物件後呼叫其 dialog() 方法並傳入一個選項物件即可建立對話盒, 不論是訊息盒, 確認盒, 還是輸入盒作法都一樣 (注意, 對話盒標題也可以在選項物件中設定), 三者的差別只是 div 容器的 HTML 內容與選項物件 opt 中的事件處理方式不同而已, 訊息盒與確認盒的 HTML 內容只是一個字串 (純文字或 HTML) 與按鈕; 輸入盒的內容則是輸入表單與按鈕 :

$("#dialog").dialog(opt);

選項物件的常用屬性如下表 :


 常用設定屬性 說明
 title 對話盒標題 (= div 容器之 title 屬性)
 width 對話盒寬度
 height 對話盒寬度
 modal  是否為強制視窗 (true/false), 預設為 false
 autoOpen 是否自動開啟 (true/false), 預設為 true
 buttons 定義按鈕與其回呼函數等 (陣列或物件)
 beforeClose 定義對話盒關閉前之回呼函數


這些選項中必須注意的是預設為 true 的 autoOpen 屬性, 不論是哪一種對話盒通常都應該設為 false (不顯示), 因為實務上很少有網頁需要一開啟就顯示對話盒, 通常是因為按下按鈕等事件才顯示. 其次, buttons 屬性用來設定對話盒中的按鈕以及其 click 事件處理器

呼叫 dialog(opt) 建立對話盒後, 就可以為按鈕建立 click 事件監聽器, 當發生 click 事件時呼叫對話盒的 open 方法顯示對話盒 :

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

以下分別就三種對話盒說明實際用法 :


(1). 訊息盒 :

三種對話盒中訊息盒最簡單, 就只是一個通知使用者之訊息而已, 這個訊息內容不需要寫在 div 容器的 HTML 內容中, 可以在發生按鈕的 click 事件時利用 jQuery 物件的 html() 方法加以設定, 因此訊息盒容器可以共用, 亦即在網頁中只需要設置一個訊息盒 div 容器即可, 網頁中任何按鈕均可使用, 程式碼如下 :

//建立訊息盒
$("#msgbox").dialog({
  title: "訊息",
  autoOpen: false,
  buttons: {
    "確定": function() {$(this).dialog("close");}
    }
  });
//監聽按鈕之 click 事件
$("#open_msgbox").click(function(e) {
  var msg="<p>Hello World!</p>";
  $("#msgbox").html(msg);
  $("#msgbox").dialog("open");
  e.preventDefault();
  });

此範例首先呼叫訊息盒 div 容器 (id=msgbox) 的 jQuery 物件之 dialog() 方法, 並傳入一個 opt 選項物件來建立訊息盒, 主要就是設置一個 "確定" 按鈕, 並為其指定 click 事件處理器用來關閉訊息盒. 其次是為 id=open_msgbox 的按鈕指派 click 事件處理器, 主要是呼叫訊息盒物件的 html() 方法設定訊息盒容器的 HTML 內容, 以及呼叫 dialog("open") 方法開啟訊息盒.


(2). 確認盒 :

確認盒用來詢問使用者是否確定要執行某項作業, 其 div 容器的 HTML 內容與訊息盒一樣都是字串 (純文字或 HTML), 差別是訊息盒為敘述句 (例如 "檔案不存在"); 而確認盒則是問句 (例如 "確定要刪除此檔案?"), 且確認盒按鈕要有兩個 :  YES/OK/確定/是, 與 NO/CANCEL/取消/否; 而訊息盒則只要一個即可. 程式碼如下 :

//建立確認盒
var do_the_job=function() {
  //do the job
  $(this).dialog("close");
  }
$("#confirmbox").dialog({
  title: "確認",
  autoOpen: false,
  buttons: {
    "確定": do_the_job,
    "取消": function() {$(this).dialog("close");}
    }
  });
//監聽確認盒按鈕之 click 事件
$("#open_confirmbox").click(function(e) {
  var msg="<p>確定要進行這項作業嗎?</p>";
  $("#confirmbox").html(msg);
  $("#confirmbox").dialog("open");
  e.preventDefault();
  });

可見確認盒與訊息盒最大的不同是選項物件中必須對 YES/OK/確定等按鈕指派一個事件處理涮進行特定處理, 此函數可以匿名函數形式直接寫在 YES/OK/確定按鈕後面, 若內容太長也可以寫在一個外部具名函數內, 但必須放在建立確認盒之 dialog() 之前.


(3). 輸入盒 :

輸入盒用來在進行下一步作業之前收集必要的資訊, 例如登入遠端機台所需的帳密等等, 它與訊息盒, 確認盒最大的不同是 div 容器的 HTML 需包含可輸入資料的表單元件, 例如文字欄位 (text input), 選項圓鈕 (radio input), 核取方塊 (checkbox input), 或下拉式選單 (select option) 等等, 其按鈕與確認盒一樣有兩個 :  YES/OK/確定/是, 與 NO/CANCEL/取消/否, 若按 YES/OK/確定/是就執行事件處理函數, 否則就關閉輸入盒, 例如下面的攝氏轉華氏溫度範例 :

//建立輸入盒
var compute=function() {
  var c=parseFloat($("#c").val());
  var f=c*9/5 + 32;
  f=f.toFixed(1);
  $("#msgbox").html("攝氏 " + c + " 度=華氏 " + f + " 度");
  $("#msgbox").dialog("open");
  $(this).dialog("close");
  }
$("#inputbox").dialog({
  title: "輸入",
  autoOpen: false,
  buttons: {
    "確定": compute,
    "取消": function() {$(this).dialog("close");}
    }
  });
//監聽輸入盒按鈕之 click 事件
$("#open_inputbox").click(function(e) {
  var fields="<p>請輸入攝氏溫度</p>" +
             "<p><input id='c' type='text'></p>";
  $("#inputbox").html(fields);
  $("#inputbox").dialog("open");
  e.preventDefault();
  });

可見輸入盒與確認盒不同之處為 div 容器之 HTML 內容. 如果表單元件較多或較長, 使得預設的對話盒尺寸不夠, 可在選項物件中用 width 與 height 屬性設定為適當尺寸.

下面範例是將上述程式碼加到上面範例 6 的結果, 這使三個頁籤中的按鈕都能動作 :


範例 7 : jQuery UI 對話盒測試

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>jQuery UI Single Page Application</title>
  <script src="jquery/jquery.js"></script>
  <script src="jquery/jquery-ui.js"></script>
  <script src="jquery/datatables.js"></script>
  <link id="theme" href="jquery/themes/hot-sneaks/jquery-ui.css" rel="stylesheet">
  <link href="jquery/datatables.css" rel="stylesheet">
  <style>
    body {
      font-family: Arial, Helvetica, sans-serif;
      font-size:10px;
      }
  </style>
</head>
<body>
  <!-- 主題佈景選擇器 -->
  <select id="themes">
    <option value="base">base</option>
    <option value="black-tie">black-tie</option>
    <option value="blitzer">blitzer</option>
    <option value="cupertino">cupertino</option>
    <option value="dark-hive">dark-hive</option>
    <option value="dot-luv">dot-luv</option>
    <option value="eggplant">eggplant</option>
    <option value="excite-bike">excite-bike</option>
    <option value="flick">flick</option>
    <option value="hot-sneaks">hot-sneaks</option>
    <option value="humanity">humanity</option>
    <option value="le-frog">le-frog</option>
    <option value="mint-choc">mint-choc</option>
    <option value="overcast">overcast</option>
    <option value="pepper-grinder">pepper-grinder</option>
    <option value="redmond">redmond</option>
    <option value="smoothness">smoothness</option>
    <option value="south-street">south-street</option>
    <option value="start">start</option>
    <option value="sunny">sunny</option>
    <option value="swanky-purse">swanky-purse</option>
    <option value="trontastic">trontastic</option>
    <option value="ui-darkness">ui-darkness</option>
    <option value="ui-lightness">ui-lightness</option>
    <option value="vader">vader</option>
  </select>
  <script>
    $(function(){
      $("#themes").selectmenu();
      $("#themes").val("hot-sneaks");
      $("#themes").selectmenu("refresh");
      $('#themes').on('selectmenuchange', function() {
        var theme=$(this).val();
        var href="jquery/themes/" + theme + "/jquery-ui.min.css";
        $("#theme").attr("href", href);
        });
      });
  </script>
  <!-- 頁嵌面板 -->
  <div id="tabs">
    <ul>
      <li><a href="#tabs-1">A 元素按鈕</a></li>
      <li><a href="#tabs-2">Button 元素按鈕</a></li>
      <li><a href="#tabs-3">Input 元素按鈕</a></li>
    </ul>
    <div id="tabs-1">
      <a id="open_msgbox" href="#" class="ui-button ui-widget ui-corner-all">開啟訊息盒</a>
    </div>
    <div id="tabs-2">
      <button id="open_confirmbox" class="ui-button ui-widget ui-corner-all">開啟確認盒</button>
    </div>
    <div id="tabs-3">
      <input type="button" id="open_inputbox" class="ui-button ui-widget ui-corner-all" value="開啟輸入盒">
    </div>
  </div>
  <div id="msgbox" title="訊息"></div>
  <div id="confirmbox" title="確認"></div>
  <div id="inputbox" title="輸入"></div>
  <script>
    $(function(){
      $("#tabs" ).tabs();
      //建立訊息盒
      $("#msgbox").dialog({
        title: "訊息",
        autoOpen: false,
        buttons: {
          "確定": function() {$(this).dialog("close");}
          }
        });
      //監聽訊息盒按鈕之 click 事件
      $("#open_msgbox").click(function(e) {
        var msg="<p>Hello World!</p>";
        $("#msgbox").html(msg);
        $("#msgbox").dialog("open");
        e.preventDefault();
        });
      //建立確認盒
      var do_the_job=function() {
        //do the job
        $(this).dialog("close");
        }
      $("#confirmbox").dialog({
        title: "確認",
        autoOpen: false,
        buttons: {
          "確定": do_the_job,
          "取消": function() {$(this).dialog("close");}
          }
        });
      //監聽確認盒按鈕之 click 事件
      $("#open_confirmbox").click(function(e) {
        var msg="<p>確定要進行這項作業嗎?</p>";
        $("#confirmbox").html(msg);
        $("#confirmbox").dialog("open");
        e.preventDefault();
        });
      //建立輸入盒
      var compute=function() {
        var c=parseFloat($("#c").val());
        var f=c*9/5 + 32;
        f=f.toFixed(1);
        $("#msgbox").html("攝氏 " + c + " 度=華氏 " + f + " 度");
        $("#msgbox").dialog("open");
        $(this).dialog("close");
        }
      $("#inputbox").dialog({
        title: "輸入",
        autoOpen: false,
        buttons: {
          "確定": compute,
          "取消": function() {$(this).dialog("close");}
          }
        });
      //監聽輸入盒按鈕之 click 事件
      $("#open_inputbox").click(function(e) {
        var fields="<p>請輸入攝氏溫度</p>" +
                   "<p><input id='c' type='text'></p>";
        $("#inputbox").html(fields);
        $("#inputbox").dialog("open");
        e.preventDefault();
        });
      }); 
  </script>
</body>
</html>

結果如下 :




從上面的測試可知, 其實這三種對話盒差別只在 div 容器的 HTML 內容與確定按鈕之事件處理函數不同而已, 下面範例是將程式與容器放在一起方便模組化的寫法 (雖然準則是要將 HTML 與 Javascript 程式碼分離) :


範例 8 : jQuery UI 對話盒測試 (模組化)

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>jQuery UI Single Page Application</title>
  <script src="jquery/jquery.js"></script>
  <script src="jquery/jquery-ui.js"></script>
  <script src="jquery/datatables.js"></script>
  <link id="theme" href="jquery/themes/hot-sneaks/jquery-ui.css" rel="stylesheet">
  <link href="jquery/datatables.css" rel="stylesheet">
  <style>
    body {
      font-family: Arial, Helvetica, sans-serif;
      font-size:10px;
      }
  </style>
</head>
<body>
  <!-- 主題佈景選擇器 -->
  <select id="themes">
    <option value="base">base</option>
    <option value="black-tie">black-tie</option>
    <option value="blitzer">blitzer</option>
    <option value="cupertino">cupertino</option>
    <option value="dark-hive">dark-hive</option>
    <option value="dot-luv">dot-luv</option>
    <option value="eggplant">eggplant</option>
    <option value="excite-bike">excite-bike</option>
    <option value="flick">flick</option>
    <option value="hot-sneaks">hot-sneaks</option>
    <option value="humanity">humanity</option>
    <option value="le-frog">le-frog</option>
    <option value="mint-choc">mint-choc</option>
    <option value="overcast">overcast</option>
    <option value="pepper-grinder">pepper-grinder</option>
    <option value="redmond">redmond</option>
    <option value="smoothness">smoothness</option>
    <option value="south-street">south-street</option>
    <option value="start">start</option>
    <option value="sunny">sunny</option>
    <option value="swanky-purse">swanky-purse</option>
    <option value="trontastic">trontastic</option>
    <option value="ui-darkness">ui-darkness</option>
    <option value="ui-lightness">ui-lightness</option>
    <option value="vader">vader</option>
  </select>
  <script>
    $(function(){
      $("#themes").selectmenu();
      $("#themes").val("hot-sneaks");
      $("#themes").selectmenu("refresh");
      $('#themes').on('selectmenuchange', function() {
        var theme=$(this).val();
        var href="jquery/themes/" + theme + "/jquery-ui.min.css";
        $("#theme").attr("href", href);
        });
      });
  </script>
  <!-- 頁嵌面板 -->
  <div id="tabs">
    <ul>
      <li><a href="#tabs-1">A 元素按鈕</a></li>
      <li><a href="#tabs-2">Button 元素按鈕</a></li>
      <li><a href="#tabs-3">Input 元素按鈕</a></li>
    </ul>
    <div id="tabs-1">
      <!-- 訊息盒按鈕 -->
      <a id="open_msgbox" href="#" class="ui-button ui-widget ui-corner-all">開啟訊息盒</a>
      <script>
        $(function(){
          //監聽訊息盒按鈕之 click 事件
          $("#open_msgbox").click(function(e) {
            var msg="<p>Hello World!</p>";
            $("#msgbox").html(msg);
            $("#msgbox").dialog("open");
            e.preventDefault();
            });       
          }); 
      </script>
      <!-- 訊息盒 -->
      <div id="msgbox" title="訊息"></div>
      <script>
        $(function(){
          //建立訊息盒
          $("#msgbox").dialog({
            title: "訊息",
            autoOpen: false,
            buttons: {
              "確定": function() {$(this).dialog("close");}
              }
            });
          }); 
      </script>
    </div>
    <div id="tabs-2">
      <!-- 確認盒按鈕 -->
      <button id="open_confirmbox" class="ui-button ui-widget ui-corner-all">開啟確認盒</button>
      <script>
        $(function(){
          //監聽確認盒按鈕之 click 事件
          $("#open_confirmbox").click(function(e) {
            var msg="<p>確定要進行這項作業嗎?</p>";
            $("#confirmbox").html(msg);
            $("#confirmbox").dialog("open");
            e.preventDefault();
            });
          }); 
      </script>
      <!-- 確認盒 -->
      <div id="confirmbox" title="確認"></div>
      <script>
        $(function(){
          //建立確認盒
          var do_the_job=function() {
            //do the job
            $(this).dialog("close");
            }
          $("#confirmbox").dialog({
            title: "確認",
            autoOpen: false,
            buttons: {
              "確定": do_the_job,
              "取消": function() {$(this).dialog("close");}
              }
            });
          }); 
      </script>
    </div>
    <div id="tabs-3">
      <!-- 輸入盒按鈕 -->
      <input type="button" id="open_inputbox" class="ui-button ui-widget ui-corner-all" value="開啟輸入盒">
      <script>
        $(function(){
          //監聽輸入盒按鈕之 click 事件
          $("#open_inputbox").click(function(e) {
            var fields="<p>請輸入攝氏溫度</p>" +
                       "<p><input id='c' type='text'></p>";
            $("#inputbox").html(fields);
            $("#inputbox").dialog("open");
            e.preventDefault();
            });
          }); 
      </script>
      <!-- 輸入盒 -->
      <div id="inputbox" title="輸入"></div>
      <script>
        $(function(){
          //建立輸入盒
          var compute=function() {
            var c=parseFloat($("#c").val());
            var f=c*9/5 + 32;
            f=f.toFixed(1);
            $("#msgbox").html("攝氏 " + c + " 度=華氏 " + f + " 度");
            $("#msgbox").dialog("open");
            $(this).dialog("close");
            }
          $("#inputbox").dialog({
            title: "輸入",
            autoOpen: false,
            buttons: {
              "確定": compute,
              "取消": function() {$(this).dialog("close");}
              }
            });
          }); 
      </script>
    </div>
  </div>
  <script>
    $(function(){
      $("#tabs" ).tabs();
      }); 
  </script>
</body>
</html>

不過這樣看起來好像有點亂啊, 真是有一好沒兩好.


3. 對話盒模組 (含按鈕) : 

茲將此三個對話盒模組列之如下以備複製套用 :


(1). 訊息盒模組 :

<!-- 訊息盒按鈕 -->
<a id="open_msgbox" href="#" class="ui-button ui-widget ui-corner-all">開啟訊息盒</a>
<script>
  $(function(){
    //監聽訊息盒按鈕之 click 事件
    $("#open_msgbox").click(function(e) {
      var msg="<p>Hello World!</p>";
      $("#msgbox").html(msg);
      $("#msgbox").dialog("open");
      e.preventDefault();
      });       
    }); 
</script>
<!-- 訊息盒 -->
<div id="msgbox" title="訊息"></div>
<script>
  $(function(){
    //建立訊息盒
    $("#msgbox").dialog({
      title: "訊息",
      autoOpen: false,
      buttons: {
        "確定": function() {$(this).dialog("close");}
        }
      });
    }); 
</script>


(2). 確認盒模組 :

<!-- 確認盒按鈕 -->
<button id="open_confirmbox" class="ui-button ui-widget ui-corner-all">開啟確認盒</button>
<script>
  $(function(){
    //監聽確認盒按鈕之 click 事件
    $("#open_confirmbox").click(function(e) {
      var msg="<p>確定要進行這項作業嗎?</p>";
      $("#confirmbox").html(msg);
      $("#confirmbox").dialog("open");
      e.preventDefault();
      });
    }); 
</script>
<!-- 確認盒 -->
<div id="confirmbox" title="確認"></div>
<script>
  $(function(){
    //建立確認盒
    var do_the_job=function() {
      //do the job
      $(this).dialog("close");
      }
    $("#confirmbox").dialog({
      title: "確認",
      autoOpen: false,
      buttons: {
        "確定": do_the_job,
        "取消": function() {$(this).dialog("close");}
        }
      });
    }); 
</script>


(3). 輸入盒模組 : 

<!-- 輸入盒按鈕 -->
<input type="button" id="open_inputbox" class="ui-button ui-widget ui-corner-all" value="開啟輸入盒">
<script>
  $(function(){
    //監聽輸入盒按鈕之 click 事件
    $("#open_inputbox").click(function(e) {
      var fields="<p>請輸入攝氏溫度</p>" +
                 "<p><input id='c' type='text'></p>";
      $("#inputbox").html(fields);
      $("#inputbox").dialog("open");
      e.preventDefault();
      });
    }); 
</script>
<!-- 輸入盒 -->
<div id="inputbox" title="輸入"></div>
<script>
  $(function(){
    //建立輸入盒
    var compute=function() {
      var c=parseFloat($("#c").val());
      var f=c*9/5 + 32;
      f=f.toFixed(1);
      $("#msgbox").html("攝氏 " + c + " 度=華氏 " + f + " 度");
      $("#msgbox").dialog("open");
      $(this).dialog("close");
      }
    $("#inputbox").dialog({
      title: "輸入",
      autoOpen: false,
      buttons: {
        "確定": compute,
        "取消": function() {$(this).dialog("close");}
        }
      });
    }); 
</script>

這種模組化設計在 Django 之類有 template 模板功能的框架應用上應該用得上.

於

沒有留言:

張貼留言