jquery mobile Listview （列表檢視）詳講

阿新 • • 發佈：2019-01-20

Listview（列表，列表檢視）是一個簡單的無序列表，包是含連結的列表。添加了 data-role="listview" 屬性來構成。jQuery Mobile 將應用所有必要的風格轉換列表，，以便在移動裝置上顯示出列表效果，對觸屏方式更加友好。列表有右箭頭指示，以及填充瀏覽器視窗的寬度。當你點選列表項，該框架將觸發在列表內的項的連結點選，傳送URL連結的Ajax請求，在DOM建立新的頁面，然後啟動一個頁面轉變場景。

<ul data-role="listview">
<li><a href="acura.html">Acura</a></li>
<li><a href="audi.html">Audi</a></li>
<li><a href="bmw.html">BMW</a></li>
</ul>

對非內嵌的列表的樣式的說明：
為了讓所有的非內嵌式的列表都充滿螢幕邊緣，非內嵌式的列表會有一個-15px的 margin 來抵消掉body 15px 的 padding 。所以如果你想在列表的上方或下方新增內容的話，需要給他們新增額外的margin，否則會產生重疊的現象。

巢狀列表

通過UL或OL的子元素可以巢狀列出的子專案，建立巢狀列表。當一個擁有子列表的列表項被點選時，Jquery Mobile框架會生成一個新的ul頁面充滿螢幕，並自動生成一個為父列表項名稱為標題的header,以及一個子列表。這些動態巢狀的列表樣式是“B”主題的樣本（在預設主題的藍色）來表明你是在一個二級導航。列表可以巢狀，多層次的深入和所有頁面和連結將由Jquery Mobile框架自動處理。

注意：
每個巢狀的列表檢視的頁面是在父頁面載入時建立，並且每個巢狀的頁的頁事件也將觸發。
子頁面的標題是父列表的列表文字。所以一定要使用一個單一的元素的列表項的標題，其他元素（像計數氣泡後面的文字描述）應該在其下面顯示。

<!DOCTYPE html> 
<html> 
<head> 
	<title>Page Title</title> 
	<meta name="viewport" content="width=device-width, initial-scale=1"> 
	<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.css" />
	<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
	<script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script>
	<style>
	html, body { padding: 0; margin: 0; }
	html, .ui-mobile, .ui-mobile body {
    	height: 635px;
	}
	.ui-mobile, .ui-mobile .ui-page {
    	min-height: 635px;
	}
	.ui-content{
padding:10px 15px 0px 15px;
	}
	.ui-content .ui-listview {
    margin: -15px -15px 0px -15px;
}
	
	</style>
</head> 
<body> 
<div data-role="page" style="max-height:640px; min-height:640px;">
	<div data-role="content" > 
<ul data-role="listview"> 
	<li> 
<h3>Animals</h3> 
<p>All your favorites from aarkvarks to zebras.</p> 
	
<ul> 
	<li><div>Pets</div>
<span class="ui-li-count">6</span>
<ul>
	<li><a href="example2.html">Canary</a></li>
	<li><a href="example2.html">Cat</a></li>
	<li><a href="example2.html">Dog</a></li>
	<li><a href="example2.html">Gerbil</a></li>
	<li><a href="example2.html">Iguana</a></li>
	<li><a href="example2.html">Mouse</a></li>
</ul>
	</li>
	<li><div>Farm animals</div>
<p class="ui-li-count">6</p>
<ul>
	<li><a href="example2.html">Chicken</a></li>
	<li><a href="example2.html">Cow</a></li>
	<li><a href="example2.html">Duck</a></li>
	<li><a href="example2.html">Horse</a></li>
	<li><a href="example2.html">Pig</a></li>
	<li><a href="example2.html">Sheep</a></li>
</ul>
	</li>
	<li><div>Wild animals</div>
