jQuery Mobile 列表视图

列表视图:是一种标准的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>         

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值