изменить пользовательский значок навигационной панели на jquerymobile

Question

Не найдено решение для изменения пользовательского значка панели навигации на странице с несколькими нижними колонтитулами.

Вот что я сейчас использую:

    $(".live_menu .ui-icon").css("background","url(/btn_on.gif) !important");
    $(".live_menu .ui-icon").css("background-repeat","no-repeat !important");   

Есть идеи?

Answer 1

Связанный:

• Указание стилей для выбранной вкладки на панели навигации
• Нижняя панель навигации в jQuery mobile выглядит как панель навигации iPhone, возможно?
• http://jquerymobile.com/test/docs/buttons/buttons-icons.html

Live Пример:

• http://jsfiddle.net/phillpafford/8pwFK/29/

Пользовательские иконки

Чтобы использовать пользовательские значки, укажите значение значка данных, которое имеет уникальное имя, такое как myapp-email, и плагин кнопки сгенерирует класс, добавив префикс ui-icon- к значению data-icon и применив его к кнопка. Затем вы можете написать правило CSS, которое предназначено для ui-icon-myapp-email класс для указания источника фона значка. к сохраняйте визуальную согласованность, создайте белый значок размером 18x18 пикселей, сохраненный как PNG-8 с альфа-прозрачностью.

JS:

$('#custom-li-1').click(function() {
    $(this).attr('data-icon','star');
    $(this).children().children().next().removeClass('ui-icon-custom').addClass('ui-icon-star');
}).page();

$('#custom-li-2').click(function() {
    $(this).attr('data-icon','home');
    $(this).children().children().next().removeClass('ui-icon-grid').addClass('ui-icon-home');
}).page();

$('#custom-li-3').click(function() {
    $(this).attr('data-icon','grid');
    $(this).children().children().next().removeClass('ui-icon-star').addClass('ui-icon-grid');
}).page();

HTML:

<div data-role="page" id="home">
    <div data-role="header" data-theme="b">
        <h1>Test</h1>
    </div>
    <div data-role="content" data-theme="d">
        <div data-role="navbar" data-theme="d">
            <ul id="custom-nav-list">
                <li><a href="#" data-icon="custom" class="ui-btn-active" id="custom-li-1">Home</a></li>
                <li><a href="#" data-icon="grid" id="custom-li-2">Second page</a></li>
                <li><a href="#" data-icon="star" id="custom-li-3">Third page</a></li>
            </ul>
        </div>
    </div>

</div>