jQuery Mobile笔记三

不断学习中，内容会根据进度不断补充和调整，内容来自书籍，网络和本人实践，如有错误欢迎指正！

8、列表

8.1 列表基础

（1）

 标签定义列表项目。 

 标签定义有序列表。 
 标签定义无序列表。 
•  标签可用在有序列表 (
  ) 和无序列表 (
  ) 中。 

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

  无序	有序
  Action Adventure	Action Adventure

  8.2 内置列表

  （1）data-inset="true"不占据整个屏幕，在一个圆角区域内

  （2）data-role="list-divider"一组列表条目的页眉 ；data-divider-theme="a"主题样式

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

  data-inset="true">

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

  • Call
  • Email

  • 6 PMclass="ui-li-aside">Birthday Party

  Wed Feb 8 2012

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

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

  1.   

     Kung Fu Panda

     Rated: PG

     Runtime: 95 min.

       

（2）图标 16×16 使用class="ui-li-icon"

User Reviews

1.   

   class="ui-li-icon">

   Go See It!

   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.

     

8.4 拆分按钮列表

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

data-split-icon="star" data-split-theme="d">

•   

  Kung Fu Panda

  Rated: PG

  Runtime: 95 min.

    

    Buy Tickets

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

2. Kung Fu Panda

   Rated: PG

   Runtime: 95 min.

8.6 列表徽章（list badge）

Comments

3. Thanks for the review.  I plan to check it out this weekend.

   class="ui-li-count">1 day




8.7 使用搜索栏过滤列表

data-filter="true" data-filter-placeholder="Search...">

Mon class="ui-li-aside">Feb 6 2012

4. 6 PMBirthday Party

Wed Feb 8 2012

5. 6 PMUser Group Meeting

Fri Feb 10 2012

6. 2 PMSkiing Lessons

7. 5 PMTeam Celebration!

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

（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函数提供两个参数：text和searchValue。Text参数包含列表条目的文本，而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总结

9、表格

9.1 表格模板

class="">

class="">Block A

class="">Block B