<p class="ui-li-count">18</p>
<ul>
	<li><a href="example2.html">Aardvark</a></li>
	<li><a href="example2.html">Alligator</a></li>
	<li><a href="example2.html">Ant</a></li>
	<li><a href="example2.html">Bear</a></li>
	<li><a href="example2.html">Beaver</a></li>
	<li><a href="example2.html">Cougar</a></li>
	<li><a href="example2.html">Dingo</a></li>
	<li><a href="example2.html">Eagle</a></li>
	<li><a href="example2.html">Elephant</a></li>
	<li><a href="example2.html">Ferret</a></li>
	<li><a href="example2.html">Frog</a></li>
	<li><a href="example2.html">Giraffe</a></li>
	<li><a href="example2.html">Lion</a></li>
	<li><a href="example2.html">Monkey</a></li>
	<li><a href="example2.html">Panda bear</a></li>
	<li><a href="example2.html">Polar bear</a></li>
	<li><a href="example2.html">Tiger</a></li>
	<li><a href="example2.html">Zebra</a></li>
</ul>
	</li>
</ul> 
	</li> 
	<li> 
<h3>Colors</h3> 
<p>Fresh colors from the magic rainbow.</p> 
	
<ul> 
	<li><a href="example2.html">Blue</a></li>
	<li><a href="example2.html">Green</a></li>
	<li><a href="example2.html">Orange</a></li>
	<li><a href="example2.html">Purple</a></li>
	<li><a href="example2.html">Red</a></li>
	<li><a href="example2.html">Yellow</a></li>
	<li><a href="example2.html">Violet</a></li>
</ul> 
	</li> 
	<li> 
<h3>Vehicles</h3> 
<p>Everything from cars to planes.</p> 
<ul> 
	<li><div>Cars</div>
<span class="ui-li-count">22</span>
<ul>
	<li><a href="example2.html">Acura</a></li>
	<li><a href="example2.html">Audi</a></li>
	<li><a href="example2.html">BMW</a></li>
	<li><a href="example2.html">Cadillac</a></li>
	<li><a href="example2.html">Chrysler</a></li>
	<li><a href="example2.html">Dodge</a></li>
	<li><a href="example2.html">Ferrari</a></li>
	<li><a href="example2.html">Ford</a></li>
	<li><a href="example2.html">GMC</a></li>
	<li><a href="example2.html">Honda</a></li>
	<li><a href="example2.html">Hyundai</a></li>
	<li><a href="example2.html">Infiniti</a></li>
	<li><a href="example2.html">Jeep</a></li>
	<li><a href="example2.html">Kia</a></li>
	<li><a href="example2.html">Lexus</a></li>
	<li><a href="example2.html">Mini</a></li>
	<li><a href="example2.html">Nissan</a></li>
	<li><a href="example2.html">Porsche</a></li>
	<li><a href="example2.html">Subaru</a></li>
	<li><a href="example2.html">Toyota</a></li>
	<li><a href="example2.html">Volkswagon</a></li>
	<li><a href="example2.html">Volvo</a></li>
</ul>
	</li>
	<li><div>Planes</div>
<span class="ui-li-count">7</span>
<ul>
	<li><a href="example2.html">Boeing</a></li>
	<li><a href="example2.html">Cessna</a></li>
	<li><a href="example2.html">Derringer</a></li>
	<li><a href="example2.html">Embraer</a></li>
	<li><a href="example2.html">Gulfstream</a></li>
	<li><a href="example2.html">Piper Aircraft</a></li>
	<li><a href="example2.html">Raytheon</a></li>
</ul>
	</li>
	<li><div>Construction</div>
<span class="ui-li-count">3</span>
<ul>
	<li><a href="example2.html">Caterpillar</a></li>
	<li><a href="example2.html">Ford</a></li>
	<li><a href="example2.html">John Deere</a></li>
</ul>
	</li>
</ul> 
	</li> 
</ul> 
	</div>
</div>
</body>
</html>

開始的效果

點選第一個列表的效果

數字排序列表ol

使用有序列表ol可以建立數字排序的列表，用來表現順序。比如說，搜尋結果或者電影排行榜時非常有用。當增強效果應用到列表時，Jquery Mobile優先使用css的方式給列表新增編號，當瀏覽器不支援這種方式時，框架會採用JavaScript將編號寫入列表中。

<ol data-role="listview"> 
	<li><a href="example3.html">The Godfather</a></li> 
	<li><a href="example3.html">Inception</a></li> 
	<li><a href="example3.html">The Good, the Bad and the Ugly </a></li> 
	<li><a href="example3.html">Pulp Fiction</a></li> 
	<li><a href="example3.html">Schindler's List</a></li> 
