jQuery mobile 移动web(4)


移动互联网的发展,促生了各种各样的移动Web框架。jQuery Mobile 是一个针对触摸体验的 web UI 开发框架,很容易就可以把 Web App 包装成适合 Android 与 iOS等触屏移动设备的 Javascript 库,与 HTML5结合可以很方便快速的开发出一款具有良好界面及用户体验的 Web App,而且不需要安装任何东西,只需将需要的 *.js 和 *.css 文件直接包含到 web 页面中即可。

下拉菜单:

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

以上内容是小编给大家分享的jQuery mobile 移动web(4)的相关知识,希望大家喜欢。



相关阅读:
javascript动态添加、修改、删除对象的属性与方法详解
Java图形化编程中的键盘事件设计简介
浅析Js中的单引号与双引号问题
Windows创建家庭组需要开启哪些服务和协议?
C#键盘输入回车键实现点击按钮效果的方法
JavaScript知识点总结(十一)之js中的Object类详解
centos6.4安装CloudStack 4.2(开源云计算平台)详解
Linux系统单个文件夹大小怎么限制?
C#百万数据查询出现超时问题的解决方法
Cocos2d-x 3.x入门教程(二):Node节点类
javascript 弹出的窗口返回值给父窗口具体实现
PHP中Session引起的脚本阻塞问题解决办法
如何让Win10开机进入平板模式?开机进入平板模式的方法
ThinkPHP CURD方法之field方法详解
快速导航

Copyright © 2016 phpStudy | 皖ICP备18014864号-4