当前位置 - 股票行情交易網 - 財經資訊 - 怎麽用jquery在頁面上動態創建壹個button按鈕?

怎麽用jquery在頁面上動態創建壹個button按鈕?

創建按鈕 data-role=button

給HTML元素添加 data-role="button" 屬性。jQuery Moble就會給此元素增強為按鈕樣式。 Jquery

Mobile框架包含了壹組最常用的移動應用程序所需的圖標,為了減少下載的大小,Jquery

Mobile包含的是的白色的圖標sprite圖片,並自動在圖標後添加壹個半透明的黑圈以確保在任何背景色下圖片都能夠清晰顯示。

樣式鏈接按鈕

在壹個網頁的主要內容塊,妳可以樣式的任何錨鏈接為按鈕添加 data-role="button"

屬性。該框架將加強與標記和類的鏈接方式鏈接按鈕。例如,這個標記:

圖標樣式列表

jQuery Mobile 自帶很多按鈕小圖標,如下圖所示:

左箭頭:data-icon="arrow-l"

右箭頭:data-icon="arrow-r"

上箭頭:data-icon="arrow-u"

下箭頭:data-icon="arrow-d"

刪除:data-icon="delete"

添加:data-icon="Plus"

減少:data-icon="minus"

檢查:data-icon="Check"

齒輪:data-icon="gear"

前進:data-icon="Forward"

後退:data-icon="Back"

網格:data-icon="Grid"

五角:data-icon="Star"

警告:data-icon="Alert"

信息:data-icon="info"

首頁:data-icon="home"

默認情況下,所有的圖標都放在按鈕的按鈕文本左。此默認可以覆蓋使用 data-iconpos

屬性來設置圖標的右上方(top)、底部(bottom)、右側(right)、左側(left)的文本。例如,標記:

隱藏圖片上的文字 data-iconpos="notext"

妳也可以創建壹個圖標按鈕,設置

data-iconpos="notext"。按鈕插件將隱藏的文字在屏幕上,但把它作為給屏幕閱讀器和設備支持工具提示上下文鏈接標題屬性。例如,data-iconpos="right",data-iconpos="notext":

使用自定義圖標,需要指定 data-icon 值。Jquery Mobile的button插件會將生成壹個CSS類,它的前綴是ui-icon-

,後面的是data-icon值。假如:有壹個按鈕 data-icon 屬性的值為 myapp-email,即 data-icon=“

myapp-email”。那麽生產的CSS類是:ui-icon-myapp-email。

然後妳可以在妳的樣式表寫壹個CSS規則來定義

ui-icon-myapp-email。然後在css中指定這個類的背景圖片地址。為了保持與其他圖標的視覺上的壹致性,請創建壹個白色18x18像素的PNG-8圖標,並且保存為Alpha透明度。

這將創建標準分辨率的圖標,但許多設備都有非常高的分辨率的顯示器,就像iPhone

4的視網膜顯示器。添加壹個高清圖標,創建壹個圖標,36X36像素(18像素大小完全相同的兩倍),並添加第二個規則使用WebKit分鐘裝置像素比例:2。媒體查詢到目標的規則只有以高分辨率顯示器。指定背景圖片高清圖標文件和設置背景像素大小18x18將安裝36個像素圖標到同壹個18像素的空間。傳媒查詢塊可以用多個圖標規則: