jQuery EasyUI 測試 : Panel 面板

jQuery EasyUI 的 Panel 是一種容器, 用來存放網頁內容, 也是其他容器如 layout, tab, accordion 的父容器. 其說明文件參考 :

# http://www.jeasyui.com/documentation/panel.php

與其他 EasyUI 元件一樣, 建立一個 Panel 容器有兩個方法, 一個是用 HTML5 標籤語法 (主要是 data-options 屬性), 其二是使用 Javascript 語法, 用程式來設定.

首先來看最簡單的 HTML 方式. Panel 容器只要用一個 div 元素, 並設定樣式類別為 easyui-panel 即可, 如下列範例 1 所示 :

測試範例 1 : http://tony1966.xyz/test/easyuitest/easyui-panel-1.htm [看原始碼]

  <div class="easyui-panel" >
    <p>Hello World!</p>
    <p>Hello World!</p>
    <p>Hello World!</p>
  </div>

所以 Panel 就是一個框框而已, 預設會占滿瀏覽器寬度, 而且高度會隨著內容而自動調整. 如果要限制 Panel 尺寸, 或者內容與邊框之間隙, 那就要用 CSS 來設定, 如下列範例 2 所示 :

測試範例 2 : http://tony1966.xyz/test/easyuitest/easyui-panel-2.htm [看原始碼]

  <div class="easyui-panel" style="width:300px;height:100px;padding:10px;">
      <p>Hello World!</p>
      <p>Hello World!</p>
      <p>Hello World! Hello World! Hello World! Hello World! Hello World! </p>
  </div>

可見, 當設定長寬後, 若資料過長, 會出現垂直卷軸, 但不會出現水平卷軸, 而是直接折返跳行.

第二種建立 Panel 的方式是利用 Javascript 程式, 例如上面範例 2 也可以用 程式來設定, 如範例 2-1 :

 測試範例 2-1 : http://tony1966.xyz/test/easyuitest/easyui-panel-2-1.htm [看原始碼]

  <div id="panel">
      <p>Hello World!</p>
      <p>Hello World!</p>
      <p>Hello World! Hello World! Hello World! Hello World! Hello World! </p>
  </div>
  <script language="javascript">
    $(document).ready(function(){
      $("#panel").panel({
        width:300,
        height:100,
        style:{padding:10}
        });
      });
  </script>

這裡 Panel 的 div 只要指定一個 id 屬性即可,其他都在呼叫 panel() 方法中設定. 注意, width/height 等屬用數字即可, 若加上 px 或 % 則必須改用字串. 但奇怪的是, style 屬性似乎無效, why?

事實上 Panel 的內容也是可以設定的, 這要用 content 屬性, 甚至不要邊框也可以, 只要將 border 屬性設為 false 即可, 如下列範例 2-2 所示 :

 測試範例 2-2 : http://tony1966.xyz/test/easyuitest/easyui-panel-2-2.htm [看原始碼]

  <div id="panel"></div>
  <script language="javascript">
    $(document).ready(function(){
      $("#panel").panel({
        width:300,
        height:100,
        border:false,
        content:"<p>Hello World!</p>"
        });
      });
  </script>

這樣 Panel 的 div 就變成光桿元素了, 只剩下 id 屬性. 回到 HTML 設定模式, 如果加上 title 屬性, 就可以為 Panel 加上標題列, 如範例 3 所示 :

測試範例 3 : http://tony1966.xyz/test/easyuitest/easyui-panel-3.htm [看原始碼]

  <div class="easyui-panel" title="MyPanel" style="width:300px;height:100px;padding:10px;">
      <p>Hello World!</p>
      <p>Hello World!</p>
      <p>Hello World! Hello World! Hello World! Hello World! Hello World! </p>
  </div>

也可以將內容設為可收合展開, 只要在 data-options 屬性中設定 collapsible:true 即可, 如範例 4 所示 :

測試範例 4 : http://tony1966.xyz/test/easyuitest/easyui-panel-4.htm [看原始碼]

  <div class="easyui-panel" title="MyPanel" style="width:300px;height:100px;padding:10px;" data-options="collapsible:true">
      <p>Hello World!</p>
      <p>Hello World!</p>
      <p>Hello World! Hello World! Hello World! Hello World! Hello World! </p>
  </div>

除了縮合展開鈕, 也可以加上一般視窗常見的關閉 (closable:true), 最大化 (maximizable:true), 最小化 (minimizable:true) 等按鈕如範例 5 所示 :

