jQuery Mobile中$.mobile.buttonMarkup方法使用詳解

業餘草發表於2015-03-31

最近在群裡遇到多數網友提到$.mobile.buttonMarkup()方法的使用。我這裡就列了一下api的使用說明,以後大家看部落格就能解決問題。如有不正確的地方,請留言指出!

jQuery Mobile暴露的方法都是使用$.mobile來引用。
$.mobile.buttonMarkup( options, overwriteClasses ) 新增按鈕的樣式元素
其中options為物件,overwriteClasses為布林型別,預設為false。當設定為true,buttonmarkup()丟棄所有樣式;相反,當設定為false,在當前已經存在的樣式基礎上增加樣式。
options物件的屬性解釋如下
corners屬性:設定圓角,布林型別,預設為true。當為true時增加ui-corner-all樣式,當為false是刪除ui-corner-all樣式。它的使用類似於data-corners="false"。
icon屬性:設定圖示,字串型別,預設為""。它的使用類似於data-icon="arrow-r"。和class新增"ui-icon-"屬性類似。
iconpos屬性:設定圖示位置,字串型別,預設為"left"。它的使用類似於data-iconpos="right"。和class新增"ui-btn-icon-"屬性類似。
iconshadow屬性:設定陰影圖示,布林型別,預設為false。這個選項是使用1.4.0將會被刪除在1.5.0。它的使用類似於data-iconshadow="true"。和class新增"ui-shadow-icon"屬性類似。
inline屬性:設定元素的行內樣式,布林型別,預設為false。它的使用類似於data-inline="true"。和class新增"ui-btn-inline"屬性類似。
mini屬性:設定元素的較小樣式,布林型別,預設為false。它的使用類似於data-mini="true"。和class新增"ui-mini"屬性類似。
shadow屬性:設定元素的陰影,布林型別,預設為true。它的使用類似於data-shadow="false"。和class新增"ui-shadow"屬性類似。
theme屬性:設定主題,預設為null,繼承自父元素,字串型別。它的使用類似於data-theme="b"。和class新增"ui-btn-"屬性類似,如:ui-btn-b。
如下使用:
$("#myAnchor").buttonMarkup({corners:false});//取消圓角
$("#myAnchor").buttonMarkup({shadow:false});//設定陰影
$("#myAnchor").buttonMarkup({corners:true});//設定圓角

如有不懂,請加qq群:135430763共同學習!

相關文章