首頁 > 網際網路

怎樣為Jquery Mobile的頁面新增按鈕圖示

2019-12-13 00:43:58

我們之前說過怎樣製作簡單的Jquery Mobile頁面,這次我來分享一下怎樣為按鈕新增圖示,並確定圖示的位置。

1

我們要新建一個HTML5的頁面,並在頁面應用jquery mobile的css樣式表,以及相應的js檔案,還有就是將頁面設定為螢幕自適應,然後儲存頁面。


2

之後,我們就開始頁面的製作了。我使用的是data-role="controlgroup"的標籤組。


3

預設情況下裡面的按鈕是垂直顯示的,在瀏覽器中的效果是每個按鈕佔一行。


4

我們為按鈕新增圖示,需要為其新增data-icon屬性,屬性值有近20種,分別代表了不同的圖示樣式。


5

我暫且對這三個按鈕應用三個不用的圖示,在瀏覽器中檢視一下效果。由於我沒有具體的圖片,我們只能看到幾個圓點。


6

我們還可以對圖示的位置進行調整,我們使用data-iconpos屬性來設定圖示的位置,可以設定在左邊還是右邊,上邊、下邊。


7

我暫且試了一下在上邊下邊和左邊的效果,效果圖如下所示。




IT145.com E-mail:sddin#qq.com