</ol>

只讀列表

列表也可以用來展示沒有互動的條目，，通常作為插圖列表。這個列表是建立從一個無序或有序列表，沒有連結列表項。該框架樣式列表專案按鈕像其他型別列表（見主題列表），但沒有對漸變背景。

<h2>Simple list</h2> 
<ul data-role="listview" data-inset="true"> 
	<li>Acura</li> 
	<li>Audi</li> 
	<li>BMW</li> 
	<li>Cadillac</li> 
	<li>Ferrari</li> 
</ul>

<h2>Thumbnail list</h2> 
<ul data-role="listview" data-inset="true"> 
	<li> 
		<img src="images/album-bb.jpg" /> 
		<h3>Broken Bells</h3> 
		<p>Broken Bells</p> 
	</li> 
	<li> 
		<img src="images/album-hc.jpg" /> 
		<h3>Warning</h3> 
		<p>Hot Chip</p> 
	</li> 
	<li> 
		<img src="images/album-p.jpg" /> 
		<h3>Wolfgang Amadeus Phoenix</h3> 
		<p>Phoenix</p> 
	</li> 
</ul>

拆分按鈕列表

有時每個列表項會有多於一個操作，這時拆分按鈕用來提供2個獨立的可點選的部分：列表項本身和列表項右邊的小icon。要建立這種拆分按鈕，在li 插入第二個連結即可，框架會建立一個豎直的分割線，並把連結樣式化為一個只有icon的按鈕，記得設定title屬性以保證可訪問性。

你可以通過指定data-split-icon屬性來設定位於右邊的分隔項的圖示。預設的圖示是 arrow-r 。通過新增 data-icon 屬性，為每一個分割設定單個圖示。主題的樣本顏色的分割按鈕預設為“B”（在預設主題的藍色）但可以通過圖示分隔項的主題樣式可以通過data-split-theme屬性來設定。

<ul data-role="listview" data-split-icon="gear" data-split-theme="d">
			<li><a href="index.html">
				<img src="images/album-bb.jpg" />
				<h3>Broken Bells</h3>
				<p>Broken Bells</p>
				</a><a href="#purchase" data-rel="popup" data-position-to="window" data-transition="pop">Purchase album</a>
			</li>
			<li><a href="index.html">
				
				<img src="images/album-hc.jpg" />
				<h3>Warning</h3>
				<p>Hot Chip</p>
				</a><a href="#purchase" data-rel="popup" data-position-to="window" data-transition="pop">Purchase album</a>
			</li>
			<li><a href="index.html">
				<img src="images/album-p.jpg" />
				<h3>Wolfgang Amadeus Phoenix</h3>
				<p>Phoenix</p>
				</a><a href="#purchase" data-rel="popup" data-position-to="window" data-transition="pop">Purchase album</a>
			</li>
<ul>

列表分隔data-role="list-divider"

列表項也可以轉化為列表分割項，用來組織列表，使列表項成組。給任意列表項新增 data-role="list-divider" 屬性即可。預設情況下列表項的主題樣式為“b“（藍色），但給列表（ul或ol）新增 data-divider-theme 屬性可以設定列表分割項的主題樣式。

<body> 
<div data-role="page" style="max-height:1410px; min-height:1410px;">
	<div data-role="content" > 
		<ul data-role="listview">
				<li data-role="list-divider">A</li>
				<li><a href="index.html">Adam Kinkaid</a></li>
				<li><a href="index.html">Alex Wickerham</a></li>
				<li><a href="index.html">Avery Johnson</a></li>
				<li data-role="list-divider">B</li>
				<li><a href="index.html">Bob Cabot</a></li>
				<li data-role="list-divider">C</li>
				<li><a href="index.html">Caleb Booth</a></li>
				<li><a href="index.html">Christopher Adams</a></li>
				<li><a href="index.html">Culver James</a></li>
			</ul>
	</div>
</div>
</body>

自動分隔data-autodividers="true"

列表檢視新增 data-autodividers="true" 屬性，可以配置為自動生成的專案的分隔。預設情況下，建立的分隔文字是列表項文字的第一個大寫字母。或者你也可以指定分隔的文字設定，使用 autodividersSelector 選項，以程式設計的方式設定。

$( "#mylistview" ).listview({ 
autodividers: true,  
// the selector function is passed a <li> element from the listview; 
// it should return the appropriate divider text for that <li> 
// element as a string 
autodividersSelector: function ( li ) { 
var out = /* generate a string based on the content of li */; 
return out; 
} 
});

如果你使用的是格式化列表，專案中包含一個浮動元素（例如 ui-li-aside），無論它的HTML標記中順序，該元素都會優先它的兄弟元素。這一結果在浮動元素作為分隔文字的第一個字元。因此，建議在這種情況下，指定的分隔的文字。
如果新的列表項新增到列表或從其中刪除，分隔列表，不會自動更新，應該使用refresh()重新整理。

<body> 
<div data-role="page" style="max-height:1410px; min-height:1410px;">
	<div data-role="content" > 
		<ul data-role="listview" data-autodividers="true">
				<li><a href="index.html">Adam Kinkaid</a></li>
				<li><a href="index.html">Alex Wickerham</a></li>
				<li><a href="index.html">Avery Johnson</a></li>
				<li><a href="index.html">Bob Cabot</a></li>
				<li><a href="index.html">Caleb Booth</a></li>
				<li><a href="index.html">Christopher Adams</a></li>
				<li><a href="index.html">Culver James</a></li>
				<li><a href="index.html">David Walsh</a></li>
				<li><a href="index.html">Drake Alfred</a></li> 
			</ul>
	</div>
</div>
</body>

搜尋過濾data-filter="true"

Jquery Mobile提供一個非常簡單的方法，實現客戶端搜尋功能，篩選列表的選項。只需新增 data-filter="true" 屬性即可。框架會在列表上方增加一個搜尋框，當用戶在搜尋輸入框中輸入時，Jquery Mobile會自動過濾掉不含輸入字元的列表項。

搜尋輸入框預設的字元為 “Filter items...”。通過設定mobileinit事件的繫結程式或者給$.mobile.listview.prototype.options.filterPlaceholder選項設定一個字串，或者給列表設定data-filter-placeholder屬性，可以設定搜尋輸入框的預設字元。

<ul data-role="listview" data-filter="true">
	<li><a href="index.html">Acura</a></li>
	<li><a href="index.html">Audi</a></li>
	<li><a href="index.html">BMW</a></li>
	<li><a href="index.html">Cadillac</a></li>
	<li><a href="index.html">Chrysler</a></li>
</ul>

如果你想改變的列表項進行過濾的方式，即模糊搜尋或匹配字串的開始，你可以配置通過定義內部使用回撥$.mobile.listview.prototype.options.filterCallback在mobileinit期間。或者外掛建立之後，使用$( "#mylist" ).listview( "option", "filterCallback", yourFilterFunction)。任何函式定義的回撥將提供三個引數。第一，當前列表項的文字，二值搜尋，和第三個列表項被過濾。一個真實性值將導致一個隱藏的列表項。預設回撥過濾條目沒有searchvalue作為子字串描述如下：

function( text, searchValue, item ) { 
    return text.toString().toLowerCase().indexOf( searchValue ) === -1; 
};

data-filtertext

通過對比其他的文字值，來過濾器列表項，新增 data-filtertext 屬性列表項。此屬性的值將為filtercallback函式的第一個引數代替文字傳遞。或者你可以使用你所選擇的屬性的定義列表專案。
預設情況下，檢視的簡單搜尋過濾器在每個列表項的內容。如果你想過濾搜尋內容的不同，將data-filtertext屬性的專案並將其與一個或多個關鍵詞和短語，應該用於搜尋對比。請注意，如果是新增這個屬性，列表項的內容被忽略（不被過濾掉）。
這個屬性是有用的，處理允許股票程式碼和完整的公司名稱進行搜尋，或覆蓋國家常見的拼寫和縮寫。

