尚未找到更改具有多个页脚的页面上的自定义导航栏图标的解决方案。
这就是我目前正在使用的:
$(".live_menu .ui-icon").css("background","url(/btn_on.gif) !important");
$(".live_menu .ui-icon").css("background-repeat","no-repeat !important");
有任何想法吗?
Related:
- 指定导航栏中所选选项卡的样式 https://stackoverflow.com/questions/6650856/specifying-the-styles-for-the-selected-tab-in-a-navbar/6651134#6651134
- jQuery Mobile 中的底部导航栏看起来像 iPhone 导航栏,可能吗? https://stackoverflow.com/questions/6303124/a-bottom-navbar-in-jquery-mobile-looking-like-iphone-navbar-possible/6307302#6307302
- http://jquerymobile.com/test/docs/buttons/buttons-icons.html http://jquerymobile.com/test/docs/buttons/buttons-icons.html
实例:
- http://jsfiddle.net/phillpafford/8pwFK/29/ http://jsfiddle.net/phillpafford/8pwFK/29/
自定义图标
要使用自定义图标,请指定具有
像 myapp-email 这样的唯一名称和按钮插件将生成一个
通过将 ui-icon- 前缀添加到 data-icon 值并将其应用于
按钮。然后,您可以编写针对以下内容的 CSS 规则:
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>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)