JQuery Mobile Multi Page - пользовательский значок кнопки «Назад»

Question

У меня есть MultiPage, созданный с помощью JQuery Mobile, но в качестве последнего шага, чтобы завершить его, я хочу настроить кнопку «Назад» со стандартной на пользовательский .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). В этом случае вам не нужно переопределять стили ширины и высоты.