2014年11月12日 星期三

jQuery EasyUI 測試 : LinkButton 連結按鈕

jQuery EasyUI 的連結按鈕在之前幾個測試範例中已經用過好幾次了, 這裡做個較完整的整理.

LinkButton 的說明文件參見 :

# LinkButton Document
# LinkButton Demo
# 菜單與按鈕

連結按鈕可以使用三種 HTML 元素來做, 只要給予 easyui-linkbutton 這個樣式類別即可 :

  1. 超連結元素 A 
  2. 表單元素 INPUT
  3. 表單元素 BUTTON 

如下列範例 1 所示 :

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

  <a href="#" id="btn1" class="easyui-linkbutton">A 連結按鈕</a>
  <input type="button" id="btn2" class="easyui-linkbutton" value="INPUT 連結按鈕">
  <button id="btn3" class="easyui-linkbutton">BUTTON 連結按鈕</button>


此處我們用 jQuery 的 bind() 方法為每一個按鈕綁定了 click 按鈕的動作事件處理函式. 可見用 input 元素的話, 按鈕外框與文字間隙太小, 需另外設定樣式, 比較麻煩. 建議都使用 A 元素來做連結按鈕, 注意其 href 屬性必須設為 # 以取消連結動作.

事實上 EasyUI 提供了許多常用的附圖按鈕, 只要在 HTML5 的 data-options 屬性中指定特定之 iconCls 參數即可, 例如新增按鈕 :

<a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-add'">新增</a>

這些按鈕上的圖檔可在 EasyUI 解壓縮目錄 jquery-easyui-1.4\themes\icons 下找到, 其樣式類別名稱如下 :
  1. icon-add : 新增
  2. icon-back : 返回
  3. icon-cancel : 取消
  4. icon-clear : 清除
  5. icon-cut : 剪下
  6. icon-edit : 編輯
  7. icon-filter : 過濾
  8. icon-help : 協助
  9. icon-lock : 密碼, 鎖定
  10. icon-no : 否
  11. icon-ok : 是
  12. icon-print : 列印
  13. icon-redo : 重做
  14. icon-reload : 重新載入
  15. icon-remove : 刪除
  16. icon-save : 儲存
  17. icon-search : 搜尋

下面範例 2 即展示了這 17 個常用的圖示按鈕 :

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

  <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-add'">Add</a>
  <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-back'">Back</a>
  <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-cancel'">Cancel</a>
  <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-clear'">Clear</a>
  <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-cut'">Cut</a>
  <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-edit'">Edit</a>
  <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-filter'">Filter</a>
  <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-help'">Help</a>
  <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-lock'">Lock</a><br><br>
  <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-no'">No</a>
  <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-ok'">Ok</a>
  <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-print'">Print</a>
  <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-redo'">Redo</a>
  <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-reload'">Reload</a>
  <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-remove'">Remove</a>
  <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-save'">Save</a>
  <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-search'">Search</a>


除了使用 HTML5 的 data-options 屬性外, 還可以用 Javascript 來初始化連結按鈕, 只要呼叫 linkbutton() 方法, 並將參數以物件實體傳入即可, 這時 data-options 就不須設定了, 只要給個 id 以便 Javascript 操作即可, 如下列範例 3 所示  :

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

  <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-add'">Add</a>
  <a href="#" id="BtnBack">Back</a>
  <script language="javascript">
    $(document).ready(function(){
      $("#BtnBack").linkbutton({
        iconCls:"icon-back"
        });
      });
  </script>

連結按鈕中的圖像預設是在左方, 這可以利用 iconAlign 屬性來指定其值為 top/bottom/left/right, 如下範例 4 所示 :

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

  <a href="#" id="btn-top">top</a>
  <a href="#" id="btn-bottom">bottom</a>
  <a href="#" id="btn-left">left</a>
  <a href="#" id="btn-right">right</a>
  <script language="javascript">
    $(document).ready(function(){
      $("#btn-top").linkbutton({
        iconCls:"icon-add",
        toggle:true,
        iconAlign:"top"
        });
      $("#btn-bottom").linkbutton({
        iconCls:"icon-add",
        toggle:true,
        iconAlign:"bottom"
        });
      $("#btn-left").linkbutton({
        iconCls:"icon-add",
        toggle:true,
        iconAlign:"left"
        });
      $("#btn-right").linkbutton({
        iconCls:"icon-add",
        toggle:true,
        iconAlign:"right"
        });
      });
  </script>


此例展示了四個方位的圖像, 同時也測試了 toggle 屬性, 當其設為 true 時 (預設 false), 按一下其底色會變暗, 表示被選擇 (selected), 再按一下又會恢復, 如此交替變化.

如果不需要顯示按鈕外框的話, 可以將 plain 屬性設為 true, 如下面範例 5 所示 :

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

      $("#btn-top").linkbutton({
        iconCls:"icon-add",
        plain:true,
        toggle:true,
        iconAlign:"top"
        });


雖說沒了外框, 但當滑鼠移到按鈕上面時, 還是會出現外框的. 接著來測試兩個狀態屬性 selected (被按下去) 與 disabled (禁止狀態無法被按).

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

  <a href="#" id="btn-top">top</a>
  <a href="#" id="btn-bottom">bottom</a>
  <a href="#" id="btn-left">left</a>
  <a href="#" id="btn-right">right</a>
  <script language="javascript">
    $(document).ready(function(){
      $("#btn-top").linkbutton({
        iconCls:"icon-add",
        disabled:true,
        toggle:true,
        iconAlign:"top"
        });
      $("#btn-bottom").linkbutton({
        iconCls:"icon-add",
        disabled:true,
        toggle:true,
        iconAlign:"bottom"
        });
      $("#btn-left").linkbutton({
        iconCls:"icon-add",
        toggle:true,
        iconAlign:"left"
        });
      $("#btn-right").linkbutton({
        iconCls:"icon-add",
        selected:true,
        toggle:true,
        iconAlign:"right"
        });
      });
  </script>


