列表视图 data-role="listview"

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的效果显示。