<ul data-role="listview" data-filter="true" data-filter-placeholder="Search ticker or firm name..." data-inset="true">
	<li data-filtertext="NASDAQ:ADBE Adobe Systems Incorporated"><a href="#">Adobe</a></li>
	<li data-filtertext="NASDAQ:AMZNL Amazon.com, Inc."><a href="#">Amazon</a></li>
	<li data-filtertext="NASDAQ:AAPL Apple Inc."><a href="#">Apple</a></li>
	<li data-filtertext="NASDAQ:GOOG Google Inc."><a href="#">Google</a></li>
	<li data-filtertext="NYSE:IBM Intl. International Business Machines Corp."><a href="index.html">IBM</a></li>
	<li data-filtertext="NASDAQ:MSFT Microsoft Corporation"><a href="#">Microsoft</a></li>
	<li data-filtertext="NASDAQ:YHOO Yahoo! Inc."><a href="#">Yahoo</a></li>
	<li data-filtertext="USA U.S.A. United States of America"><a href="#">United States</a></li>
</ul>

文字格式和計數氣泡

框架支援通過語義化的HTML標籤，來顯示列表項中所需常見的文字格式（比如標題/描述，二級資訊，計數等）。

列表項右側顯示計數指示器，把數字包含在一個容器內，並給它要新增CSS類ui-li-count即可。
文字內容按層次等級來顯示，標題使用<h1><h2>...<h6>來強調，段落文字來使用p標籤減少強調。
在列表項右側顯示補充資訊，把它包裹在一個容器內，並給它新增CSS類ui-li-aside即可。

<ul data-role="listview">
	<li><a href="index.html">Inbox <span class="ui-li-count">12</span></a></li>
	<li><a href="index.html">Outbox <span class="ui-li-count">0</span></a></li>
	<li><a href="index.html">Drafts <span class="ui-li-count">4</span></a></li>
	<li><a href="index.html">Sent <span class="ui-li-count">328</span></a></li>
	<li><a href="index.html">Trash <span class="ui-li-count">62</span></a></li>
</ul>

<ul data-role="listview" data-theme="d" data-divider-theme="d"> 
	<li data-role="list-divider"> Friday, October 8, 2010 <span class="ui-li-count"> 2</span> </li> 
	<li> 
		<a href="index.html"> 
			<h3> Stephen Weber</h3> 
			<p> <strong> You've been invited to a meeting at Filament Group in Boston, MA</strong> </p> 
			<p> Hey Stephen, if you're available at 10am tomorrow, we've got a meeting with the jQuery team.</p> 
			<p class="ui-li-aside"> <strong> 6:24</strong> PM</p> 
		</a> 
	</li> 
	<li> 
		<a href="index.html"> 
			<h3> jQuery Team</h3> 
			<p> <strong> Boston Conference Planning</strong> </p> 
			<p> In preparation for the upcoming conference in Boston, we need to start gathering a list of sponsors and speakers.</p> 
			<p class="ui-li-aside"> <strong> 9:18</strong> AM</p> 
		</a> 
	</li> 
	<li data-role="list-divider"> Thursday, October 7, 2010 <span class="ui-li-count"> 1</span> </li> 
	<li> 
		<a href="index.html"> 
			<h3> Avery Walker</h3> 
			<p> <strong> Re: Dinner Tonight</strong> </p> 
			<p> Sure, let's plan on meeting at Highland Kitchen at 8:00 tonight. Can't wait! </p> 
			<p class="ui-li-aside"> <strong> 4:48</strong> PM</p> 
		</a> 
	</li> 
</ul>

新增縮圖

在列表專案的左側顯示縮圖，只要新增一個影象，並且它是列表項的第一個子元素。該框架將縮放影象80px的正方形。而要使用標準的16*16的圖示作為縮圖的話，為圖片元素新增ui-li-icon class即可。

<ul data-role="listview"> 
	<li> <a href="index.html"> 
		<img src="images/album-bb.jpg" /> 
		<h3> Broken Bells</h3> 
		<p> Broken Bells</p> 
	</a> </li> 
	<li> <a href="index.html"> 
		<img src="images/album-hc.jpg" /> 
		<h3> Warning</h3> 
		<p> Hot Chip</p> 
	</a> </li> 
</ul>

<ul data-role="listview"> 
	<li> <a href="index.html"> <img src="images/gf.png" alt="France" class="ui-li-icon"> France <span class="ui-li-count"> 4</span> </a> </li> 
	<li> <a href="index.html"> <img src="images/de.png" alt="Germany" class="ui-li-icon"> Germany <span class="ui-li-count"> 4</span> </a> </li> 
