HTML5开发移动web应用—JQuery Mobile(3)-列表

最后更新于:2022-04-01 10:28:59

Jquery Mobile中提供了制作列表的组建,它的data-view为listview。下面是一个典型的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="#">Adama>li>    <li>a href="#">Angelaa>li>    <li>a href="#">Billa>li>    <li>a href="#">Calvina>li>     ...   ul>   ~~~ 如果我们想为列表添加搜索功能,可以将data-filter属性设置为true,这样列表就会自动根据用户输入的信息显示删选后的结果。与此配套的data-filter-placeholder可以设定搜索框默认占位符: ~~~ <ul data-role="listview"data-filter="true" data-filter-placeholder="搜索姓名">   ~~~ 在jquery Mobile中,我们为列表添加图片的时候,图片会自动适应列表的大小,变成80*80像素,代码如下: ~~~ 1. <ul data-role="listview">   2.  <li>a href="#">img src="chrome.png">a>li>   3. <ul>   ~~~ 如果想想使用16*16px的小图标,在img的class上添加ui-li-icon即可: ~~~ <li>a href="#">imgsrcimgsrc="us.png" alt="USA"class="ui-li-icon">USAa>li>   ~~~ 最后,现在手机上比较流行的列表数量提示效果,也可以通过Jquery Mobile实现,代码如下: ~~~ <ul data-role="listview">    <li>a href="#">Inboxspanclassspanclass="ui-li-count">335span>a>li>    <li>a href="#">Sentspanclassspanclass="ui-li-count">123span>a>li>    <li>a href="#">Trashspanclassspanclass="ui-li-count">7span>a>li>   <ul>   ~~~
';