xmlplus組件設(shè)計(jì)之按鈕的示例分析-創(chuàng)新互聯(lián)
這篇文章主要介紹xmlplus組件設(shè)計(jì)之按鈕的示例分析，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！
揚(yáng)中ssl適用于網(wǎng)站、小程序/APP、API接口等需要進(jìn)行數(shù)據(jù)傳輸應(yīng)用場景，ssl證書未來市場廣闊！成為
創(chuàng)新互聯(lián)的ssl證書銷售渠道，可以享受市場價(jià)格4-6折優(yōu)惠！如果有意向歡迎電話聯(lián)系或者加微信：13518219792（備注：SSL證書合作）期待與您的合作！
除了圖標(biāo)以外，按鈕也許是最簡單的組件了，現(xiàn)在來看看如何定義按鈕組件。
使用原生按鈕組件
在 xmlplus 中，HTML 元素也以組件的方式存在。所以，你可以直接通過使用 button 標(biāo)簽或者 input 標(biāo)簽來使用按鈕組件。如下示例所示：
Example: {
xml: "\
\
Primary\
"
}
雖然原生按鈕外觀不那么吸引人，但原生按鈕未經(jīng)特殊包裝，所以渲染起來最快，執(zhí)行效率最高。
使用 Bootstrap 樣式的按鈕
如果你的項(xiàng)目在視覺上沒有特別要求的話。使用 Bootstrap 樣式來定義按鈕組件是一個(gè)好主意。按傳統(tǒng)方式使用 Bootstrap 按扭，你需要像下面這樣使用。
Default
Primary
Success
請認(rèn)真觀察，你是不是覺得它給你的比你要求的要多。你不但發(fā)現(xiàn)了好多的 type=button，還發(fā)現(xiàn)了好多的 btn?，F(xiàn)在下面給出一個(gè)組件，它基于 Bootstrap 樣式，但它明顯地簡化了按鈕的使用方式。
Button: {
xml: "",
fun: function (sys, items, opts) {
this.addClass("btn-" + opts.type);
}
}此按鈕組件封裝了原始按鈕需要重復(fù)書寫的內(nèi)容，在使用時(shí)，僅需提供 type 屬性即可指明目標(biāo)按鈕，使用起來更為便捷。下面給出的是新按鈕組件的使用方式。
Default
Primary
Success
帶有圖標(biāo)的按鈕
按鈕上除了文字外，還可以附帶圖標(biāo)。合適的圖標(biāo)可以使按扭的使用意圖更加生動直觀。這里以 EasyUI 的圖標(biāo)按鈕為例來說明如何封裝并使用圖標(biāo)按鈕。我們首先來看看，EasyUI 圖標(biāo)按鈕的原始使用方式。
Add
Remove
Save
與上一節(jié)對 Bootstrap 按鈕的封裝類似，通過觀察提煉出重復(fù)出現(xiàn)的部分，將變化的部分以接口形式展現(xiàn)。上面的按鈕僅圖標(biāo)類型名和文本是可變的，所以我們可以做出如下的設(shè)計(jì)：
Button: {
xml: "",
fun: function (sys, items, opts) {
this.attr("data-options" + "iconCls:'icon-" + opts.type);
}
}下面是新圖標(biāo)的使用方式，它明顯比原始的使用方式簡潔多了。
Add
Reomve
Save
Cut
使用類似 Bootstrap, EasyUI 等開源框架，可以避免重造輪子。然而，當(dāng)這些開源項(xiàng)目無法滿足你的需求時(shí)，你就需要自己動手了。
為簡單起見，現(xiàn)在假定上述 Bootstrap 框架并不存在，那么如何設(shè)計(jì)一套上述的按鈕？這樣的實(shí)踐是非常有意義的，它有助于你舉一反三。
現(xiàn)在讓我們重新對上面的按鈕組件作觀察。你會發(fā)現(xiàn)，Bootstrap 設(shè)計(jì)了一些可以組合的樣式類，其中 btn 是每一個(gè)按鈕都需要的，另外像 btn-default、btn-primary 等等都根據(jù)需要與 btn 形成組合樣式類。好了，根據(jù)這個(gè)思路，我們就可以設(shè)計(jì)出如下的組件框架。
上述的設(shè)計(jì)思路與前面直接使用 Bootstrap 樣式定義按鈕不同點(diǎn)在于，前者已經(jīng)為你定義好了各個(gè)全局的樣式類，你只需要直接引用就可以了。而此處你需要在按扭組件內(nèi)部自行定義相關(guān)樣式類。從封裝的角度看，后者的內(nèi)聚性要強(qiáng)于前者，因?yàn)樗⒉槐┞度诸惷?。下面是該組件的使用示例。
以上是“xmlplus組件設(shè)計(jì)之按鈕的示例分析”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對大家有幫助，更多相關(guān)知識，歡迎關(guān)注創(chuàng)新互聯(lián)網(wǎng)站建設(shè)公司行業(yè)資訊頻道！
重慶分公司
重慶分公司
