HTML5开发移动web应用—JQuery Mobile(2)-列表
2016-03-11 12:51
656 查看
Jquery Mobile中提供了***列表的组建,它的data-view为listview。下面是一个典型的Jquery Mobile列表,代码如下:
在这些最基本的功能之上,我们可以继续添加Jquery Mobile中为我们提供定制好的样式或者功能。下面的代码中我们利用data-inset属性为列表添加圆角和外边距:
可以设定自动排序,比如所有的都是字母通过autodividers可以自动按首字母排序,代码如下:
如果我们想为列表添加搜索功能,可以将data-filter属性设置为true,这样列表就会自动根据用户输入的信息显示删选后的结果。与此配套的data-filter-placeholder可以设定搜索框默认占位符:
在jquery Mobile中,我们为列表添加图片的时候,图片会自动适应列表的大小,变成80*80像素,代码如下:
如果想想使用16*16px的小图标,在img的class上添加ui-li-icon即可:
最后,现在手机上比较流行的列表数量提示效果,也可以通过Jquery Mobile实现,代码如下:
<div data-role="page"id="pageone"> <div data-role="content"> <h2>有序列表:</h2> <ol data-role="listview"> <li><a href="#">列表项</a></li> <li><a href="#">列表项</a></li> <li><a href="#">列表项</a></li> </ol> <h2>无序列表:</h2> <ul data-role="listview"> <li><a href="#">列表项</a></li> <li><a href="#">列表项</a></li> <li><a href="#">列表项</a></li> </ul> </div> </div>上面我们定义了两种类型的列表,一个是有序列表(ul),另一个是无序列表(ol)。这两种列表的定义和HTML相同,只要在相应的标签中添加data-role="listview"属性即可。
在这些最基本的功能之上,我们可以继续添加Jquery Mobile中为我们提供定制好的样式或者功能。下面的代码中我们利用data-inset属性为列表添加圆角和外边距:
<ul data-role="listview"data-inset="true">我们经常看到一种列表,它们对内容进行了分组,即相同列表的选项放在同一个大标题下。Jquery Mobile中也为我们提供了实现这种功能的简单组建,list-divider:
<ul data-role="listview"> <li data-role="list-divider">欧洲</li> <li><a href="#">法国</a></li> <li><a href="#">德国</a></li> </ul>
可以设定自动排序,比如所有的都是字母通过autodividers可以自动按首字母排序,代码如下:
<ul data-role="listview"data-autodividers="true"> <li><a href="#">Adam</a></li> <li><a href="#">Angela</a></li> <li><a href="#">Bill</a></li> <li><a href="#">Calvin</a></li> ... </ul>
如果我们想为列表添加搜索功能,可以将data-filter属性设置为true,这样列表就会自动根据用户输入的信息显示删选后的结果。与此配套的data-filter-placeholder可以设定搜索框默认占位符:
<ul data-role="listview"data-filter="true" data-filter-placeholder="搜索姓名">
在jquery Mobile中,我们为列表添加图片的时候,图片会自动适应列表的大小,变成80*80像素,代码如下:
<ul data-role="listview"> <li><a href="#"><img src="chrome.png"></a></li> </ul>
如果想想使用16*16px的小图标,在img的class上添加ui-li-icon即可:
<li><a href="#"><imgsrc="us.png" alt="USA"class="ui-li-icon">USA</a></li>
最后,现在手机上比较流行的列表数量提示效果,也可以通过Jquery Mobile实现,代码如下:
<ul data-role="listview"> <li><a href="#">Inbox<spanclass="ui-li-count">335</span></a></li> <li><a href="#">Sent<spanclass="ui-li-count">123</span></a></li> <li><a href="#">Trash<spanclass="ui-li-count">7</span></a></li> </ul>
相关文章推荐
- 使用原生js+jquery 对加载好的表格进行部分列的合并
- 基于jQuery日历插件制作日历
- jquery 判断checkbox是否选中
- jquery 删除cookie失效的解决方法
- jquery 过滤器
- 【jquery】jquery插件的拓展方法
- JQuery的change无效
- jQuery中的选择器
- jQuery对下拉框Select操作总结
- jquery中的prop和attr比较区别
- jQuery笔记
- JQuery中serialize()、serializeArray()和param()的使用方法
- jQuery刷新div内容,并对刷新后元素绑定事件。$(document).on()
- jQuery EasyUI使用教程之合并数据网格的单元格
- JQuery设置和去除disabled属性
- jQuery Html控件基本操作(日常收集整理)
- jquery UI 实例——拖拽(Draggable)
- 【jquery】jquery的各种方法的积累
- HTML5与JQuery混合应用:选座功能…
- html5的自定义data-*属性和jquery的data()方法的使用示例