jQuery Mobile教程:[5]列表 - jquery Mobile教程 - 科蚁网
请选择 进入手机版 | 继续访问电脑版

jQuery Mobile教程:[5]列表

来自: 网络搜集 收藏 分享 邀请

当你有大量的数据条目需要显示时,列表是一个不错的选择。下面是使用ul时的HTML代码:

jqueryMobile你可以通过data-role="listview"来将一个普通的列表转换成一个非常华丽如同本地APP一般的列表样式:

就是这样,仅需要20个字母,你就搞定了这一切。

除此之外,jQueryMobile还为列表提供了一些增强的选项,以下代码将为列表添加分隔符(divider):

如上面的代码所示,为li元素添加data-role="list-divider"即可实现分隔符的效果。

你还可以为列表添加小气泡来展示一些附加数据。

下面是一个更加复杂的例子,列表中包含了链接,图片,文本:

在你需要展现富文本时这种列表尤为有用,比如显示一个包含照片,名字,平均分等信息的学生名单。

部署你的jQueryMobile站点

当你完成了开发,最后一步当然是让全世界都看到你的工作成果啦~

到现目前为止,jQueryMobile都只是包含了一些HTML,CSS,javascript文件罢了,部署方式与一般的HTML站点无异。用FTP(或者其他你喜欢的方式)上传到你的web服务器就可以了,当然,你要确保你上传了所有用到的文件。

此时已经大功告成,你就可以用你的移动设备访问站点啦!


鲜花

握手

雷人

路过

鸡蛋
该文章已有1人参与评论

请发表评论

全部评论

    • 引用 QQ群521595826 2016-1-6 15:52
      【怎么学好HTML5】想学习HTML5注重的是实战,如果你真的想学习HTML5可以来这个群【521-595-826】这里有很多人指导你一起学习,还有免费的课程分享给你

查看全部评论>>