zoukankan      html  css  js  c++  java
  • jquery mobile 移动web(4)

    下拉菜单:
      设置label 元素的for 属性为 select label 元素的文本内容作为选项的名称 定义div元素并设置data-role 属性值为 fieldcontain.

     <div data-role="controlgroup">
        <label for="select" class="select">请选择你的兴趣</label>
        <select name="select" id="select">
          <option>音乐</option>
          <option>电影</option>
          <option>体育</option>
          <option>旅游</option>
        </select>
      </div>

    分组的选择菜单
      要在select 元素制定optgroup。

        <div data-role="controlgroup">
          <label for="select">请选择你的兴趣:</label>
          <select name="select" id="select" data-native-menu="true">
            <optgroup label="娱乐类"/>
            <option>音乐</option>
            <option>电影</option>
            <optgroup label="文体累"/>
            <option>体育</option>
            <option>旅游</option>
          </select>
        </div>

    禁用指定Option 数据项的选择菜单

      <div data-role="controlgroup">
          <label for="select">请选择你的兴趣:</label>
          <select name="select" id="select" data-native-menu="true">
            <optgroup label="娱乐类"/>
            <option disabled="">音乐</option>
            <option>电影</option>
            <optgroup label="文体累"/>
            <option>体育</option>
            <option>旅游</option>
          </select>
      </div>

    普通连接列表

    <div data-role="page">
          <header data-role="header">
            <h1>列表例</h1>
          </header>
          <div data-role="content">
            <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>
            </ul>
          </div>
      </div>

    多层次嵌套列表。
      

    <div data-role="page">
        <header data-role="header">
          <h1>列表例</h1>
        </header>
        <div data-role="content">
          <ul data-role="listview" data-theme="g">
            <li>
    
              <a href="#" data-add-back-btn="true">List 1</a>
              <p >这是第一层</p>
              <ul>
                <li>
                  <a>subList 1 of 1</a>
                  <a>subList 1 of 2</a>
                  <a>subList 1 of 3</a>
                </li>
              </ul>
            </li>
            <li>
    
              <a href="#" data-add-back-btn="true">List 2</a>
              <p >这是第二层</p>
              <ul>
                <li>
                  <a>subList 2 of 1</a>
                  <a>subList 2 of 2</a>
                  <a>subList 2 of 3</a>
                </li>
              </ul>
            </li>
          <li>
    
            <a href="#" data-add-back-btn="true">List 3</a>
            <p >这是第三层</p>
            <ul>
              <li>
                <a>subList 3 of 1</a>
                <a>subList 3 of 2</a>
                <a>subList 3 of 3</a>
              </li>
            </ul>
        </li>
      </ul>
      </div>
      </div>
  • 相关阅读:
    java中date日期格式的各种转换
    idea配置网络代理
    idea连接操作数据库
    数据库mysql之慢查询优化
    【统一异常处理】@ControllerAdvice + @ExceptionHandler 全局处理 Controller 层异常
    freemarker【FTL】常见语法大全
    MySQL高级知识(七)——索引面试题分析
    MySQL高级知识(八)——ORDER BY优化
    MySQL高级知识(六)——索引优化
    MySQL高级知识(四)——Explain
  • 原文地址:https://www.cnblogs.com/nmxs/p/5058448.html
Copyright © 2011-2022 走看看