更改 jquerymobile 上的自定义导航栏图标答案

【问题标题】：change custom navbar icon on jquerymobile更改 jquerymobile 上的自定义导航栏图标
【发布时间】：2011-11-26 00:48:10
【问题描述】：

尚未找到在具有多个页脚的页面上更改自定义导航栏图标的解决方案。

这就是我目前使用的：

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

有什么想法吗？

【问题讨论】：

标签： jquery jquery-mobile

【解决方案1】：

相关：

现场示例：

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

自定义图标

要使用自定义图标，请指定一个具有像 myapp-email 这样的唯一名称，按钮插件将生成一个通过将 ui-icon- 前缀到 data-icon 值并将其应用于按钮。然后，您可以编写一个针对 ui-icon-myapp-email 类指定图标背景源。至保持视觉一致性，创建一个 18x18 像素的白色图标另存为具有 alpha 透明度的 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>

【讨论】：