JavaScript框架（xmlplus）元件的介紹（二）按鈕-js教程-PHP中文網

JavaScript框架（xmlplus）元件的介紹（二）按鈕

零下一度

發布： 2017-05-04 10:21:21

原創

1075 人瀏覽過

xmlplus 是一個JavaScript 框架，用於快速開發前後端專案。這篇文章主要介紹了xmlplus元件設計系列之按鈕，具有一定的參考價值，有興趣的小夥伴們可以參考一下

除了圖示以外，按鈕也許是最簡單的元件了，現在來看看如何定義按鈕組件。

使用原生按鈕元件

在 xmlplus 中，HTML 元素也以元件的方式存在。所以，你可以直接透過使用 button 標籤或 input 標籤來使用按鈕元件。如下範例所示：

Example: {
  xml: "<p id=&#39;example&#39;>\
       <button>Default</button>\
       <input type=&#39;submit&#39;>Primary</input>\
     </p>"
}

登入後複製

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

使用 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=&#39;button&#39; class=&#39;btn&#39;/>",
  fun: function (sys, items, opts) {
    this.addClass("btn-" + opts.type);
  }
}

登入後複製

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

<Button type=&#39;default&#39;>Default</Button>
<Button type=&#39;primary&#39;>Primary</Button>
<Button type=&#39;success&#39;>Success</Button>

登入後複製

有圖示的按鈕

按鈕上除了文字外，還可以附帶圖示。合適的圖示可以使按扭的使用意圖更加生動直觀。這裡以 EasyUI 的圖示按鈕為例來說明如何封裝並使用圖示按鈕。讓我們先來看看，EasyUI 圖示按鈕的原始使用方式。

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

登入後複製

與上一節對 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:&#39;icon-" + opts.type);
  }
}

登入後複製

下面是新圖示的使用方式，它明顯比原始的使用方式簡潔多了。

<p style="padding:5px 0;">
  <Button type=&#39;add&#39;>Add</Button>
  <Button type=&#39;remove&#39;>Reomve</Button>
  <Button type=&#39;save&#39;>Save</Button>
  <Button type=&#39;cut&#39;>Cut</Button>
</p>

登入後複製

自訂你的按鈕元件

使用類似 Bootstrap, EasyUI 等開源框架，可以避免重造輪子。然而，當這些開源專案無法滿足你的需求時，你就需要自己動手了。

為簡單起見，現在假定上述 Bootstrap 框架並不存在，那麼如何設計一套上述的按鈕？這樣的實踐是非常有意義的，它有助於你舉一反三。

現在讓我們重新對上面的按鈕元件作觀察。你會發現，Bootstrap 設計了一些可以組合的樣式類，其中 btn 是每個按鈕都需要的，另外像 btn-default、btn-primary 等等都根據需要與 btn 形成組合樣式類。好了，根據這個思路，我們就可以設計出如下的元件框架。

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

登入後複製

上述的設計思路與前面直接使用Bootstrap 樣式定義按鈕不同點在於，前者已經為你定義好了各個全局的樣式類，你只需要直接引用就可以了。而這裡你需要在按扭組件內部自行定義相關樣式類別。從封裝的角度來看，後者的內聚性要強於前者，因為它並不會暴露全域類別名稱。下面是該元件的使用範例。

Example: {
  xml: "<p id=&#39;example&#39;>\
       <Button type=&#39;default&#39;>Default</Button>\
       <Button type=&#39;primary&#39;>Primary</Button>\
       <Button type=&#39;success&#39;>Success</Button>\
     </p>"
}

登入後複製

注意，為了簡化起見，這裡的自訂按鈕元件略去了 hover、active 樣式，所以與 Bootstrap 按鈕有些不一樣。

本系列文章是基於 xmlplus 框架。如果你對 xmlplus 沒有太多了解，可以造訪 www.xmlplus.cn。這裡有詳盡的入門文件可供參考。

以上是JavaScript框架（xmlplus）元件的介紹（二）按鈕的詳細內容。更多資訊請關注PHP中文網其他相關文章！