列表视图:是一种标准的HTML列表,分为有序列表(<ol>)和无序列表(<ul>)

创建: data-role="listview"    默认地,列表中的列表项 <a>会自动转换为按钮(无需data-role="button")

为列表添加圆角和外边距:data-inset="true"

e.g.

<div  data-role="content">

<h2>有序列表:</h2>

<ol  data-role="listview"  data-inset="true">

<li><a  href="#">item1</a></li>

<li><a  href="#">item2</a></li>

</ol>

<h2>无序列表:</h2>

<ul  data-role="listview">

<li><a  href="#">item1</a></li>

<li><a  href="#">item2</a></li>

</ul>

</div>

列表分隔符:data-role="list-divider"

e.g.

<ul  data-role="listview">

<li  data-role="list-divider">欧洲</a></li>

<li><a  href="#">法国</a></li>

<li><a  href="#">德国</a></li>

</ul>

data-autodividers="true"  // 通过对列表项文本的首字母进行大写来自动创建分隔符

e.g.

<ul  data-role="listview"  data-autodividers="true">

<li><a  href="#">Angela</a></li>

<li><a  href="#">Boby</a></li>

<li><a  href="#">Mary</a></li>

<li><a  href="#">Silina</a></li>

</ul>

搜索过滤器:data-filter="true" 会在列表上方添加搜索框

data-filter-placeholder="搜索框中的文本"   //可自定义,默认是“Filter items...”

e.g.

<ul  data-role="listview"  data-autodividers="true"  data-inset="true"  data-filter="true"  data-filter-placeholder="输入搜索条件">

<li>.....</li>......

</ul>

创建没有链接的列表:去掉<a>,简单使用文本代替内容

e.g.

<ul  data-role="listview">

<li>item1</li>

<li>item2</li>

</ul>

jQuery Mobile 列表视图相关推荐

  1. 使用 jQuery Mobile 与 HTML5 开发 Web App (七) —— jQuery Mobile 列表

    如 Kayo 之前所写的文章 <使用 jQuery Mobile 与 HTML5 开发 Web App -- jQuery Mobile 内容格式> 中所述,这次介绍的是 jQuery M ...

  2. w3cschool的jQuery Mobile教程总结

    w3cschool的jQuery Mobile教程总结 jQuery Mobile 是针对触屏智能手机与平板电脑的网页开发框架. jQuery Mobile 工作于所有主流的智能手机和平板电脑上. 一 ...

  3. jQuery Mobile 教程

    http://www.w3school.com.cn/jquerymobile/jquerymobile_icons.asp jQuery Mobile 教程 jQuery Mobile 教程 jQu ...

  4. jQuery mobile插件基础知识笔记

    一.简介 1.Jquery mobile是针对触屏智能手机与平板电脑的website以及在线应用的前端开发框架. jQuery mobile是一个触控优化的HTML5 UI框架,旨在让所有智能手机.平 ...

  5. jquery mobile php,jQuery Mobile 实例

    jQuery Mobile 实例 jQuery Mobile 页面 一个基本的移动网页 多个页面 对话框 jQuery Mobile 页面切换 淡入效果 从后向前翻转效果 流动效果 弹出效果 滑动效果 ...

  6. 在jquery mobile制作app的几个页利用ajax将后台数据json数组动态加载到列表里面

    2019独角兽企业重金招聘Python工程师标准>>> 后来查找资料,发现新增节点后虽然数据加载上去了,但是样式却没有加载上,因此在整个过程中有2个注意事项. 1.利用循环将json ...

  7. jQuery Mobile中列表项ol、ul中的li的data-*选项

    全栈工程师开发手册 (作者:栾鹏) jQuery Mobile 所有data-*选项 jQuery Mobile中列表项li的data-*选项 //带有 data-role="listvie ...

  8. jQuery Mobile中列表listview(ol、ul)的data-*选项

    全栈工程师开发手册 (作者:栾鹏) jQuery Mobile 所有data-*选项 jQuery Mobile中列表listview的data-*选项 //带有 data-role="li ...

  9. WebApp之JQuery Mobile实现火车列表信息查询

    一.项目源代码如下: <!-- --><!DOCTYPE html> <html> <head><meta charset="utf-8 ...

最新文章

  1. vue element 导出blob后台文件流xlsx文件自动下载(且规避乱码)
  2. 容量是GPT-2的1.7倍!谷歌打造神经对话模型Meena
  3. 解析 Java 类和对象的初始化过程 由一个单态模式引出的问题谈起
  4. c语言教程常用32,几个常用运算符
  5. 【深度学习mmdetection错误】——mmdetection 运行报错KeyError:‘ConvWS is already registered in conv layer‘
  6. 随机漫步(random walk)
  7. BIO,NIO,AIO总结(一)
  8. idea编译后target文件不全_IntelliJ IDEA 不能更新target中的java等部分文件
  9. 更改ubuntu的mysql版本为指定版本
  10. ruby中文文档下载
  11. 【Spring 5】响应式Web框架实战(上) 1
  12. 读书笔记(英文) The Ngihtingale and Rose
  13. 我国计算机系统安全保护等级的划分,规范《GB17859-1999-计算机信息系统安全保护等级划分准则》.pdf...
  14. Equalize the Array(思维)
  15. python用两分钟告诉你,怎样暴力破解隔壁老王的 WiFi 密码
  16. Node.js 高级篇(六):手把手教你使用和理解 Multer 实现文件上传,包懂 O(∩_∩)O~
  17. 《程序员练习生》第2期 什么年龄开始编程最好
  18. matlab 实现二值图像孔洞填充函数imfill()
  19. postman 的一些深度功能
  20. mysql 定时任务 每月_mysql 定时任务 每月15号执行

热门文章

  1. 初三毕业班主任压力过大割喉自尽
  2. 非视距成像:硬件设备总结
  3. JAVA JDK源码在线阅读
  4. 7-4 房产税费计算2022 (12 分)
  5. 均值定理最大值最小值公式_数学均值定理怎么求不等式的最大值最小值,求教会(ฅω*ฅ)...
  6. blas、lapack、atlas在Ubuntu上的安装
  7. np.array的axis进行横向纵向的求和运算
  8. CSS解决hover选择器生硬效果
  9. 亚声速 – 超声速等熵喷管流动 数值模拟(文字)
  10. 中央电大c 语言程序设计本科试题,中央电大本科C语言程序设计试题2013年1月.pdf...