Question

有没有办法让标题中的导航栏后跟一个图标？

我唯一能做的就是在导航栏的第三个菜单中设置图标：

http://tof.canardpc.com/view/f0ad5385-09d9-4624-9324-d6cad4e0aad7.jpg

    <div data-role="navbar" data-theme="a">
        <ul>
            <li><a href="#nav1">Nav 1</a></li>
            <li><a href="#nav2">Nav 2</a></li>
            <li><a href="#nav3">Nav 3</a></li>

        </ul>

    </div>
    <a href="index.html" data-role="button" data-icon="home" data-theme="a" 
     class="ui-btn-right" data-iconpos="notext">Home</a>

</div>

我能以编程方式执行此操作吗？就像每个标题中的后退按钮一样？

$.mobile.page.prototype.options.backBtnText = "previous";

Answer 1

首先你想要实现的目标，但是从你提供的图像来看，这意味着你想要在导航栏的右侧制作一个主页图标......

为了实现你可以使用css并将其包含在导航栏中......

只需在li中添加不同的类，并为它们提供不同的宽度......

HTML：

<div data-role="haeder" data-theme="a">
        <ul data-role="navbar" data-theme="a">
            <li class="tap1"><a href="#nav1">Nav 1</a></li>
            <li class="tap2"><a href="#nav2">Nav 2</a></li>
            <li class="tap3"><a href="#nav3">Nav 3</a></li>
            <li class="tap4"><a href="index.html" data-role="button" data-icon="home" data-theme="a" class="ui-btn-right" data-iconpos="notext">Home</a></li>

        </ul>

    </div>

CSS，

.tap1 { width:30% !important; }
.tap2 { width:30% !important; }
.tap3 { width:30% !important; }
.tap4 { width:10% !important; }

您可以根据需要调整宽度百分比......

<ul> jquery菜单标题中的主页图标</ul>

1 个答案: