可折叠功能块。
  div 元素的 data-role 属性设置为 collapsible
  代码如下:
    <div data-role="collapsible">
      <h3>可折叠区域标题</h3>
      <p>这是一个折叠区域的内容,这是一个折叠区域的内容,这是一个折叠区域的内容,这是一个折叠区域的内容,这是一个折叠区域的内容,
        这是一个折叠区域的内容,这是一个折叠区域的内容,这是一个折叠区域的内容,这是一个折叠区域的内容,
        这是一个折叠区域的内容,这是一个折叠区域的内容,这是一个折叠区域的内容,</p>
    </div>

创建手风琴效果。
  在最外层的div元素定义 data-role 属性值为 collapsible-set

  Form表单。
    1普通文本框。
      <label for="name">name:</label>
      <input type="text" name="name" id="name" value="">
    2.密码文本框
      <label for="password">passwored</label>
      <input type="password" name="password" id="password" value="">
    3.文本类型文
      <label for="content">content:</label>
      <textarea cols="40" rows="4" name="content" id="content"></textarea>
    4.Number 类型
      <label for="number">password</label>
      <input type="number" name="number" id="number" value="">
    5.tel 类型
      <label for="tel">tel</label>
      <input type="tel" name="telr" id="tel" value="">
    6.email 类型
      <label for="email">email</label>
      <input type="email" name="email" id="email" value="">
    7.URL类型
      <label for="url">url</label>
      <input type="url" name="url" id="url" value="">
    8.search 类型
      <label for="search">search</label>
      <input type="search" name="search" id="search" value="">
    9.Slider 类型
      <label for="slider">slider</label>
      <input type="range" name="range" id="range" value="2" min="0" max="10">
    10.Toggle
      <div data-role="fieldcontain">
        <label for="slider">toggle switches</label>
        <select name="slider" id="slider" data-role="slider">
          <option value="off">关闭</option>
          <option value="on">开启</option>
        </select>
      </div>

单选按钮
  把一组单选按钮放在 fieldset 元素内,同时定义legend 元素表示单选按钮组的名称。 设置fieldset 元素data-role 元素属性为 controlgroup
  表示该元素是一组单选按钮。
  代码如下:
  <fieldset data-role="controlgroup">
    <legend>请选择你的年龄范围:</legend>
    <input type="radio" name="radio-1" id="radio-1" value="any" checked="checked">
    <label for="radio-1">不限</label>
    <input type="radio" name="radio-1" id="radio-2" value="16-22">
    <label for="radio-2">16-22</label>
    <input type="radio" name="radio-1" id="radio-3" value="22-30">
    <label for="radio-3">22-30</label>
  </fieldset>

复选框按钮
  input元素的属性是checkbox 而不是radio.
  <fieldset data-role="controlgroup">
    <legend>点击全选:</legend>
    <input type="checkbox" name="checkbox-1" id="checkbox-1"class="custom">
    <label for="checkbox-1">全选</label>
  </fieldset>

jquery mobile 移动web(3)的更多相关文章

  1. JQuery Mobile移动Web应用开发(1): UI开发工具RID介绍

    工欲善其事,必先利其器. UI工具可以提高我们开发界面的效率,下面对几款工具做个对比: 1. Codiqa,在JQuery Mobile主页能看到这款工具,看到网上这么多人吹捧这个工具,不过是收费的. ...

  2. 利用JQuery Mobile开发web app

    什么是web app web app 是基于web的应用程序,是针对移动设备优化后的web站点,它具有 开发成本低——采用web开发技术,不需要考虑跨平台以及底层适配问题: 升级简单——不需要通知用户 ...

  3. jquery mobile 移动web

    轻量级框架jQuery Mobile 所需文件 <link rel="stylesheet" href="jquery.mobile-1.1.2/jquery.mo ...

  4. jQuery Mobile 移动 web 应用程序框架

    在这里我们主要讲一下如何引用jQuery Mobile(引用了jQuery Mobile,你就能引用jQuery Mobile里已经封装好的代码,让开发更加快捷简单) 从 CDN 引用 jQuery ...

  5. jquery mobile 移动web(6)

    jquery mobile 针对移动端设备的事件类型. 1.touch 事件. tap 快速触摸屏幕并且离开,类似一种完整的点击操作. taphold 触摸屏幕并保持一段时间. swipe 在1秒内水 ...

  6. jquery mobile 移动web(5)

    有序列表 <div data-role="content"> <ol data-role="listview" data-theme=&quo ...

  7. jquery mobile 移动web(2)

    button 按钮 data-role="button" 将超链接变成button. 具有icon 图标的button 组件. 提供了18常用的图标 data-icon =&quo ...

  8. jquery mobile 移动web(1)

    轻量级框架jQuery Mobile 所需文件 <link rel="stylesheet" href="jquery.mobile-1.1.2/jquery.mo ...

  9. jquery mobile 移动web(4)

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

随机推荐

  1. mysql应用学习-windows(64位)安装和配置mysql(5.6.20)

    下载安装包MySQL Installer 下载地址1:http://dev.mysql.com/downloads/windows/installer/ 说明:官网当前版本 5.6.22:虽然只有32 ...

  2. plsql 连接 虚拟机Linux下的Oracle数据库 失败

    plsql 连接 虚拟机Linux下的Oracle数据库 失败2017年09月09日 09:10:23 守望dfdfdf 阅读数:187 标签: oraclelinux 更多个人分类: 工具 软件编辑 ...

  3. CSP学习之ASN.1编码(一)

    一.定义: 是定义抽象数据类型的标准. 是用于描述数据的表示.编码.传输.解码的灵活记法. 它提供一套正式.无歧义和精确的规则,以描述独立于特定计算机硬件的对象结构. 标准的ASN.1编码规则有其基本 ...

  4. ireport 导出excel 分页 和 文本转数字格式的解决方法

    景:ireport 画excel 报表,导出时要求 数据分页,每页包含 标题和页脚 1.画excel 2.处理分页 首先建立一个变量totalNum 用于记录总共有多少条记录,注意设置属性为Integ ...

  5. html 表格单元格的宽度和高度的设置

    做网页的时候,经常会碰到表格宽度对不齐的问题.详细地看了html中表格标签table的高度和宽度设置的细节,现总结如下: 1.table中的width和height设置及其作用:table中设置的he ...

  6. jquery-tags-input 使用经历

    源代码里有这么一段,是在tagsInput这里,第一次初始化的时候是正常的,但当第二次初始化的时候就会出现问题,id的值会组合为  id+new Date().getTime() 暂时不清楚作用是什么 ...

  7. JavaScript 三种工厂模式

    标签(空格分隔): JavaScript 简单工厂模式是工厂函数返回实例化对象或者对象,工厂函数作为一个方法. 工厂方法模式是工厂函数不作改变,将子类放在工厂原型中:工厂函数返回对应的实例化对象:re ...

  8. python操作oracle小测试

    首先使用python操作数据库需要导入cx_Oracle包import cx_Oracle这个包需要单独下载,下载地址:https://pypi.python.org/pypi/cx_Oracle使用 ...

  9. fstat、stat和lstat 区别(转)

    fstat.stat和lstat 区别(转) stat系统调用系列包括了fstat.stat和lstat,它们都是用来返回“相关文件状态信息”的,三者的不同之处在于设定源文件的方式不同. 1 首先隆重 ...

  10. 【[Violet]樱花】

    就是化柿子 我们求 \[\frac{1}{x}+\frac{1}{y}=\frac{1}{n!}\] 的正整数解的个数 喜闻乐见的化柿子了 \[\frac{x+y}{xy}=\frac{1}{n!}\ ...