当前位置:编程学习 > html/css >>

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-divider">A</li>
      <li><a href="#">List 1-1</a></li>
      <li><a href="#">List 1-2</a></li>
      <li data-role="list-divider">B</li>
      <li><a href="#">List 2-1</a></li>
      <li><a href="#">List 2-2</a></li>
      <li data-role="list-divider">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="#&qu

补充:web前端 , HTML 5 ,
CopyRight © 2012 站长网 编程知识问答 www.zzzyk.com All Rights Reserved
部份技术文章来自网络,