jQuery Mobile教程:[5]列表 - jquery Mobile教程 - 科蚁网
请选择 进入手机版 | 继续访问电脑版
 找回密码
 立即注册

QQ登录

只需一步,快速开始

jQuery Mobile教程:[5]列表

2015-6-2 13:45| 发布者: admin| 查看: 1974| 评论: 1|来自: 网络搜集

摘要: 当你有大量的数据条目需要显示时,列表是一个不错的选择。下面是使用ul时的HTML代码:在jQueryMobile你可以通过data-role="listview"来将一个普通的列表转换成一个非常华丽如同本地APP一般的列表样式:就是这样,仅需要2 ...

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

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

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

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

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

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

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

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

部署你的jQueryMobile站点

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

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

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


鲜花

握手

雷人

路过

鸡蛋
发表评论

最新评论

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

查看全部评论(1)

月度热门文章


关闭

站长推荐上一条 /1 下一条

客服中心 官方QQ群