首頁 web前端 js教程 JavaScript框架(xmlplus)元件的介紹(二)按鈕

JavaScript框架(xmlplus)元件的介紹(二)按鈕

May 04, 2017 am 10:21 AM
按鈕

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

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

使用原生按鈕元件

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

Example: {
  xml: "<p id='example'>\
       <button>Default</button>\
       <input type='submit'>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='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 圖示按鈕的原始使用方式。

<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:'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>
</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:'icon-" + opts.type);
  }
}
登入後複製

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

<p style="padding:5px 0;">
  <Button type='add'>Add</Button>
  <Button type='remove'>Reomve</Button>
  <Button type='save'>Save</Button>
  <Button type='cut'>Cut</Button>
</p>
登入後複製

自訂你的按鈕元件

使用類似 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: "<p id='example'>\
       <Button type='default'>Default</Button>\
       <Button type='primary'>Primary</Button>\
       <Button type='success'>Success</Button>\
     </p>"
}
登入後複製

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

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

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

本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

熱門文章

R.E.P.O.能量晶體解釋及其做什麼(黃色晶體)
2 週前 By 尊渡假赌尊渡假赌尊渡假赌
倉庫:如何復興隊友
4 週前 By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒險:如何獲得巨型種子
3 週前 By 尊渡假赌尊渡假赌尊渡假赌

熱門文章

R.E.P.O.能量晶體解釋及其做什麼(黃色晶體)
2 週前 By 尊渡假赌尊渡假赌尊渡假赌
倉庫:如何復興隊友
4 週前 By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒險:如何獲得巨型種子
3 週前 By 尊渡假赌尊渡假赌尊渡假赌

熱門文章標籤

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

如何修復 Microsoft Teams 白屏 如何修復 Microsoft Teams 白屏 Apr 17, 2023 pm 05:07 PM

如何修復 Microsoft Teams 白屏

在 Windows 中停用傳遞最佳化服務的 5 種方法 在 Windows 中停用傳遞最佳化服務的 5 種方法 May 17, 2023 am 09:31 AM

在 Windows 中停用傳遞最佳化服務的 5 種方法

什麼是 Windows 安全性按鈕?所有你必須知道的 什麼是 Windows 安全性按鈕?所有你必須知道的 Apr 13, 2023 pm 10:22 PM

什麼是 Windows 安全性按鈕?所有你必須知道的

如何重新啟動、強制重新啟動和關閉 iPad Mini 6 如何重新啟動、強制重新啟動和關閉 iPad Mini 6 Apr 29, 2023 pm 12:19 PM

如何重新啟動、強制重新啟動和關閉 iPad Mini 6

重寫後:

如何解決 PS5 控制器在 Windows 11 上未被辨識的問題 重寫後: 如何解決 PS5 控制器在 Windows 11 上未被辨識的問題 May 09, 2023 pm 10:16 PM

重寫後: 如何解決 PS5 控制器在 Windows 11 上未被辨識的問題

如何清空 Microsoft Edge 瀏覽器的下載記錄? 如何清空 Microsoft Edge 瀏覽器的下載記錄? Apr 21, 2023 am 09:34 AM

如何清空 Microsoft Edge 瀏覽器的下載記錄?

如何使用Vue實現按鈕倒數特效 如何使用Vue實現按鈕倒數特效 Sep 21, 2023 pm 02:03 PM

如何使用Vue實現按鈕倒數特效

更改 Windows 11 上的電源按鈕操作 [5 提示] 更改 Windows 11 上的電源按鈕操作 [5 提示] Sep 29, 2023 pm 11:29 PM

更改 Windows 11 上的電源按鈕操作 [5 提示]

See all articles