博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
jquery mobile 移动web(4)
阅读量:5962 次
发布时间:2019-06-19

本文共 2565 字,大约阅读时间需要 8 分钟。

下拉菜单:

  设置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>

转载于:https://www.cnblogs.com/nmxs/p/5058448.html

你可能感兴趣的文章
Python高效编程技巧
查看>>
Kafka服务端脚本详解(1)一topics
查看>>
js中var self=this的解释
查看>>
面试题
查看>>
Facebook 接入之获取各个配置参数
查看>>
linux的日志服务器关于屏蔽一些关键字的方法
查看>>
事情的两面性
查看>>
只要会营销,shi都能卖出去?
查看>>
sed单行处理命令奇偶行输出
查看>>
VC++深入详解学习笔记1
查看>>
安装配置discuz
查看>>
线程互互斥锁
查看>>
KVM虚拟机&openVSwitch杂记(1)
查看>>
win7下ActiveX注册错误0x80040200解决参考
查看>>
《.NET应用架构设计:原则、模式与实践》新书博客--试读-1.1-正确认识软件架构...
查看>>
2013 Linux领域年终盘点
查看>>
linux学习之查看程序端口占用情况
查看>>
相逢在栀枝花开的季节
查看>>
linux下git自动补全命令
查看>>
Ubuntu14.04LTS更新源
查看>>