HTML5 经量级框架 jQuery Mobile List 列表 - 7.8

时间2024-01-25 11:18:45发布访客分类HTML浏览497

导读：收集整理的这篇文章主要介绍了html5教程-HTML5 经量级框架 jQuery Mobile List 列表 - 7.8，觉得挺不错的，现在分享给大家，也给大家做个参考。小宝典致力于为广大程序猿（媛）提供高品质的代码服务，请大家多多光顾小...

收集整理的这篇文章主要介绍了html5教程-HTML5 经量级框架 jQuery Mobile List 列表 - 7.8，觉得挺不错的，现在分享给大家，也给大家做个参考。小宝典致力于为广大程序猿（媛）提供高品质的代码服务，请大家多多光顾小站，小宝典在此谢过。

!-- 1.普通链接列表 -->
    ul data-role="listview" data-theme="g">
      li> a href="#"> List 1/a> /li>
      li> a href="#"> List 2/a> /li>
      li> a href="#"> List 3/a> /li>
      li> a href="#"> List 4/a> /li>
      li> a href="#"> List 5/a> /li>

/ul>

    !-- 2.多层次嵌套列表 -->
    ul data-role="listview" data-theme="g">
      li>
        a href="#"> List 1/a>
        p> 这是第一层/p>
        ul data-role="listview" data-theme="g">
          li> a href="#"> List 1 1/a> /li>
          li> a href="#"> List 1 2 /a> /li>
          li> a href="#"> List 1 3/a> /li>
          li> a href="#"> List 1 4/a> /li>
          li> a href="#"> List 1 5/a> /li>
        /ul>
      /li>
      li> a href="#"> List 2/a> /li>
      li> a href="#"> List 3/a> /li>
      li> a href="#"> List 4/a> /li>
      li> a href="#"> List 5/a> /li>

/ul>

    !-- 3.有序编号列表 -->
    ol data-role="listview" data-theme="g">
      li> a href="#"> List 1/a> /li>
      li> a href="#"> List 2/a> /li>
      li> a href="#"> List 3/a> /li>
      li> a href="#"> List 4/a> /li>
      li> a href="#"> List 5/a> /li>

/ol>

    !-- 4.只读模式列表 -->
    ul data-role="listview" data-inset="true">
      li> a href="#"> List 1/a> /li>
      li> a href="#"> List 2/a> /li>
      li> a href="#"> List 3/a> /li>
      li> a href="#"> List 4/a> /li>
      li> a href="#"> List 5/a> /li>

/ul>

    !-- 5.可分割按钮列表 -->
    ul data-role="listview" data-theme="g" data-splIT-icon="gear" data-split-theme="d">
      li> a href="#"> List 1/a> /li>
      li> a href="#"> List 2/a> /li>
      li> a href="#"> List 3/a> /li>
      li> a href="#"> List 4/a> /li>
      li> a href="#"> List 5/a> /li>

/ul>

    !-- 6.列表分隔符 -->
    ul data-role="listview" data-inset="true">
      li data-role="list-pider"> A/li>
      li> a href="#"> List 1-1/a> /li>
      li> a href="#"> List 1-2/a> /li>
      li data-role="list-pider"> B/li>
      li> a href="#"> List 2-1/a> /li>
      li> a href="#"> List 2-2/a> /li>
      li data-role="list-pider"> C/li>
      li> a href="#"> List 3-5/a> /li>
      li> a href="#"> List 3-5/a> /li>

/ul>

    !-- 7.列表搜索过滤器 -->
    ul data-role="listview" data-theme="g" data-filter="true">
      li> a href="#"> aaaa/a> /li>
      li> a href="#"> abb/a> /li>
      li> a href="#"> bb/a> /li>
      li> a href="#"> bc/a> /li>
      li> a href="#"> cc/a> /li>

