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

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

 

 

程序代码如下:

 

view sourceprint?

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

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

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

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>