摘要:本文将带你了解 Web App 开发之jQuery Mobile 列表,希望本文对大家学WEBAPP有所帮助。
一.基本的列表
要使用 jQuery Mobile 的列表组件非常简单,只要在 ul, ol 中使用 data-role="listview" 属性即可。
<ul data-role="listview">
<li><a href="#">列表项A</a></li>
<li><a href="#">列表项B</a></li>
</ul>
上面的代码即可生成一个简单的 jQuery Mobile 列表,效果如下图所示(若是有序列表 ol ,则在列表项前会显示对应的序号),另外列表项中若带有链接,则会在列表项中添加一个向右的小箭头。
二.嵌套的列表
在 ul, ol 中再次嵌入 ul, ol 可以生成嵌套列表,例如下面代码所生成的即为嵌套列表
<ul data-role="listview">
<li>老师
<ul>
<li><a href="#home">老师A</a></li>
<li><a href="#home">老师B</a></li>
</ul>
</li>
<li>学生
<ul>
<li><a href="#home">学生A</a></li>
<li><a href="#home">学生B</a></li>
</ul>
</li>
</ul>
效果如下:
jQuery Mobile 会以最高级的列表项内容生成列表,点击某列表项后会生成一个新的页面,该页面以被点击项的文字内容生成一个 header ,并显示子列表内容。具体的效果可以参见文章底部的 demo 。
三.只读列表
上面的例子中,列表项都是带链接的,其实 jQuery Mobile 也支持不带链接的列表,较为常用的是在嵌套列表中嵌入一个不带链接的列表,这种列表称为只读列表, jQuery Mobile 默认将列表样式设置为 “c” 主题样式(纯白无渐变),并把字体字号设置成比可点击的列表较小,以减小列表项大小。
<ul data-role="listview">
<li>列表项A</li>
<li>列表项B</li>
</ul>
四.列表项的缩略图与图标
jQuery Mobile 列表支持在列表项左侧加入一幅图片,只要在 li 标签中添加一幅图片并且作为第一子元素即可,图片大小没有限制, jQuery Mobile 会自动把图片大小缩放为 80px 的正方形(当然实际上所用的图片最好本身大小为 80px 的正方形)。例如,为一个移动版的论坛制作评论列表,正好适合使用这种结构,这时列表项的缩略图是评论者的头像。
<ul data-role="listview" data-split-icon="delete">
<li>
<img src="images/album-hc.jpg" />
<h3>Reviewer A</h3>
<p>jQuery Mobile 很方便的把这类结构调整为你看到的这个样式</p>
</li>
<li>
<img src="images/album-p.jpg" />
<h3>Reviewer B</h3>
<p>jQuery Mobile 很方便的把这类结构调整为你看到的这个样式</p>
</li>
<li>
<img src="images/album-ok.jpg" />
<h3>Reviewer B</h3>
<p>jQuery Mobile 很方便的把这类结构调整为你看到的这个样式</p>
</li>
</ul>
则有如下效果:
五.侧分列表
上面的基本例子中,因为列表项中带有链接,所以点击链接能触发一个事件,若实际的项目中需要一个列表项带有两个操作,则需要另一种结构的列表,也就是侧分列表。这时习惯 PC Web 前端开发的开发者可能会觉得有点奇怪,为什么一个列表项需要多个操作交互,实际上列表这种结构在 Web App 类网页中具有很多方面的用途,而不是只作为简单的信息呈现。比如上面的“评论列表”示例, 我们可以在每条评论的右侧添加一个删除评论按钮,这时则需要两个交互按钮——点击左侧为打开评论者链接(评论者主页),点击右侧删除评论。 jQuery Mobile 为这种结构提供了一种很方便的处理方式——在 li (或 ol)中加入第二个链接, jQuery Mobile 会创建一个竖直的分割线把第二个链接分隔开。
如下面的 HTML 结构:
<ul data-role="listview" data-split-icon="delete">
<li>
<a href="#page2">
<img src="images/album-hc.jpg" />
<h3>Reviewer A</h3>
<p>jQuery Mobile 很方便的把这类结构调整为你看到的这个样式</p>
</a>
<a href="#" data-rel="dialog">Delete</a>
</li>
<li>
<a href="#page2">
<img src="images/album-p.jpg" />
<h3>Reviewer B</h3>
<p>jQuery Mobile 很方便的把这类结构调整为你看到的这个样式</p>
</a>
<a href="#" data-rel="dialog">Delete</a>
</li>
<li>
<a href="#page2">
<img src="images/album-ok.jpg" />
<h3>Reviewer C</h3>
<p>jQuery Mobile 很方便的把这类结构调整为你看到的这个样式</p>
</a>
<a href="#" data-rel="dialog">Delete</a>
</li>
</ul>
则有如下效果:
如效果图所示, jQuery Mobile 会把两个链接的内容以竖直分割线分开,并且第二个链接的文字内容会隐藏起来,以一个标准 Web 按钮代替,标准 Web 按钮的样式可以在 ul 标签上添加 data-split-icon 属性指定,可取值可以参考 《使用 jQuery Mobile 与 HTML5 开发 Web App —— jQuery Mobile 按钮》第二部分“带图标按钮” 中 data-icon 的可取值。另外该按钮的主题样式可以通过在 ul 或 ol 标签上添加 data-split-theme 属性指定,默认为"b"(蓝)。
六.分割列表
分割列表从效果上来看是一种分组列表,而在 HTML 结构上,它与基本列表相同,只是通过 data-role="list-divider" 属性把基本列表转化为分割列表,貌似有点复杂?其实看了下面的代码和效果图就会一目了然。
HTML 代码:
<ul data-role="listview">
<li data-role="list-divider">老师</li>
<li><a href="#page2">老师A</a></li>
<li><a href="#page2">老师B</a></li>
<li data-role="list-divider">学生</li>
<li><a href="#page2">学生A</a></li>
<li><a href="#page2">学生B</a></li>
</ul>
默认情况下分割列表的主题样式为"b"(蓝),开发者可以通过在 ul 或 ol 标签上添加 data-split-theme 属性指定主题样式。
七.搜索过滤框
jQuery Mobile 给开发者提供了一种简便的过滤列表方式,若需要过滤列表只需在 ul 或 ol 标签上添加 data-filter="true" 属性即可。 jQuery Mobile 会自动在列表顶部添加一个搜索框,当用户在搜索框中输入字符时, jQuery Mobile 会自动过滤掉不包含这些字符的列表项。值得注意的是,这个过滤是 Ajax 模式的过滤方式,它不需要等待整个输入完成才开始过滤,每当用户输入字符时, jQuery Mobile 会即时过滤掉不包含这些字符的列表项。
<ul data-role="listview" data-filter="true">
<li><a href="#page2">你</a></li>
<li><a href="#page2">你好</a></li>
<li><a href="#page2">你好啊</a></li>
</ul>
八.其他
jQuery Mobile 支持通过使用语义化的标签来显示列表项中一些常用的信息,如上面的“列表项的缩略图与图标”和“侧分列表”中,列表项中除了描述外还有标题, jQuery Mobile 会按照标题的标签语义处理成不同的文字样式,这里 再以“评论列表”示例进行拓展说明。
如下的代码:
<ul data-role="listview" data-split-icon="delete">
<li data-role="list-divider">评论列表<span class="ui-li-count">3</span></li>
<li>
<img src="images/album-hc.jpg" />
<h3><a href="#page2">Reviewer A</a></h3>
<p>jQuery Mobile 很方便的把这类结构调整为你看到的这个样式</p>
<p class="ui-li-aside">2012-02-25 21:37</p>
</li>
<li>
<img src="images/album-p.jpg" />
<h3><a href="#page2">Reviewer B</a></h3>
<p>jQuery Mobile 很方便的把这类结构调整为你看到的这个样式</p>
<p class="ui-li-aside">2012-02-25 21:45</p>
</li>
<li>
<img src="images/album-ok.jpg" />
<h3><a href="#page2">Reviewer B</a></h3>
<p>jQuery Mobile 很方便的把这类结构调整为你看到的这个样式</p>
<p class="ui-li-aside">2012-02-26 11:55</p>
</li>
</ul>
效果图:
备注:
这个例子中, 把评论中的“删除”按钮舍弃,改为显示评论时间,这时的评论列表更接近于博客的评论列表,以 h3 标签包含评论者名称,表示对评论者的强调, p 标签则包含评论内容,并且把评论者的链接(评论者主页)从侧分列表中的整个左侧都带链接改为只是评论者名称带链接。下面再具体说明一下:
· 使用容器包裹数字,为该容器添加 ui-li-count 的 class 并添加到列表项中, jQuery Mobile 会自动为该容器添加气泡样式用于表示计数。
· 在语义上层次不同的文本 jQuery Mobile 会以不同大小,粗细的字体显示该段文字,以表示文字重要性的不同。
· 补充信息可以用 class 为 ui-li-aside 的容器包裹并放在列表项的下方(如示例中的评论日期), jQuery Mobile 会自动把它呈现在列表项的右侧(这时不能使用侧分列表,因为侧分列表右侧需要显示列表项中的第二个链接)。
九.完整 Demo
完整实例 Demo(建议使用 PC 上的 Firefox、Chrome 等现代浏览器和 IE9+ 或 Android , iPhone/iPad 的系统浏览器浏览)。
您输入的评论内容中包含违禁敏感词
我知道了
请输入正确的手机号码
请输入正确的验证码
您今天的短信下发次数太多了,明天再试试吧!
我们会在第一时间安排职业规划师联系您!
您也可以联系我们的职业规划师咨询:
版权所有 职坐标-一站式IT培训就业服务领导者 沪ICP备13042190号-4
上海海同信息科技有限公司 Copyright ©2015 www.zhizuobiao.com,All Rights Reserved.
沪公网安备 31011502005948号