Html5学习-JQuery mobile--listview学习使用

时间:2021-06-21 19:38:18

8、列表

8.1 列表基础

(1)<li> 标签定义列表项目。 <ol> 标签定义有序列表。 <ul> 标签定义无序列表。 <li> 标签可用在有序列表 (<ol>) 和无序列表 (<ul>) 中。 

(2)为列表元素添加data-role="listview"属性后,jQuery Mobile将本地HTML列表增强为移动视图,默认占据整个屏幕;如果列表包含链接,以触摸按钮方式显示,带有右侧对齐的箭头图标;

无序

有序

<ul data-role="listview" data-theme="c">

<li><a href="#">Action</a></li>

<li><a href="#">Adventure</a></li>

</ul>

<ol data-role="listview" data-theme="c">

<li><a href="#">Action</a></li>

<li><a href="#">Adventure</a></li>

</ol>

Html5学习-JQuery mobile--listview学习使用

Html5学习-JQuery mobile--listview学习使用

8.2 内置列表

(1)data-inset="true"不占据整个屏幕,在一个圆角区域内

(2)data-role="list-divider"一组列表条目的页眉 ;data-divider-theme="a"主题样式

(3)默认文本显示时是左对齐,使用一个包含class="ui-li-aside"类的元素进行包装右对齐

<ul data-role="listview" data-inset="true">

<li data-role="list-divider" data-divider-theme="a">Contact Options</li>

<li><a href="#"><img src="../images/75-phone.png" alt="Call" class="ui-li-icon">Call</a></li>

<li><a href="#"><img src="../images/18-envelope.png" alt="Email" class="ui-li-icon">Email</a></li>

<li><a href="#"><p><strong>6</strong> PM<span class="ui-li-aside"><strong>Birthday Party</strong></span></p></a></li>

<li data-role="list-divider">Wed <p class="ui-li-aside"><strong>Feb 8 2012</strong></p></li>

</ul>

8.3 带有缩略图和图标的列表

(1)缩略图,将图片缩放为80象素正方形

<ul data-role="listview">

<li>

  <a href="#">

<img src="../images/kungfupanda2.jpg" />

<h3>Kung Fu Panda</h3>

<p>Rated: PG</p>

<p>Runtime: 95 min.</p>

  </a>

</li>

</ul>

(2)图标 16×16 使用class="ui-li-icon"

<ul data-role="listview" data-inset="true" data-theme="d">

<li data-role="list-divider">User Reviews</li>

<li>

  <a href="#">

<img src="../images/111-user.png" class="ui-li-icon">

<p><strong>Go See It!</strong></p>

<p>This movie had a strong script and powerful performances from its well-rounded cast.  X-Men is a welcome return to form for the franchise.</p>

  </a>

</li>

<ul>

8.4 拆分按钮列表

创建主按钮和附属按钮,支持多个动作

<ul data-role="listview" data-split-icon="star" data-split-theme="d">

<li>

  <a href="#">

<img src="../images/kungfupanda2.jpg" />

<h3>Kung Fu Panda</h3>

<p>Rated: PG</p>

<p>Runtime: 95 min.</p>

  </a>

  <a href="#">Buy Tickets</a>

</li>

</ul>

Html5学习-JQuery mobile--listview学习使用

8.5 只读列表——移除锚标签

<ul data-role="listview" >

<li>

<img src="../images/kungfupanda2.jpg" />

<h3>Kung Fu Panda</h3>

<p>Rated: PG</p>

<p>Runtime: 95 min.</p>

</li>

</ul>

8.6 列表徽章(list badge

<ul data-role="listview" data-inset="true" data-theme="e" data-count-theme="e">

<li data-role="list-divider">Comments</p></li>

<li>

<img src="../images/111-user.png" class="ui-li-icon">

<p>Thanks for the review.  I plan to check it out this weekend.</p>

<span class="ui-li-count">1 day</span>

</li>

</ul>

Html5学习-JQuery mobile--listview学习使用

8.7 使用搜索栏过滤列表

<div data-role="content">

<ul data-role="listview" id="calendar-list" data-filter="true" data-filter-placeholder="Search...">

<li data-role="list-divider">Mon <p class="ui-li-aside"><strong>Feb 6 2012</strong></p></li>

<li><a href="#"><p><strong>6</strong> PM<span class="ui-li-aside"><strong>Birthday Party</strong></span></p></a></li>

<li data-role="list-divider">Wed <p class="ui-li-aside"><strong>Feb 8 2012</strong></p></li>

<li><a href="#"><p><strong>6</strong> PM<span class="ui-li-aside"><strong>User Group Meeting</strong></span></p></a></li>

<li data-role="list-divider">Fri <p class="ui-li-aside"><strong>Feb 10 2012</strong></p></li>

<li><a href="#"><p><strong>2</strong> PM<span class="ui-li-aside"><strong>Skiing Lessons</strong></span></p></a></li>

<li><a href="#"><p><strong>5</strong> PM<span class="ui-li-aside"><strong>Team Celebration!</strong></span></p></a></li>

</ul>

</div>

修改默认搜索函数,有两种方法用于从写过滤的回调函数

(1)绑定mobileinit事件,并将filterCallback选项设置为任何自定义的搜索函数

$(document).bind('mobileinit',function(){ 

  // Globally configure search filter placeholder text

$.mobile.listview.prototype.options.filterPlaceholder = "Search me..."; 

// Configure a "starts with" search instead of the default

$.mobile.listview.prototype.options.filterCallback = function( text, searchValue ){

// New "Starts With" search, return false when there's a match

return !(text.toLowerCase().indexOf( searchValue ) === 0);

};

});

Callback函数提供两个参数:textsearchValueText参数包含列表条目的文本,而searchValue参数包含搜索过滤器的值。

用于通配符搜索的默认行为是 return text.toLowerCase().indexOf(searchValue) === -1

(2)创建列表后动态配置搜索函数

$('#calendar-page').live("pagebeforeshow", function(){

   $("#calendar-list").listview('option', 'filterCallback', 

function( text, searchValue ){

// New "Starts With" search, return false when there's a match

return !(text.toLowerCase().indexOf( searchValue ) === 0);

}

);

});

8.8 List总结

Html5学习-JQuery mobile--listview学习使用