/ul>

    !-- 8.气泡计数列表 -->
    ul data-role="listview" data-theme="g">
      li>
        a href="#"> aaa/a>
        span class="ui-li-count"> 33/span>
      /li>
      li>
        a href="#"> bbb/a>
        span class="ui-li-count"> 2/span>
      /li>
      li>
        a href="#"> ccc/a>
        span class="ui-li-count"> 12/span>
      /li>
     li>
        a href="#"> dddd/a>
        span class="ui-li-count"> 54/span>
      /li>

/ul>

    !-- 9.显示列表项右侧文本列表 -->
    ul data-role="listview" data-theme="g">
      li>
        a href="#"> aaa/a>
        span class="ui-li-aside"> 熬啊/span>
      /li>
      li>
        a href="#"> bbb/a>
        span class="ui-li-aside"> 版本/span>
      /li>
      li>
        a href="#"> ccc/a>
        span class="ui-li-aside"> 呃呃/span>
      /li>
     li>
        a href="#"> dddd/a>
        span class="ui-li-aside"> 请求/span>
      /li>

/ul>

    !-- 10.列表项含有图片列表 -->
    ul data-role="listview" data-theme="g">
      li>
        img src="gf.png" alt="france" class="ui-li-icon" />
        a href="#"> aaa/a>
        span class="ui-li-count"> 33/span>
      /li>
      li>
        img src="gf.png" alt="france" class="ui-li-icon" />
        a href="#"> bbb/a>
        span class="ui-li-count"> 2/span>
      /li>
      li>
        img src="gf.png" alt="france" class="ui-li-icon" />
        a href="#"> ccc/a>
        span class="ui-li-count"> 12/span>
      /li>
     li>
      img src="gf.png" alt="france" class="ui-li-icon" />
        a href="#"> dddd/a>
        span class="ui-li-count"> 54/span>
      /li>

/ul>

    !-- 11.列表项还有图片列表 -->
    ul data-role="listview" data-theme="g">
      li>
        img src="gf.png"/>

        a href="#"> aaa/a>
        span class="ui-li-count"> 33/span>
      /li>
      li>
        img src="gf.png"/>
        a href="#"> bbb/a>
        span class="ui-li-count"> 2/span>
      /li>
      li>
        img src="gf.png"/>
        a href="#"> ccc/a>
        span class="ui-li-count"> 12/span>
      /li>
     li>
        img src="gf.png"/>
        a href="#"> dddd/a>
        span class="ui-li-count"> 54/span>
      /li>

/ul>

    !-- 12.内嵌列表 -->
    ul data-role="listview" data-theme="g" data-inset="true">
      li> a href="#"> List 1/a> span class="ui-li-count"> 54/span> /li>
      li> a href="#"> List 2/a> span class="ui-li-count"> 54/span> /li>
    /ul>
    ol data-role="listview" data-theme="g" data-inset="true">
      li> a href="#"> List 1/a> /li>
      li> a href="#"> List 2/a> /li>
      li> a href="#"> List 3/a> /li>
    /ol>
    ul data-role="listview" data-theme="g" data-inset="true">
      li> a href="#"> List 1/a> /li>
      li> a href="#"> List 2/a> /li>
      li> a href="#"> List 3/a> /li>

/ul>

/ol>

/ul>

    !-- 5.可分割按钮列表 -->
    ul data-role="listview" data-theme="g" data-split-icon="gear" data-split-theme="d">
      li> a href="#"> List 1/a> /li>
      li> a href="#"> List 2/a> /li>
      li> a href="#"> List 3/a> /li>
      li> a href="#"> List 4/a> /li>
      li> a href="#"> List 5/a> /li>

/ul>

    !-- 11.列表项还有图片列表 -->
    ul data-role="listview" data-theme="g">
      li>
        img src="gf.png"/>

/ul>

觉得可用，就经常来吧！欢迎评论哦！ @L_126_0@，巧夺天工，精雕玉琢。小宝典献丑了！

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！

Class div HTML html5 jQuery post-format-gallery

若转载请注明出处： HTML5 经量级框架 jQuery Mobile List 列表 - 7.8
本文地址： https://pptw.com/jishu/586458.html