</ul>

內嵌列表樣式data-inset="true"

如果列表嵌入在其他型別的內容中，內嵌列表可以幫到忙，內嵌列表將會以圓角和邊緣留白的塊顯示出來，並且也受主題調板所控制。通過為 ul （ol）新增 data-inset="true" 即可。

<ul data-role="listview" data-inset="true"> 
	<li> <a href="index.html"> Acura</a> </li> 
	<li> <a href="index.html"> Audi</a> </li> 
	<li> <a href="index.html"> BMW</a> </li> 
	<li> <a href="index.html"> Cadillac</a> </li> 
	<li> <a href="index.html"> Ferrari</a> </li> 
</ul>

過濾展示data-filter-reveal="true"

過濾顯示功能使易與本地資料建立一個簡單的自動完成功能。當一個過濾列表的有data-filter-reveal="true"的屬性，搜尋欄是空白的時候，它會自動隱藏所有的列表項。
data-filter-placeholder屬性可以被新增到指定過濾器的佔位符文字。
如果你要搜尋一長列的值，我們提供了另外一種方式來與遠端資料來源建立一個過濾器。

<ul data-role="listview" data-filter="true" data-filter-reveal="true" data-filter-placeholder="Search fruits..." data-inset="true"> 
	<li> <a href="#"> Apple</a> </li> 
	<li> <a href="#"> Banana</a> </li> 
	<li> <a href="#"> Cherry</a> </li> 
	<li> <a href="#"> Cranberry</a> </li> 
	<li> <a href="#"> Grape</a> </li> 
	<li> <a href="#"> Orange</a> </li> 
</ul>

搜尋前

搜尋時

遠端資料的自動過濾listviewbeforefilter

列表檢視的過濾器賽選遠端資料，使用listviewbeforefilter事件，動態填充一個列表檢視，作為使用者型別的搜尋查詢。這是有用的，當你有一個非常大的資料集，不能被預先載入到本地。如城市、郵政編碼、或產品。

<!DOCTYPE html>  
<html>  
<head>  
	<title> Page Title</title>  
	<meta name="viewport" content="width=device-width, initial-scale=1">  
	<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.css" /> 
	<script src="http://code.jquery.com/jquery-1.9.1.min.js"> </script> 
	<script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"> </script> 
    <script> 
		$( document ).on( "pageinit", "#myPage", function() {
			$( "#autocomplete" ).on( "listviewbeforefilter", function ( e, data ) {
				var $ul = $( this ),
					$input = $( data.input ),
					value = $input.val(),
					html = "";
				$ul.html( "" );
				if ( value && value.length >  2 ) {
					$ul.html( "<li> <div class='ui-loader'> <span class='ui-icon ui-icon-loading'> </span> </div> </li> " );
					$ul.listview( "refresh" );
					$.ajax({
						url: "http://gd.geobytes.com/AutoCompleteCity",
						dataType: "jsonp",
						crossDomain: true,
						data: {
							q: $input.val()
						}
					})
					.then( function ( response ) {
						$.each( response, function ( i, val ) {
							html += "<li> " + val + "</li> ";
						});
						$ul.html( html );
						$ul.listview( "refresh" );
						$ul.trigger( "updatelayout");
					});
				}
			});
		});
    </script> 
	<style> 
	html, body { padding: 0; margin: 0; }
	html, .ui-mobile, .ui-mobile body {
    	height: 1035px;
	}
	.ui-mobile, .ui-mobile .ui-page {
    	min-height: 1035px;
	}
	.ui-content{
		padding:10px 15px 0px 15px;
	}
	.ui-listview-filter-inset {
			margin-top: 0;
		}
	</style> 
</head>  
<body>  
<div data-role="page" id="myPage" style="max-height:1040px; min-height:1040px;"> 
	<div data-role="content" >  
    	<div data-demo-html="true" data-demo-js="true" data-demo-css="true"> 
			<ul id="autocomplete" data-role="listview" data-inset="true" data-filter="true" data-filter-placeholder="Find a city..." data-filter-theme="d"> </ul> 
		</div> 
	</div> 
</div> 
</body> 
</html>

