jQuery – Zeroplex 生活隨筆

之前提到用 jQuery 的 clone() 複製一列表格，再用 text() 修改該列的文字內容，但這個方法會經過多次 DOM 處理，效率不高。

經過阿育推薦後，發現 jQuery.tmpl() 樣板引擎還不賴，用起來不難且程式碼看起來會乾淨很多。

先定義表格一列的樣板：

<table id="target-table"> </table>

<script type="text/x-jquery-tmpl" id="row-template">
  <tr>
    <td>${name}</td>
    <td>${comment}</td>
  </tr>
</script>

在樣板中文字內容的位置使用 ${VARIABLE} 取代，tmpl() 會解析樣板內容並將資料填入。

接著透過 tmpl() 處理新增一列至表格最後方：

var data = {
   name: 'zeroplex',
   comment: 'some text'
};

$.tmpl( $('#row-template').html(), data)
    .insertAfter('#target-table > tbody > tr:last');

tmpl() 會自動將第二個傳入的參數對應到樣板變數，data.name 會被帶入 ${name}、data..comment 被帶入 ${comment}，最後將處理完畢的資料放入原始頁面中。

Reference:.tmpl() – jQuery API
http://api.jquery.com/tmpl/

初學 jQuery 第一個感想就是 selector 非常好用，加上 effects 功能後，可以說是懶人的一大福音。

在 effects 中有看到 slide down / up，區塊會上下滑動，但沒看到左右滑動的，所以自己試著刻一個。

<style>
#box {
   width: 200px;
   display:  inline;
}
</style>

$('#box').animate(   {
      width: '0px',
      display: 'none'
   } , 'slow'  };

不過發現 box 不會消失，用開發人員工具去看 display 屬性沒有被改變。後來看了文件才發現是自己耍蠢。

jQuery 建立動畫特效的方式，是依照 duration 以及物件屬性的數字差，並在固定時間間隔對屬性的數值做遞增、遞減，是「數值」遞增、遞減，display 屬性值並非數字，所以 jQuery 沒辦法處理。

ps. 用了 jQuery 以後就不會寫 Javascript 了 …. Orz

標籤: jQuery

jQuery.tmpl

animate on jQuery