Blackie的失敗筆記

範例下載

有時候我們看到JQM上面有一些呈現跟我們要的很像如下面這個Listview效果

程式碼如下:

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

如果我們今天想把國旗的大小放大到30*30的大小，可以直接在各img內加入style="max-height:30px;max-width:30px";

CSS如下:

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

程式碼如下:

		
				<ul data-role="listview" data-inset="true">
					<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>
					<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>
					<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>
				</ul>

透過CSS的方式可以讓我們去修改呈現的結果，在有些情況如果不使用!important可能會讓你的呈現被預設的JQM效果蓋過去，這邊建議你最好在你要加入的樣式加上這個設定確保他有較高的優先套用權。如此一來就可以強迫他做修改摟~

另外，這邊在教大家如何取消Listview預設的右方箭頭，其實只要在li上加上data-icon="false"即可

程式碼如下:

<ul data-role="listview" data-inset="true">
					<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>
					<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>
					<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>
					<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>
					<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>
				</ul>

 

---