這篇文章主要介紹xmlplus組件設(shè)計(jì)之按鈕的示例分析，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！

成都創(chuàng)新互聯(lián)-專(zhuān)業(yè)網(wǎng)站定制、快速模板網(wǎng)站建設(shè)、高性價(jià)比石林網(wǎng)站開(kāi)發(fā)、企業(yè)建站全套包干低至880元,成熟完善的模板庫(kù),直接使用。一站式石林網(wǎng)站制作公司更省心,省錢(qián),快速模板網(wǎng)站建設(shè)找我們，業(yè)務(wù)覆蓋石林地區(qū)。費(fèi)用合理售后完善，10余年實(shí)體公司更值得信賴。

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

使用原生按鈕組件

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

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

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

使用 Bootstrap 樣式的按鈕

如果你的項(xiàng)目在視覺(jué)上沒(méi)有特別要求的話。使用 Bootstrap 樣式來(lái)定義按鈕組件是一個(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)真觀察，你是不是覺(jué)得它給你的比你要求的要多。你不但發(fā)現(xiàn)了好多的 type=button，還發(fā)現(xiàn)了好多的 btn?，F(xiàn)在下面給出一個(gè)組件，它基于 Bootstrap 樣式，但它明顯地簡(jiǎn)化了按鈕的使用方式。

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

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

<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)按鈕為例來(lái)說(shuō)明如何封裝并使用圖標(biāo)按鈕。我們首先來(lái)看看，EasyUI 圖標(biāo)按鈕的原始使用方式。

<div >
  <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 按鈕的封裝類(lèi)似，通過(guò)觀察提煉出重復(fù)出現(xiàn)的部分，將變化的部分以接口形式展現(xiàn)。上面的按鈕僅圖標(biāo)類(lèi)型名和文本是可變的，所以我們可以做出如下的設(shè)計(jì)：

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);
  }
}

下面是新圖標(biāo)的使用方式，它明顯比原始的使用方式簡(jiǎn)潔多了。

<div >
  <Button type='add'>Add</Button>
  <Button type='remove'>Reomve</Button>
  <Button type='save'>Save</Button>
  <Button type='cut'>Cut</Button>
</div>

自定義你的按鈕組件

使用類(lèi)似 Bootstrap, EasyUI 等開(kāi)源框架，可以避免重造輪子。然而，當(dāng)這些開(kāi)源項(xiàng)目無(wú)法滿足你的需求時(shí)，你就需要自己動(dòng)手了。

為簡(jiǎn)單起見(jiàn)，現(xiàn)在假定上述 Bootstrap 框架并不存在，那么如何設(shè)計(jì)一套上述的按鈕？這樣的實(shí)踐是非常有意義的，它有助于你舉一反三。

現(xiàn)在讓我們重新對(duì)上面的按鈕組件作觀察。你會(huì)發(fā)現(xiàn)，Bootstrap 設(shè)計(jì)了一些可以組合的樣式類(lèi)，其中 btn 是每一個(gè)按鈕都需要的，另外像 btn-default、btn-primary 等等都根據(jù)需要與 btn 形成組合樣式類(lèi)。好了，根據(jù)這個(gè)思路，我們就可以設(shè)計(jì)出如下的組件框架。

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

上述的設(shè)計(jì)思路與前面直接使用 Bootstrap 樣式定義按鈕不同點(diǎn)在于，前者已經(jīng)為你定義好了各個(gè)全局的樣式類(lèi)，你只需要直接引用就可以了。而此處你需要在按扭組件內(nèi)部自行定義相關(guān)樣式類(lèi)。從封裝的角度看，后者的內(nèi)聚性要強(qiáng)于前者，因?yàn)樗⒉槐┞度诸?lèi)名。下面是該組件的使用示例。

Example: {
  xml: "<div id='example'>\
       <Button type='default'>Default</Button>\
       <Button type='primary'>Primary</Button>\
       <Button type='success'>Success</Button>\
     </div>"
}

注意，為了簡(jiǎn)化起見(jiàn)，這里的自定義按鈕組件略去了 hover、active 樣式，所以與 Bootstrap 按鈕有些不一樣。

以上是“xmlplus組件設(shè)計(jì)之按鈕的示例分析”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對(duì)大家有幫助，更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

新聞名稱：xmlplus組件設(shè)計(jì)之按鈕的示例分析
URL地址：http://www.rwnh.cn/article14/psgpge.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供虛擬主機(jī)、網(wǎng)站改版、、外貿(mào)網(wǎng)站建設(shè)、營(yíng)銷(xiāo)型網(wǎng)站建設(shè)、品牌網(wǎng)站制作

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)