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

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

May 04, 2017 am 10:21 AM
按鈕

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中文網其他相關文章!

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

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

Video Face Swap

Video Face Swap

使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱工具

記事本++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後出現空白畫面,則一個很好的起點是重新啟動應用程式本身。要關閉並重新啟動MicrosoftTeams,請執行以下操作:右鍵單擊工作列通知區域中的Teams圖標,然後從選單中按一下退出。從「開始」功能表或桌面捷徑重新啟動MicrosoftTeams並查看它是否有效。從工作管理員關閉MicrosoftTeams如果Teams進程的基本重新啟動不起作用,請進入工作管理員並結束任務。若要從工作管理員關閉Teams,請執行下列操作

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

Windows 安全性按鈕是什麼?顧名思義,Windows 安全性按鈕是一項安全性功能,可讓您安全地存取登入功能表並使用密碼登入您的裝置。在這種情況下,智慧型手機絕對領先。但是 Windows 便攜式裝置(例如平板電腦)已經開始添加一個 Windows 安全性按鈕,它不僅僅是一種將不需要的使用者拒之門外的方式。它還提供額外的登入選單選項。儘管如果您試圖在桌上型 PC 或筆記型電腦上找到 Windows 安全性按鈕,您可能會感到失望。這是為什麼?平板電腦與個人電腦Windows 安全性按鈕是一個實體按鈕,存在於平板

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

許多原因可能使你想要停用傳遞最佳化服務在你的Windows電腦上。但是,我們的讀者抱怨不知道要遵循的正確步驟。本指南將透過幾個步驟討論停用傳遞最佳化服務的方法。要了解有關服務的更多信息,您可能需要查看我們的如何開啟services.msc指南以獲取更多資訊。傳遞優化服務有什麼作用?傳遞優化服務是具有雲端託管解決方案的HTTP下載程式。它允許Windows設備從備用來源下載Windows更新、升級、應用程式和其他大型套件檔案。此外,它還透過允許部署中的多個裝置下載這些套件來幫助減少頻寬消耗。此外,Windo

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

如何強制重啟iPadMini6強制重啟iPadMini6是透過一系列按鈕按下來完成的,它的工作原理如下:按下並釋放音量調高按下並釋放降低音量按住電源/鎖定按鈕,直到您在螢幕上看到Apple標誌,表明iPadMini已強制重啟僅此而已,您已經強制重啟了iPadMini6!強制重啟通常用於故障排除原因,例如iPadMini被凍結、應用程式被凍結或發生其他一些一般性不當行為。關於強制重啟第6代iPadMini的程序需要注意的一點是,對於所有其他具有超薄邊框並使用

重寫後:

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

&lt;h3&gt;關於連接我的PS5控制器,我該知道什麼? &lt;/h3&gt;&lt;p&gt;與DualSense控制器一樣好,有報告指出控制器未連接或未被偵測到。解決此問題的最簡單方法是使用適當的USB電纜將控制器連接到您的PC。 &lt;/p&gt;&lt;p&gt;有些遊戲本身就支援DualSense。在這些情況下,您只需插入控制器即可。但這引發了其他問題,例如如果您沒有USB電纜或不想使用USB電纜怎麼辦

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

&lt;ul&gt;&lt;li&gt;&lt;strong&gt;點選進入:&lt;/strong&gt;ChatGPT工具外掛導覽大全&lt;/li&gt;&lt;/ul&gt;&lt;h2&gt;在Edge中尋找並移除下載紀錄&lt; /h2&gt;&lt;p&gt;與其他瀏覽器一樣,Edge有一個&lt;strong&gt;下載

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

電源按鈕可以做的不僅僅是關閉PC,儘管這是桌面用戶的預設操作。如果您想更改Windows11中的電源按鈕操作,它比您想像的要容易!請記住,實體電源按鈕與「開始」功能表中的按鈕不同,以下的變更不會影響後者的操作。此外,您會發現電源選項略有不同,具體取決於它是桌上型電腦還是筆記型電腦。為什麼要在Windows11中更改電源按鈕操作?如果您讓計算機進入睡眠狀態的頻率高於關閉計算機,則更改硬體電源按鈕(即PC上的實體電源按鈕)的行為方式即可。同樣的想法也適用於休眠模式或簡單地關閉顯示器。更改Windows11

iOS 17:如何在「訊息」中組織iMessage應用程式 iOS 17:如何在「訊息」中組織iMessage應用程式 Sep 18, 2023 pm 05:25 PM

在iOS17中,蘋果不僅增加了幾個新的訊息功能,而且還調整了訊息應用程式的設計,使其外觀更乾淨。現在,所有iMessage應用程式和工具(如相機和照片選項)都可以透過點擊鍵盤上方和文字輸入欄位左側的「+」按鈕來存取。點擊“+”按鈕會彈出一個選單列,該列具有預設的選項順序。從頂部開始,有相機,照片,貼紙,現金(如果可用),音訊和位置。最底部是一個「更多」按鈕,點擊該按鈕時會顯示任何其他已安裝的訊息應用程式(您也可以向上滑動以顯示此隱藏清單)。如何重新組織您的iMessage應用程式您可以透過以下方

See all articles