0
제가 작업하고있는 JQuery Mobile 응용 프로그램이 있습니다. 이 응용 프로그램에서는 바닥 글의 Navbar (http://jquerymobile.com/demos/1.1.0-rc.1/docs/toolbars/docs-navbar.html)를 사용하는 페이지가 있습니다. 이 Navbar에는 3 개의 버튼이 있습니다.JQuery Mobile - Navbar 아이콘이 나타나지 않습니다.
처음으로 페이지로 이동하면 버튼에 기본 더하기 기호가 표시됩니다. 그러나 페이지를 새로 고치거나 바닥 글의 다른 단추 중 하나를 통해 탐색하면 내가 설정 한 아이콘이 원하는대로 나타납니다. navbar가 항상 내가 지정한 아이콘을 표시하도록하려면 어떻게해야합니까? 여기 내 첫 번째 페이지와 관련된 코드 :
<style type="text/css">
.navbar .ui-btn .ui-btn-inner { padding-top: 40px !important; }
.navbar .ui-btn .ui-icon { width: 30px!important; height: 30px!important; margin-left: -15px !important; box-shadow: none!important; -moz-box-shadow: none!important; -webkit-box-shadow: none!important; -webkit-border-radius: 0 !important; border-radius: 0 !important; }
#tab1 .ui-icon { background: url(/images/tab1.png) 50% 50% no-repeat; background-size: 24px 22px; }
#tab2 .ui-icon { background: url(/images/tab2.png) 50% 50% no-repeat; background-size: 24px 22px; }
#tab3 .ui-icon { background: url(/images/tab3.png) 50% 50% no-repeat; background-size: 24px 22px; }
</style>
<div id="tabsPage" data-role="page">
<div data-role="header">
</div>
<div data-role="footer" class="navbar">
<div data-role="navbar" class="navbar" data-grid="d">
<ul>
<li><a href="#" id="tab1" data-icon="custom" class="ui-btn-active">Tab 1</a></li>
<li><a href="/tab2" id="tab2" data-icon="custom" rel="external" defaultPageTransition="none">Tab 2</a></li>
<li><a href="/tab3" id="tab3" data-icon="custom" rel="external" defaultPageTransition="none">Tab 3</a></li>
</ul>
</div>
</div>
</div>