測試範例 5 : http://tony1966.xyz/test/easyuitest/easyui-panel-5.htm [看原始碼]

  <div class="easyui-panel" title="MyPanel" style="width:300px;height:100px;padding:10px;" data-options="collapsible:true,closable:true,maximizable:true,minimizable:true">
      <p>Hello World!</p>
      <p>Hello World!</p>
      <p>Hello World! Hello World! Hello World! Hello World! Hello World! </p>
  </div>

按關閉鈕會關閉 Panel; 按最大化鈕會使 Panel 佔據整個瀏覽器版面; 但按最小化鈕卻跟關閉鈕一樣, 整個 Panel 不見了, 而不是在左下角或哪裡出現一個圖示, 以便將其放大回去, 這跟一般使用經驗不同. 要達成此效果需利用 onMinimize 事件自行加工, 如下面範例 6 所示 :

測試範例 6 : http://tony1966.xyz/test/easyuitest/easyui-panel-6.htm [看原始碼]

  <div id="panel" class="easyui-panel" title="MyPanel" style="width:300px;height:100px;padding:10px;" data-options="collapsible:true,closable:true,maximizable:true,minimizable:true">
      <p>Hello World!</p>
      <p>Hello World!</p>
      <p>Hello World! Hello World! Hello World! Hello World! Hello World! </p>
  </div>
  <a href="#" class="easyui-linkbutton" id="mini" style="display:none">回復</a>
  <script language="javascript">
    $(document).ready(function(){
      $("#panel").panel({
        onMinimize:function(){    
          $("#mini").css("display","inline");    
          }    
        });
      $("#mini").bind("click",function(){
        $("#mini").css("display","none");
        $("#panel").panel("open");
        });
      });
  </script>

這裡我們放置了一個初始狀態為不顯示 (display:none) 的按鈕, 然後為 Panel 設定 onMinimize 事件之處理函式, 一旦按下最小化鈕, 就會顯示此回復按鈕 (display:inline). 當按下回復按鈕, 此按鈕又變成不顯示, 同時呼叫 open 方法開啟 Panel. 注意, 不知為何, 呼叫 maximize 與 restore 方法無效. 不過, 用 open 是對的, 因為這樣會回到 Panel 被最小化前之狀態.

參考 :

# http://luan.iteye.com/blog/1745458
# CSS樣式教學系列六：visibility hidden V.S. display none

除了標題列右端的按鈕外, 我們也可以用 tools 屬性在標題列的右方放置按鈕 icon, 如範例 7 所示 :

測試範例 7 : http://tony1966.xyz/test/easyuitest/easyui-panel-7.htm [看原始碼]

  <div class="easyui-panel" title="MyPanel" style="width:300px;height:100px;padding:10px;" data-options="tools:'#tools'">
    <p>Hello World!</p>
    <p>Hello World!</p>
    <p>Hello World! Hello World! Hello World! Hello World! Hello World! </p>
  </div>
  <div id="tools">
 <a href="#" id="add" class="icon-add"></a>
 <a href="#" id="edit" class="icon-edit"></a>
  </div>
  <script language="javascript">
    $(document).ready(function(){
      $("#add").bind("click",function(){
        $.messager.alert("Info","add");
        });
      $("#edit").bind("click",function(){
        $.messager.alert("Info","edit");
        });
      });
  </script>

此處我們用兩個連結按鈕來製作工具列, 而且只用圖像, 不用文字, 所以 a 元素無文字內容. 這兩個按鈕用 div 包起來, 給予一個 id, 然後在 Panel 的 data-options 屬性中, 將 tools 屬性指定為此 id, 然後將這兩個按鈕綁定 click 事件處理函式即可.

範例 7 也可以完全用 Javascript 來做, 如下列範例 8 所示 :

測試範例 8 : http://tony1966.xyz/test/easyuitest/easyui-panel-8.htm [看原始碼]

  <div id="panel">
      <p>Hello World!</p>
      <p>Hello World!</p>
      <p>Hello World! Hello World! Hello World! Hello World! Hello World! </p>
  </div>
  <script language="javascript">
    $(document).ready(function(){
      $("#panel").panel({
        width:300,
        height:100,
        title:"MyPanel",
        tools:[{
          iconCls:'icon-add',
          handler:function(){$.messager.alert("Info","add")}},
          {
          iconCls:'icon-edit',
          handler:function(){$.messager.alert("Info","edit")}
          }]
        });
      });
  </script>

此例中工具列用 tools 屬性來設定, 其值為一個按鈕物件陣列, 樣式用 iconCls, 事件處理用 handler 屬性. 效果與範例 7 是一模一樣的.