上面的程式碼展示的是“全世界的城市”。至少輸入三個字元，自動完成功能將顯示所有可能的搜尋。

搜尋前

搜尋時

呼叫檢視的外掛listview()

你可以直接呼叫任何選擇器ListView外掛，就像任何jQuery外掛：

$( "#mylist" ).listview();

更新列表refresh()

列表檢視的增刪專案或者建立巢狀列表，需要使用refresh()方法來重新整理。

$( "#mylist" ).listview( "refresh" );

refresh()方法僅影響被新增到列表的新節點。這是因為列表本身的任何項已經被強化，所以重新整理過程中忽視。這意味著，如果你改變的內容或屬性在一個已經增強的列表項中，那麼這些不會被改變。如果你想要一個列表項被更新替換，要在refresh()方法之前使用新的HTML標籤。
如果你最初想隱藏專案中你可以通過新增一個CSS類ui-screen-hidden給此元素。使用此類可以保證專案的圓角以及border-bottom的效果顯示。

jquery mobile Listview （列表檢視）詳講

Listview（列表，列表檢視）是一個簡單的無序列表，包是含連結的列表。添加了 data-role="listview" 屬性來構成。jQuery Mobile 將應用所有必要的風格轉換列表，，以便在移動裝置上顯示出列表效果，對觸屏方式更加友好。列表有右箭

說說 Android UI 中的 ListView（列表控制元件）

當程式中有大量的資料需要展示時，就需要用到 ListView 啦。ListView 允許使用者通過手指上下滑動的方式將螢幕外的資料滾動到螢幕內，同時螢幕上原有的資料則會滾動出螢幕。 1 基本用法佈局檔案中加入 ListView： <?xml

Adapter型別控制元件之ListView（列表控制元件）

（一）概述 Android中的列表控制元件飛創靈活，可以自定義每一個列表項，實際上每一個列表項就是一個View，在Android定義了3個列表控制元件：ListView、ExpandableListView和Spinner，其中Spinner就是在Window

VMware虛擬機文件（後綴）詳解

blank mdk 記錄 tom 而不是我們 sun 編輯 right VMware虛擬機文件（後綴）詳解虛擬機的文件管理由VMware Workstation來執行,一個虛擬機一般以一系列文件的形式儲存在宿主機中，這些文件一般在由workstation為虛

#26 Linux kernel（內核）詳解與uname、lsmod、modinfo、depmod、insmod、rmmod、modprobe...命令用法

linux kernel（內核）詳解與uname、lsmod、modinfo、depmod、insmod、rmmod、modprobe...命令用法Linux kernel：內核設計流派：單內核設計，但是充分借鑒了微內核體系設計的優點，為內核引入了模塊化機制，內核高度模塊化；內核被模塊化之

笨辦法34訪問列表元素（列表方法）

