xmlplus 組件設計系列之二 - 按鈕（Button）

按鈕

除了圖標組件之外，按鈕也許是最簡單的組件了，這章就來看看如何定義按鈕組件。

<img src="http://xmlplus.cn/img/button.png" class="img-responsive"/>

使用原生按鈕組件

在 xmlplus 中，HTML 元素也以組件的方式存在。因此，你能夠直接經過使用 button 標籤或者 input 標籤來使用按鈕組件。以下面的示例所示：

// 02-01
Index: {
    xml: `<div id='index'>
              <button>Default</button>
              <input type='submit'>Primary</input>
         </div>`
}

雖然原生按鈕外觀不那麼吸引人，但原生按鈕未經特殊包裝，因此渲染起來最快，執行效率最高。

使用 Bootstrap 樣式的按鈕

若是你的項目在視覺上沒有特別要求的話，使用 Bootstrap 樣式來定義按鈕組件是一個好主意。按傳統方式使用 Bootstrap 按扭，你須要像下面這樣使用：

<button type="button" class="btn btn-default">Default</button>
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-success">Success</button>

請認真觀察，你是否是以爲它給你的比你要求的要多。你不但發現了好多的 type=button，還發現了好多的 btn。如今下面給出一個組件，它基於 Bootstrap 樣式，但它明顯地簡化了按鈕的使用方式。

// 02-02
Button: {
    xml: "<button type='button' class='btn'/>",
    fun: function (sys, items, opts) {
        this.addClass("btn-" + opts.type);
    }
}

此按鈕組件封裝了原始按鈕須要重複書寫的內容，在使用時，僅需提供 type 屬性便可指明要生成的目標按鈕，使用起來更爲便捷。下面給出的是新定義的按鈕組件的使用方式。

<!-- 02-02 -->
<Button type='default'>Default</Button>
<Button type='primary'>Primary</Button>
<Button type='success'>Success</Button>

帶有圖標的按鈕

按鈕上除了文字外，還能夠附帶圖標。合適的圖標可使按扭的使用意圖更加生動直觀。這裏以 EasyUI 的圖標按鈕爲例來講明如何封裝並使用圖標按鈕。咱們首先來看看，EasyUI 圖標按鈕的原始使用方式。

<div style="padding:5px 0;">
    <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-add'">Add</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>
</div>

與上一節對 Bootstrap 按鈕的封裝相似，經過觀察提煉出重複出現的部分，將變化的部分以接口形式展示。上面的按鈕僅圖標類型名和文本是可變的，因此咱們能夠作出以下的設計：

// 02-03
Button: {
    xml: "<a href="#" class="easyui-linkbutton"/>",
    fun: function (sys, items, opts) {
        this.attr("data-options", "iconCls:'icon-" + opts.type + "'");
        $(this.elem()).linkbutton();
    }
}

請注意該組件的函數項，因爲這裏的因此 HTML 元素都是動態生成的，因此須要使用函數 linkbutton 動態對按鈕進行渲染，而不能期望 easyui 幫你自動幫你完成。下面是新圖標的使用方式，它明顯比原始的使用方式簡潔多了。

<!-- 02-03 -->
<div style="padding:5px 0;">
    <Button type='add'>Add</Button>
    <Button type='remove'>Reomve</Button>
    <Button type='save'>Save</Button>
    <Button type='cut'>Cut</Button>
</div>

自定義按鈕組件

使用相似 Bootstrap, EasyUI 等現成的開源框架，能夠很是方便使用按鈕。然而，當這些開源項目沒法知足你的需求時，你就須要本身動手了。爲簡單起見，如今假定上述框架並不存在，那麼如何設計一套具備 Bootstrap 樣式的按鈕呢？這樣的實踐是很是有意義的，它有助於你觸類旁通。

如今讓咱們從新對上面的按鈕組件做觀察。你會發現，Bootstrap 設計了一些能夠組合的樣式類，其中 btn 是每個按鈕都須要的，另外像 btn-default、btn-primary 以及btn-success 等等都根據須要與 btn 造成組合樣式類。好了，根據這個思路，咱們就能夠設計出以下的組件框架。

// 02-04
Button: {
    css: `#button { 這裏是按鈕基本的樣式 }
          #default { 這裏是 default 樣式 }
          #primary { 這裏是 primary 樣式 }
          #success { 這裏是 success 樣式 }`,
    xml: "<button type='button'/>",
    fun: function (sys, items, opts) {
        this.addClass("#" + opts.type, this);
    }
}

上述的設計思路與前面直接使用 Bootstrap 樣式定義按鈕不一樣點在於，前者已經爲你定義好了各個全局的樣式類，你只須要直接引用就能夠了。而此處你須要在按扭組件內部自行定義相關樣式類。從封裝的角度看，後者的內聚性要強於前者，由於它並不暴露全局類名。注意，爲了簡化起見，這裏的自定義按鈕組件略去了 hover、active 樣式，因此與 Bootstrap 按鈕有些不同。下面是該按鈕組件的使用示例。固然，它與前面封裝的 Bootstrap 按鈕的使用示例沒什麼不一樣。

<!-- 02-04 -->
<Button type='default'>Default</Button>
<Button type='primary'>Primary</Button>
<Button type='success'>Success</Button>

另外，切記一點，儘可能避免定義功能大而雜的按鈕組件。固然，定義其它類型的組件也是同樣的。輕量、按需、足夠使用就好。