以上的 Panel 內容都來自網頁本身, 其實, 內容也可以來自後端另一個檔案或程式所提供, 這要用到 href 屬性, 如下面範例 9 所示 :

測試範例 9 : http://tony1966.xyz/test/easyuitest/easyui-panel-9.htm [看原始碼]

  <div id="panel"></div>
  <script language="javascript">
    $(document).ready(function(){
      $("#panel").panel({
        width:300,
        height:100,
        title:"MyPanel",
        href:"helloworld.txt"
        });
      });
  </script>

此例中, Panel 的內容來源為後端伺服器中的檔案 helloworld.txt, 所以需要一點點載入時間, 這時 Panel 內會顯示 "Loading..." 訊息. 這個訊息可以用 loadingMessage 屬性更改. 在下列範例 10 中我們改用 PHP 程式來提供  Panel 的內容 :

測試範例 10 : http://tony1966.xyz/test/easyuitest/easyui-panel-10.htm [看原始碼]

  <div id="panel"></div>
  <script language="javascript">
    $(document).ready(function(){
      $("#panel").panel({
        width:300,
        height:100,
        title:"MyPanel",
        href:"hellosomebody-get.php",
        queryParams:{name:"Tony",surname:"Huang"},
        loadingMessage:"載入中 ... "
        });
      });
  </script>

而後端程式 hellosomebody-get.php 內容如下, Panel 預設是用 GET 方法傳送, 所以我們用 $_GET 即可取得參數 :

<?php
header('Content-Type: text/html;charset=UTF-8');
$name=$_GET["name"];
$surname=$_GET["surname"];
echo "Hello! ".$name." ".$surname."<br>".
         "The time is ".date("Y-m-d H:i:s");
?>

此例中, 我們在後端用 $_GET 取得前端網頁傳來的參數, 所以跟下面的 href 設定效果是一樣的 :

href:"hellosomebody-get.php?name=Tony&surname=Huang"

測試範例 10-1 : http://tony1966.xyz/test/easyuitest/easyui-panel-10-1.htm [看原始碼]

  <div id="panel"></div>
  <script language="javascript">
    $(document).ready(function(){
      $("#panel").panel({
        width:300,
        height:100,
        title:"MyPanel",
        href:"hellosomebody-get.php?name=Tony&surname=Huang",
        loadingMessage:"載入中 ... "
        });
      });
  </script>

在範例 10-1 中, 我們取消了 queryParams 屬性, 把參數直接放在 href 裡, 效果是一樣的. 其實有一個 method 屬性可以用來指定 http 傳送方法. 在下面範例 10-2 中, 我們指定用 post 方法傳送, 所以必須使用 queryParams 屬性 :

測試範例 10-2 : http://tony1966.xyz/test/easyuitest/easyui-panel-10-2.htm [看原始碼]

  <div id="panel"></div>
  <script language="javascript">
    $(document).ready(function(){
      $("#panel").panel({
        width:300,
        height:100,
        title:"MyPanel",
        href:"hellosomebody-post.php",
        method:"post",
        queryParams:{name:"Tony",surname:"Huang"},
        loadingMessage:"載入中 ... "
        });
      });
  </script>

後端程式須用 $_POST 或 $_REQUEST 擷取參數 :

<?php
header('Content-Type: text/html;charset=UTF-8');
$name=$_POST["name"];
$surname=$_POST["surname"];
echo "Hello! ".$name." ".$surname."<br>".
         "The time is ".date("Y-m-d H:i:s");
?>

除此之外,還可以用 extractor 屬性來擷取 Ajax 回應訊息中的部分內容, 下列範例 11 即從後端回應訊息中篩選出姓名 :

測試範例 11 : http://tony1966.xyz/test/easyuitest/easyui-panel-11.htm [看原始碼]

  <div id="panel"></div>
  <script language="javascript">
    $(document).ready(function(){
      $("#panel").panel({
        width:300,
        height:100,
        title:"MyPanel",
        href:"hellosomebody-post.php",
        method:"post",
        queryParams:{name:"Tony",surname:"Huang"},
        extractor:function(data){
          var pattern=/Hello! ((.)*)The/;
          var matches=pattern.exec(data);
          if (matches){return matches[1];} 
          else {return data;}
          },
        loadingMessage:"載入中 ... "
        });
      });
  </script>

此例中, 我們目的是要擷取 "Hello! " 與下一列的 "The" 之間的姓名, 所以使用正規表達式 /Hello! ((.)*)The/, 若有符合就傳回擷取到的姓名, 否則就傳回全部 Ajax 回應訊息.

OK, 以上便是 Panel 的測試.