第一個相關 pre extend insert ins app 次數 col 列表方法，可以這樣調用：對象.方法（參數）相關內容詳見《python基礎教程》P39： 1.append 用於在列表末尾追加新的對象： >>> lst = [1, 2,

C++11Mutex（互斥鎖）詳解

AR c++ 條件 oid 簡單但是資源 void AD 多個線程訪問同一資源時，為了保證數據的一致性，最簡單的方式就是使用 mutex（互斥鎖）。（1）.直接操作 mutex，即直接調用 mutex 的 lock / unlock 函數。此例順帶使用了 boost:

java 內部類（inner class）詳解

ron isp https nerd 對象重寫 prot print 元素優點 ⒈ 內部類對象可以訪問創建它的對象的實現，包括私有數據； ⒉ 內部類不為同一包的其他類所見，具有很好的封裝性； ⒊ 使用內部類可以很方便的編寫事件驅動程序； ⒋ 匿名內部類可以方便的定義運行

CSS ul（列表樣式）

編號代碼羅馬數字 tex chrom bsp mar 瀏覽器兼容性 int CSS Ul（列表樣式） CSS列表屬性作用如下：設置不同的列表項標記為有序列表設置不同的列表項標記為無序列表設置列表項標記為圖像一、列表在HTML中，有兩種類型的列表：無序列

調用高德地圖API（熱力圖）詳解

ocs use map asc type contain maps key script 具體腳本語言如下： <!doctype html> <html> <head> <meta charset="utf-8">

Android 學習之《第一行程式碼》第二版筆記（十一）詳解廣播機制（一）

一、廣播機制簡介 1. 四大元件之一 2. Android 提供了一套完整的API，允許應用程式自由地傳送和接收廣播。 A. 傳送廣播藉助Intent B. 接收廣播藉助廣播接收器（Broadcast Receiver） 3. 廣播型別： A. 標準廣播：完全非同步執行

Android 學習之《第一行程式碼》第二版筆記（十二）詳解廣播機制（二）

廣播的最佳實踐——實現強制下線功能思路：在介面上彈出一個對話方塊，讓使用者無法進行任何操作，必須點選對話方塊中的確定按鈕，然後回到登入介面即可。一、效果圖 1. 登入介面並輸入賬號密碼 2. 登陸後的介面 3. 強制下線 4. 退回登陸的介面

Java併發（十八）：阻塞佇列BlockingQueue BlockingQueue（阻塞佇列）詳解二叉堆(一)之圖文解析和 C語言的實現多執行緒程式設計：阻塞、併發佇列的使用總結 Java併發程式設計：阻塞佇列 java阻塞佇列 BlockingQueue（阻塞佇列）詳解

阻塞佇列（BlockingQueue）是一個支援兩個附加操作的佇列。這兩個附加的操作是：在佇列為空時，獲取元素的執行緒會等待佇列變為非空。當佇列滿時，儲存元素的執行緒會等待佇列可用。阻塞佇列常用於生產者和消費者的場景，生產者是往佇列裡新增元素的執行緒，消費者是從佇列裡拿元素的執行緒。阻塞佇列就是生產者

jquery mobile Listview （列表檢視）詳講

巢狀列表

數字排序列表ol

只讀列表

拆分按鈕列表

列表分隔data-role="list-divider"

自動分隔data-autodividers="true"

搜尋過濾data-filter="true"

data-filtertext

文字格式和計數氣泡

新增縮圖

內嵌列表樣式data-inset="true"

過濾展示data-filter-reveal="true"

遠端資料的自動過濾listviewbeforefilter

呼叫檢視的外掛listview()

更新列表refresh()

jquery mobile Listview （列表檢視）詳講

說說 Android UI 中的 ListView（列表控制元件）

Adapter型別控制元件之ListView（列表控制元件）

VMware虛擬機文件（後綴）詳解

#26 Linux kernel（內核）詳解與uname、lsmod、modinfo、depmod、insmod、rmmod、modprobe...命令用法

笨辦法34訪問列表元素（列表方法）

C++11Mutex（互斥鎖）詳解

java 內部類（inner class）詳解

CSS ul（列表樣式）

調用高德地圖API（熱力圖）詳解

Android 學習之《第一行程式碼》第二版筆記（十一）詳解廣播機制（一）

Android 學習之《第一行程式碼》第二版筆記（十二）詳解廣播機制（二）

Java併發（十八）：阻塞佇列BlockingQueue BlockingQueue（阻塞佇列）詳解二叉堆(一)之圖文解析和 C語言的實現多執行緒程式設計：阻塞、併發佇列的使用總結 Java併發程式設計：阻塞佇列 java阻塞佇列 BlockingQueue（阻塞佇列）詳解

蘋果個人公司型別開發者賬號申請（99美元）詳解

從零開始學微信小程式開發－－－4、新聞列表頁面的製作（列表渲染）

【轉載】BlockingQueue（阻塞佇列）詳解

Android VCard聯絡人備份恢復（匯入/匯出）詳解

替換空格（空白字元）詳解

二叉樹（Binary Tree）詳解

自動編碼器(Autoencoder)、降噪自動編碼器（Denoising Autoencoder）詳解

jquery mobile Listview （列表檢視）詳講

巢狀列表

數字排序列表ol

只讀列表

拆分按鈕列表

列表分隔data-role="list-divider"

自動分隔data-autodividers="true"

搜尋過濾data-filter="true"

data-filtertext

文字格式和計數氣泡

新增縮圖

內嵌列表樣式data-inset="true"

過濾展示data-filter-reveal="true"

遠端資料的自動過濾listviewbeforefilter

呼叫檢視的外掛listview()

更新列表refresh()

相關推薦