消除JQuery Mobile 列表样式右侧箭头

最新推荐文章于 2024-09-16 08:47:17 发布

adkrivo7643

最新推荐文章于 2024-09-16 08:47:17 发布

阅读量251

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/timeleader/p/6548304.html

版权

有时候我们看到JQM上面有一些呈现跟我们要的很像如下面这个Listview效果

程序代码如下:

 
     view source 
     print 
     ? 
    

 
     1. 
     <ul data-role="listview" data-inset="true"> 
    
     2. 
     <li><a href="#"><img src="../../_assets/img/gf.png" alt="France" class="ui-li-icon ui-corner-none">France</a></li> 
    
     3. 
     <li><a href="#"><img src="../../_assets/img/de.png" alt="Germany" class="ui-li-icon">Germany</a></li> 
    
     4. 
     <li><a href="#"><img src="../../_assets/img/gb.png" alt="Great Britain" class="ui-li-icon">Great Britain</a></li> 
    
     5. 
     <li><a href="#"><img src="../../_assets/img/fi.png" alt="Finland" class="ui-li-icon">Finland</a></li> 
    
     6. 
     <li><a href="#"><img src="../../_assets/img/us.png" alt="United States" class="ui-li-icon ui-corner-none">United States</a></li> 
    
     7. 
     </ul>

如果我们今天想把国旗的大小放大到30*30的大小，可以直接在各img内加入;

CSS如下:

 
      view source 
      print 
      ? 
     

 
      1. 
      .customize-ul-li-icon{ 
     
      2. 
      max-height: 30px!important; 
     
      3. 
      max-width: 30px!important; 
     
      4. 
      top: 6px!important; 
     
      5. 
      left: 6px!important; 
     
      6. 
      }

程序代码如下:

 
      view source 
      print 
      ? 
     

 
      1. 
      <ul data-role="listview" data-inset="true"> 
     
      2. 
      <li><a href="#"><img src="http://view.jquerymobile.com/1.3.0/docs/_assets/img/album-bb.jpg" alt="France" class="ui-li-icon ui-corner-none customize-ul-li-icon">Broken Bells</a></li> 
     
      3. 
      <li><a href="#"><img src="http://view.jquerymobile.com/1.3.0/docs/_assets/img/album-hc.jpg" alt="Germany" class="ui-li-icon customize-ul-li-icon">Warning</a></li> 
     
      4. 
      <li><a href="#"><img src="http://view.jquerymobile.com/1.3.0/docs/_assets/img/album-p.jpg" alt="Great Britain" class="ui-li-icon customize-ul-li-icon">Phoenix</a></li> 
     
      5. 
      </ul>

透过CSS的方式可以让我们去修改呈现的结果，在有些情况如果不使用!important可能会让你的呈现被预设的JQM效果盖过去，这边建议你最好在你要加入的样式加上这个设定确保他有较高的优先套用权。如此一来就可以强迫他做修改搂~ www.it165.net

另外，这边在教大家如何取消Listview预设的右方箭头，其实只要在li上加上data-icon="false"即可

程序代码如下:

 
       view source 
       print 
       ? 
      

 
       1. 
       <ul data-role="listview" data-inset="true"> 
      
       2. 
       <li data-icon="false"><a href="#"><img src="http://view.jquerymobile.com/1.3.0/docs/_assets/img/gf.png" alt="France" class="ui-li-icon ui-corner-none">France</a></li> 
      
       3. 
       <li data-icon="false"><a href="#"><img src="http://view.jquerymobile.com/1.3.0/docs/_assets/img/de.png" alt="Germany" class="ui-li-icon">Germany</a></li> 
      
       4. 
       <li data-icon="false"><a href="#"><img src="http://view.jquerymobile.com/1.3.0/docs/_assets/img/gb.png" alt="Great Britain" class="ui-li-icon">Great Britain</a></li> 
      
       5. 
       <li data-icon="false"><a href="#"><img src="http://view.jquerymobile.com/1.3.0/docs/_assets/img/fi.png" alt="Finland" class="ui-li-icon">Finland</a></li> 
      
       6. 
       <li data-icon="false"><a href="#"><img src="http://view.jquerymobile.com/1.3.0/docs/_assets/img/us.png" alt="United States" class="ui-li-icon ui-corner-none">United States</a></li> 
      
       7. 
       </ul>