可見前兩個按鈕因為 disabled 設為 true, 所以不能按, 而最後一個按鈕的 selected 設為 true, 所以預設是被按下的狀態. 

禁止狀態也可以動態控制, 只要在 linkbutton() 方法中傳入 "disable" 即可, 反之, 若要讓被禁止的按鈕致能, 就傳入 "enable". 在下列範例 7 中, 我們為按鈕 btn-save 綁定 click 單擊事件使自己失能, 綁定 dblclick 雙擊事件使自己致能 :

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

  <a href="#" id="btn-save">Save</a>
  <script language="javascript">
    $(document).ready(function(){
      $("#btn-save").linkbutton({
        iconCls:"icon-save"
        });
      $("#btn-save").bind("click",function(){
        $("#btn-save").linkbutton("disable");
        });
      $("#btn-save").bind("dblclick",function(){
        $("#btn-save").linkbutton("enable");
        });
      });
  </script>

同樣地, 按下 (select) 與彈起 (unselect) 兩種狀態也是可以分別傳入 "select" 與 "unselect" 加以控制的, 如下列範例 8 所示 :

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

  <a href="#" id="btn-save">Save</a>
  <script language="javascript">
    $(document).ready(function(){
      $("#btn-save").linkbutton({
        iconCls:"icon-save"
        });
      $("#btn-save").bind("click",function(){
        $("#btn-save").linkbutton("select");
        });
      $("#btn-save").bind("dblclick",function(){
        $("#btn-save").linkbutton("unselect");
        });
      });
  </script>

可見, 按一下按鈕底色變深色, 即被選擇狀態; 雙擊就恢復為未選擇狀態. 注意, 雙擊 dblclick 雖然在文件中沒有提到, 但是還是可以用的.

連結按鈕可以用 text, width, 與 height 設定其文字與尺寸, 也可以動態地加以改變, 如下列範例 9 所示 :

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

  <a href="#" id="btn">Save</a>
  <script language="javascript">
    $(document).ready(function(){
      var count=0;
      $("#btn").linkbutton({
        text:"<span style='font-weight:bold'>請按我</span>",
        width:180,
        height:80
        });
      $("#btn").bind("click",function(){
        var text="<span style='font-size:22px'>你已按了 " +
                 ++count + " 下</span>";
        $("#btn").linkbutton({text:text,width:250,height:100});
        });
      });
  </script>


上例中我們為按鈕綁定 click 事件, 並在處理函式中更改按鈕文字與大小. 要注意的是, width 與 height 基本上都是數值 (單位 px), 但也可以是字串, 例如附上單位 px, 例如 width:"250px", 或者用全頁面的百分比, 例如 width:"100%", 這些都是可以的, 只是必須改為字串.

接下來要測試 options 這個方法, 它會傳回儲存 linkbutton 所有成員的物件, 所以可以用 for in 迴圈來掃描, 如下列範例 10 所示 :

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

  <a href="#" id="btn-save">Save</a>
  <script language="javascript">
    $(document).ready(function(){
      $("#btn-save").linkbutton({
        iconCls:"icon-save"
        });
      $("#btn-save").bind("click",function(){
        var opt=$("#btn-save").linkbutton("options");
        var msg="";
        for (var key in opt) {
          msg += key + ":" + opt[key] + "\r\n";
          }
        alert(msg);
        });
      });
  </script>


可見 linkbutton 真的只有一個 click 事件而已. 連結按鈕還有一個跟尺寸有關的屬性 size, 其值為字串 "large" 與 "small", 如下列範例 11 所示 :

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

  <a href="#" id="btn-save">變大</a>
  <script language="javascript">
    $(document).ready(function(){
      var count=0;
      $("#btn-save").linkbutton({iconCls:"icon-save"});
      $("#btn-save").bind("click",function(){
        var opt=$("#btn-save").linkbutton("options");
        if (opt.text=="變大"){
          $("#btn-save").linkbutton({text:"變小",size:"large"});
          }
        else {
          $("#btn-save").linkbutton({text:"變大",size:"small"});
          }
        });
      });
  </script>


此例中我們用到上面範例 10 的 options 方法, 以便讀取按鈕目前的狀態, 即其 text 屬性值是變大或變小來決定現在要採取的動作.

最後來測試也是跟按鈕尺寸有關的方法 resize, 其參數是 width 與 height 構成的物件, 我們將上例稍加修改為下面的範例 12 :

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

  <a href="#" id="btn-save">變大</a>
  <script language="javascript">
    $(document).ready(function(){
      var count=0;
      $("#btn-save").linkbutton({iconCls:"icon-save"});
      $("#btn-save").bind("click",function(){
        var opt=$("#btn-save").linkbutton("options");
        if (opt.text=="變大"){
          $("#btn-save").linkbutton({text:"變小"});
          $("#btn-save").linkbutton("resize",{width:"80%",height:300});
          }
        else {
          $("#btn-save").linkbutton({text:"變大"});
          $("#btn-save").linkbutton("resize",{width:"30%",height:100});
          }
        });
      });
  </script>

OK, 連結按鈕測試完成.


沒有留言 :