更改jquerymobile上的自定义导航栏图标 [英] change custom navbar icon on jquerymobile

问题描述

找不到用于更改具有多个页脚的页面上的自定义导航栏图标的解决方案.

Haven't found a solution for changing a custom navbar icon on a page with multiple footers.

这就是我目前正在使用的:

That is what I am currently using:

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

有什么想法吗?

推荐答案

相关:

• 指定导航栏中的选定标签页
• 底部导航栏在jQuery mobile中看起来像iPhone导航栏，可以吗?
• http://jquerymobile.com/test/docs/buttons/buttons -icons.html

• Specifying the styles for the selected tab in a navbar
• A bottom navbar in jQuery mobile looking like iPhone navbar, possible?
• http://jquerymobile.com/test/docs/buttons/buttons-icons.html

实时示例:

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

自定义图标

要使用自定义图标，请指定具有 唯一的名称(例如myapp-email)和按钮插件将生成一个 通过将ui-icon-前缀到data-icon值并将其应用于 按钮.然后，您可以编写针对 ui-icon-myapp-email类，用于指定图标背景源.到 保持视觉一致性，创建一个18x18像素的白色图标，另存为 具有Alpha透明度的PNG-8.

To use custom icons, specify a data-icon value that has a unique name like myapp-email and the button plugin will generate a class by prefixing ui-icon- to the data-icon value and apply it to the button. You can then write a CSS rule that targets the ui-icon-myapp-email class to specify the icon background source. To maintain visual consistency, create a white icon 18x18 pixels saved as a PNG-8 with alpha transparency.

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>

这篇关于更改jquerymobile上的自定义导航栏图标的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！