2012-01-07 102 views
0

我使用JQuery Mobile製作了MultiPage,但作爲完成它的最後一步,我想將我的後退按鈕從標準按鈕自定義爲自定義的.png並生成一個頁面,看起來像這樣:JQuery Mobile Multi Page - 自定義後退按鈕圖標

<div data-role="page" id="2" data-theme="a"> 

    <div data-role="header" style="background-image:url(background_sun1.png)"> 
    <div class="ui-grid-a"><img src="teainc_empty.png" width="150"><img src="120.png"><img src="logo.png" width="45"></div> 
    <div class="ui-grid-b"><img src="1.png" width="1"></div> 
    </div> 

    <div data-role="content"style="background-image:url(background_dark.png)"> 
     <img src = "news_head.png"> 
     <div><ul style="font-size:14px" id="output1"></ul></div> 
    </div><!-- /content --> 

    <div data-role="footer" style="background-image:url(background_sun2.png)"> 
    <div class="ui-grid-b"><img src="1.png" width="5"></div> 
    </div><!-- /footer --> 
</div><!-- /page 2 --> 

有什麼我可以添加到

<div data-role="page" id="2" data-theme="a"> 

,以便它使用一個自定義後退按鈕,而不是所顯示的默認嗎?

回答

2

以下是在報頭使用自定義圖標後退按鈕(同樣用於任何按鈕)的一個簡單的例子

http://jsfiddle.net/mKfBM/1/

定義格式.ui-icon-<Replace the brackets with any name you want to choose>的風格。 然後爲按鈕定義data-role="<Replace the brackets with the name you have chosen>" 在我以前custom-back-icon .Hence我這樣定義的樣式的例子 - .ui-icon-custom-back-icon

PS:這個例子並不是perfect.It僅僅是一個如何使用自定義的樣本icon.Preferably對於圖標使用尺寸18x18(這是jqm框架中使用的圖標的尺寸)。在這種情況下,您不必重寫寬度和高度樣式。