除了圖標(biāo)以外，按鈕也許是最簡單的組件了，現(xiàn)在來看看如何定義按鈕組件。

使用原生按鈕組件

在 xmlplus 中，HTML 元素也以組件的方式存在。所以，你可以直接通過使用 button 標(biāo)簽或者 input 標(biāo)簽來使用按鈕組件。如下示例所示：

Example: {  xml: "<div id='example'>/       <button>Default</button>/       <input type='submit'>Primary</input>/     </div>"}

雖然原生按鈕外觀不那么吸引人，但原生按鈕未經(jīng)特殊包裝，所以渲染起來最快，執(zhí)行效率最高。

使用 Bootstrap 樣式的按鈕

如果你的項(xiàng)目在視覺上沒有特別要求的話。使用 Bootstrap 樣式來定義按鈕組件是一個(gè)好主意。按傳統(tǒng)方式使用 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>

請(qǐng)認(rèn)真觀察，你是不是覺得它給你的比你要求的要多。你不但發(fā)現(xiàn)了好多的 type=button，還發(fā)現(xiàn)了好多的 btn。現(xiàn)在下面給出一個(gè)組件，它基于 Bootstrap 樣式，但它明顯地簡化了按鈕的使用方式。

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

此按鈕組件封裝了原始按鈕需要重復(fù)書寫的內(nèi)容，在使用時(shí)，僅需提供 type 屬性即可指明目標(biāo)按鈕，使用起來更為便捷。下面給出的是新按鈕組件的使用方式。

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

帶有圖標(biāo)的按鈕

按鈕上除了文字外，還可以附帶圖標(biāo)。合適的圖標(biāo)可以使按扭的使用意圖更加生動(dòng)直觀。這里以 EasyUI 的圖標(biāo)按鈕為例來說明如何封裝并使用圖標(biāo)按鈕。我們首先來看看，EasyUI 圖標(biāo)按鈕的原始使用方式。

<div style="padding:5px 0;">  <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="easyui-linkbutton" data-options="iconCls:'icon-add'">Add</a>  <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="easyui-linkbutton" data-options="iconCls:'icon-remove'">Remove</a>  <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="easyui-linkbutton" data-options="iconCls:'icon-save'">Save</a></div>

與上一節(jié)對(duì) Bootstrap 按鈕的封裝類似，通過觀察提煉出重復(fù)出現(xiàn)的部分，將變化的部分以接口形式展現(xiàn)。上面的按鈕僅圖標(biāo)類型名和文本是可變的，所以我們可以做出如下的設(shè)計(jì)：