Jquery mobile JQuery Mobile：数据图标取代ui listview和其他导航栏图标_Jquery Mobile

Jquery mobile JQuery Mobile：数据图标取代ui listview和其他导航栏图标

jquery-mobile

Jquery mobile JQuery Mobile：数据图标取代ui listview和其他导航栏图标,jquery-mobile,Jquery Mobile,我有点像JQuery手机Noob，我一直在尝试寻找答案，但没有结果。我已经创建了一个带有五个自定义数据图标的ui导航栏。问题是，当我选择五个链接中的一个时，所选链接左侧的按钮将显示所选图标。此外，ul listview元素上的右箭头应该是什么，也会显示选定的图标，尽管很难看到。必须使用Firebug来扩展它，以便查看是否是所选的数据图标下面是我在页脚中用于导航栏的代码： <div data-role="footer"> <div data-role="navbar"

我有点像JQuery手机Noob，我一直在尝试寻找答案，但没有结果。我已经创建了一个带有五个自定义数据图标的ui导航栏。问题是，当我选择五个链接中的一个时，所选链接左侧的按钮将显示所选图标。此外，ul listview元素上的右箭头应该是什么，也会显示选定的图标，尽管很难看到。必须使用Firebug来扩展它，以便查看是否是所选的数据图标

下面是我在页脚中用于导航栏的代码：

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

知道为什么会这样吗？我认为它必须与我的风格有关。

不要只使用名称ui图标，而要使用ui图标，另请参见文档关于

自定义图标

要使用自定义图标，请指定具有唯一名称的数据图标值像myapp电子邮件和按钮插件一样，它将通过将ui图标作为前缀-添加到数据图标值并将其应用于按钮： ui图标myapp电子邮件

然后，您可以在样式表中编写一个CSS规则，以 ui icon myapp电子邮件类，用于指定图标背景源。到保持与其他图标的视觉一致性，创建白色图标18x18像素另存为具有alpha透明度的PNG-8

在这个例子中，我们只是指向一个独立的图标图像，但是您可以同样轻松地使用图标精灵并指定而是定位，就像我们在中使用的图标精灵一样框架

.ui-icon-myapp-email {
    background-image: url("app-icon-email.png");
}

范例

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
 <script src="jquery-1.8.0.min.js"></script>
 <script src="jquery.mobile-1.2.0.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-taifun {
    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>


.ui图标taifun{
背景图片：url（“taifun.png”）；
}
.nav.ui btn.ui btn内部{
填充顶部：40px！重要；
}
.nav.ui btn.ui图标taifun{
宽度：45px！重要；
高度：35px！重要；
左边距：-24px！重要；
盒影：无！重要；
-莫兹盒影：无！重要；
-网络工具包盒阴影：无！重要；
-webkit边界半径：无！重要；
边界半径：无！重要；
}
#ui图标taifun{
背景图片：url（taifun.png）；
背景位置：0；
背景重复：无重复；
}
试验
宠物





家畜

屏幕截图

谢谢，这样做很有效。我确实消除了右箭头未出现的问题，但这并没有完全解决问题。对于初学者，我应该在Taifun的示例中提到，必须将data icon=设置为新的icon类设置为的任何值。所以在他的例子中，应该是data icon=“taifun”。然而，仍然存在一个问题，当我点击进入HTML中的其他页面时，无论选择什么，左边的图标都会选择图标的样式。假设我选择了收音机。下面是我在该页面上看到的图标：Radio、Radio Radio、Eventos等等。

但是，当我单击HTML中的其他页面时，仍然存在一个问题，即无论选择什么，左侧的图标都会显示所选图标的样式。假设我选择了收音机。下面是我在该页面上看到的图标：收音机、收音机、Eventos等等。

这是另一个问题。你能提供更多的代码吗？太有趣了…抱歉耽搁了。与在这里发布大量代码相比，现在看到它的实际应用可能更好。去查看页面，点击底部的按钮，看看我在说什么。我建议你准备一个小例子，使用。您可能想为此打开另一个问题，然后关闭此问题。

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
 <script src="jquery-1.8.0.min.js"></script>
 <script src="jquery.mobile-1.2.0.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-taifun {
    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>