Question

我使用JQuery Mobile制作了MultiPage，但作为完成它的最后一步，我想将我的后退按钮从标准按钮自定义为自定义.png并生成一个看起来像的页面这个：

   <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">

以便它使用自定义后退按钮而不是显示的默认按钮？

Answer 1

以下是在标题后退按钮中使用自定义图标的简单示例（对于任何按钮都相同）

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的示例中。因此我定义了这样的样式 - .ui-icon-custom-back-icon

PS：这个例子并不完美。它只是一个如何使用自定义图标的示例。优选地，图标使用尺寸18x18（这是jqm框架中使用的图标的尺寸）。在这种情况下你没有覆盖宽度和高度样式。

JQuery Mobile Multi Page - 自定义后退按钮图标

1 个答案: