除了圖標以外，按鈕也許是最簡單的組件了，現在來看看如何定義按鈕組件。
使用原生按鈕組件
在 xmlplus 中，HTML 元素也以組件的方式存在。所以，你可以直接通過使用 button 標簽或者 input 標簽來使用按鈕組件。如下示例所示：
Example: { xml: "<div id='example'>/ <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 樣式，但它明顯地簡化了按鈕的使用方式。
Button: { xml: "<button type='button' class='btn'/>", fun: function (sys, items, opts) { this.addClass("btn-" + opts.type); }}此按鈕組件封裝了原始按鈕需要重復書寫的內容，在使用時，僅需提供 type 屬性即可指明目標按鈕，使用起來更為便捷。下面給出的是新按鈕組件的使用方式。
<Button type='default'>Default</Button><Button type='primary'>Primary</Button><Button type='success'>Success</Button>
帶有圖標的按鈕
按鈕上除了文字外，還可以附帶圖標。合適的圖標可以使按扭的使用意圖更加生動直觀。這里以 EasyUI 的圖標按鈕為例來說明如何封裝并使用圖標按鈕。我們首先來看看，EasyUI 圖標按鈕的原始使用方式。
<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>
與上一節對 Bootstrap 按鈕的封裝類似，通過觀察提煉出重復出現的部分，將變化的部分以接口形式展現。上面的按鈕僅圖標類型名和文本是可變的，所以我們可以做出如下的設計：
Button: { xml: "<a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="easyui-linkbutton"/>", fun: function (sys, items, opts) { this.attr("data-options" + "iconCls:'icon-" + opts.type); }}下面是新圖標的使用方式，它明顯比原始的使用方式簡潔多了。
<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 形成組合樣式類。好了，根據這個思路，我們就可以設計出如下的組件框架。
Button: { css: "#btn { 這里是按鈕基本的樣式 }/ #default { 這里是default樣式 }/ #primary { 這里是primary樣式 }", xml: "<button type='button'/>", fun: function (sys, items, opts) { this.addClass("#btn #" + opts.type, this); }}上述的設計思路與前面直接使用 Bootstrap 樣式定義按鈕不同點在于，前者已經為你定義好了各個全局的樣式類，你只需要直接引用就可以了。而此處你需要在按扭組件內部自行定義相關樣式類。從封裝的角度看，后者的內聚性要強于前者，因為它并不暴露全局類名。下面是該組件的使用示例。
Example: { xml: "<div id='example'>/ <Button type='default'>Default</Button>/ <Button type='primary'>Primary</Button>/ <Button type='success'>Success</Button>/ </div>"}注意，為了簡化起見，這里的自定義按鈕組件略去了 hover、active 樣式，所以與 Bootstrap 按鈕有些不一樣。
本系列文章基于 xmlplus 框架。如果你對 xmlplus 沒有多少了解，可以訪問 www.xmlplus.cn。這里有詳盡的入門文檔可供參考。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持VeVb武林網。
新聞熱點
疑難解答
