jQuery Mobile 元件 之 按鈕

2021-06-23 04:33:50 字數 1583 閱讀 8667

接下來的幾篇文章中會對jqm的元件逐一介紹,不過筆者用的版本是1.3.x,可能會與最新的1.4有比較大的差異。

先來說說jqm中的按鈕元件吧,按鈕是頁面中最常見的一種元件了,jqm提供了樣式豐富的按鈕,使用者體驗非常不錯。現在就來具體說明一下jqm中的按鈕吧。

在具體說明按鈕的用法之前,我們先來說明一下jqm渲染元件的特別方式。

與大多數前端框架不同的是,jqm在渲染元件時,並不是單純的在原有的頁面元素上新增css和js響應。為了讓元件的樣式更加接近於原生的元件,jqm會在原有元素上新增一部分新的元素並為他們加上樣式。 如:

link button

如果這時我們用dom檢視工具觀察真正在頁面上生成的**,會發現頁面中生成的**是這樣的:

可以看到,jqm不僅對原有的a標籤進行了渲染,同時加上了很多原本沒有的元素和樣式,這就使最終我們得到的按鈕使用者體驗更好,也更接近原生元件。

下面是這段**生成的效果:

這裡所有元件都做了響應式處理,寬度會自動適應裝置。

注:帶鏈結的按鈕元素和表單中的 button 元素會被自動渲染,無需另外新增 data-role="button" 屬性。

jqm自帶了一部分按鈕的圖示供開發者直接使用,開發者只需要在希望使用圖示的按鈕元素中加上data-icon=" "屬性就可以得到帶圖示的按鈕。

**:

check

效果:

而且,jqm還支援開發者自定義圖示的位置。

如果我們在剛才的標籤中加入data-iconpos="" 屬性,就可以設定圖示相對於文字的位置( 可取值為:top, bottom, right ,預設為 left ),下面我們看看效果

check

附帶一張jqm按鈕圖示取值對照表:

所謂按鈕組,就是將多個按鈕放在乙個容器裡,並且對他們做特殊渲染,使得他們看起來更像乙個整體

可以將多個按鈕放到乙個容器內並給容器設定 data-role="controlgroup" 屬性,例如:

是否取消

所產生的效果就是:

而如果我們在此再加上data-type="horizontal" 屬性,我們會得到一組水平排列的按鈕:

是否取消

效果:

按鈕元件還支援通過data-inline=""屬性將按鈕變成內聯按鈕,加上該屬性後,jqm會自動給按鈕加上display: inline-block 的 css,讓鏈結按照文字的長度來控制自身長度,並且可以與其他內聯元素共行。

一些通用的屬性也可以在按鈕元件中使用:

比如jqm所有元件都支援data-theme=""屬性,這個屬性顧名思義是用來設定元件或容器的主題,jqm官方提供5中主體(部分版本的主題數可能有變化)。開發人員通過這個屬性可以快速的變更整個頁面的風格。另外,在之前的文章中提到官方的主題編輯器也可以自定義主題,並通過此屬性將自定義主題應用到產品中去。

還有data-mini="true"屬效能讓元件等比例縮小,更適合某些布局。類似的還有很多,我在這就不一一贅述了,真的用到的話,去查查官方的api吧。

小技巧之jQueryMobile

使用jquerymobile mvc做乙個手機 也有2個月了。有一些小小的經驗,跟大夥們分享一下下 小技巧1 禁用所有ajax載入,它會很煩人的。mobile.ajaxlinksenabled false 小技巧2 使用jqm與jq,有時候會用到比dom就緒還要早的事件 document on pa...

jQuery mobile 啟程跨平台開發之旅

apicloud建立跨平台應用有兩種方法,一種在雲端直接建立,一種是在apicloud studio中建立。建立乙個應用 1.註冊賬號 3.留意應用的id 5.選擇工作資料夾 6.登陸 7.右擊專案,選擇 檢出為 選單,直接單擊完成按鈕 同步本地應用到雲端資源庫 開發者在apicloud studi...

Jquery Mobile 開發小計

開啟你最喜歡的文字編輯器,把下面的頁面模板 貼上進去,儲存然後用瀏覽器開啟。你現在也是移動開發者了!在head裡,viewport的meta標籤將螢幕的寬度設定為了與裝置的寬度相同,並且從cdn引入了jquery,jquery mobile 和jquer。y mobile的主題樣式表。jquery ...