0

我正在使用 intel-xdk 上的 jQuery mobile 并尝试使用自定义图标在页脚中设置导航栏。我尝试了很多代码并试图更改图标。使用 jquery.mobile-1.4.1 我无法找到并设置导航栏图标的自定义属性。现在我尝试了不同版本的代码，这些版本不是最新的：
1）1.2.1 和 1.8.1 这些正在工作并允许自定义导航栏图标。当我使用 1.4.1 的最新 jQuery 时，我在 css 中找到了 ui-icon 属性，但我发现它是通过 1.4.1.js 应用的。我坚持这一点，并想将 jQuery 也用于滑块。为此，我必须使用 jQuery1.4.1，但我无法获得自定义导航栏图标。有什么解决办法吗？

我的代码：

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">

    <!--First try with it(its not working)-->
<!-- <link rel="stylesheet" href="jquery.mobile-1.4.1.min.css" />
 <script src="js/jquery-1.8.0.min.js"></script>
 <script src="js/jquery.mobile-1.4.1.min.js"></script> -->



<!--Second try with it(its working)-->
<!--     <link rel="stylesheet" href="css/jquery.mobile-1.2.0.min.css" />
 <script src="js/jquery-1.8.0.min.js"></script>
 <script src="js/jquery.mobile-1.2.0.min.js"></script> -->

<!--third try with it(its not working)-->
<!-- <link rel="stylesheet" href="jquery.mobile-1.4.1.min.css" />
 <script src="js/jquery.js"></script>
 <script src="js/jquery.mobile-1.4.1.min.js"></script> -->



 <style>
  .ui-icon-taifun {
    background-image: url("taifun.png");
  }

  .nav .ui-btn .ui-btn-inner {
    padding-top: 40px !important;
  }

  .nav .ui-btn .ui-icon-taifun {
    width: 45px!important;
    height: 35px!important;
    margin-left: -24px !important;
    box-shadow: none!important;
    -moz-box-shadow: none!important;
    -webkit-box-shadow: none!important;
    -webkit-border-radius: none !important;
    border-radius: none !important;
  }

  #programas .ui-icon {
    background-image: url(taifun.png);
    background-position: 0 0;
    background-repeat: no-repeat;
  }
 </style>

 <title>Test</title>
</head>

<body>
  <div data-role="page">
    <div data-role="content">
      <div data-role="collapsible" data-collapsed-icon="taifun" data-expanded-icon="taifun" data-inset="false">
        <h2><img src="favicon.ico"> Pets</h2>
        <ul data-role="listview">
          <li><a href="index.html">Canary</a></li>
          <li><a href="index.html">Cat</a></li>
          <li><a href="index.html">Dog</a></li>
        </ul>
       </div><!-- /collapsible -->
       <div data-role="collapsible" data-collapsed-icon="taifun" data-expanded-icon="taifun" data-inset="false">
         <h2><img src="favicon.ico"> Farm animals</h2>
         <ul data-role="listview">
           <li><a href="index.html">Chicken</a></li>
           <li><a href="index.html">Cow</a></li>
           <li><a href="index.html">Duck</a></li>
         </ul>
      </div><!-- /collapsible -->
    </div>

  <div data-role="footer">
    <div data-role="navbar" class="nav" data-grid="d">
        <ul>
            <li><a href="#programas" id="programas" data-icon="custom">Programas</a></li>
            <li><a href="#noticias" id="noticias" data-icon="custom">Noticias</a></li>
            <li><a href="#radio" id="radio" data-icon="custom">Radio</a></li>
            <li><a href="#eventos" id="eventos" data-icon="custom">Eventos</a></li>
            <li><a href="#more" id="more" data-icon="custom">More</a></li>
        </ul>
    </div>
  </div>

  </div>

</body>
</html>
4

1 回答 1

1

对于 1.4.x，自定义图标背景分配给 :after css 选择器：

.ui-icon-taifun:after {
    background-image: url("taifun.png");
}

然后在你的按钮中使用这个图标，data-icon 应该设置为“taifun”或者你之后使用的任何文本ui-icon-

<li><a href="#programas" id="programas" data-icon="taifun">Programas</a></li>
<li><a href="#noticias" id="noticias" data-icon="taifun">Noticias</a></li>
<li><a href="#radio" id="radio" data-icon="taifun">Radio</a></li>
<li><a href="#eventos" id="eventos" data-icon="taifun">Eventos</a></li>
<li><a href="#more" id="more" data-icon="taifun">More</a></li>

这是一个演示

于 2014-02-17T14:55:06.237 回答