jQuery Mobile-导航栏图标未出现 [英] JQuery Mobile - Navbar Icons not appearing

问题描述

我有一个正在使用的JQuery Mobile应用程序.在此应用程序中，我有一个在页脚中使用导航栏的页面(http://jquerymobile.com/demos/1.1.0-rc.1/docs/toolbars/docs-navbar.html).该导航栏具有三个按钮.

I have a JQuery Mobile application that I'm working on. In this application, I have a page that uses a Navbar in the footer (http://jquerymobile.com/demos/1.1.0-rc.1/docs/toolbars/docs-navbar.html). This Navbar has three buttons.

由于某种原因，我第一次导航到页面时，按钮显示默认的加号.但是，如果刷新页面或通过页脚中的其他按钮之一进行导航，则已设置的图标将按需要显示.如何使导航栏始终显示我指定的图标?这是与我的第一页相关的代码:

For some reason, the first time that I navigate to the page, the buttons show the default plus sign. However, if I refresh the page, or navigate via one of the other buttons in the footer, the icons that I have set appear as desired. How do I make it so that the navbar always shows the icons I have specified? Here is the code associated with my first page:

<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>

推荐答案

尝试使图像链接成为绝对路径.

Try making the image links absolute paths.

这篇关于jQuery Mobile-导航栏图标未出现的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！