jquery mobile 移动web(3)
可折叠功能块。
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)的更多相关文章
- JQuery Mobile移动Web应用开发(1): UI开发工具RID介绍
工欲善其事,必先利其器. UI工具可以提高我们开发界面的效率,下面对几款工具做个对比: 1. Codiqa,在JQuery Mobile主页能看到这款工具,看到网上这么多人吹捧这个工具,不过是收费的. ...
- 利用JQuery Mobile开发web app
什么是web app web app 是基于web的应用程序,是针对移动设备优化后的web站点,它具有 开发成本低——采用web开发技术,不需要考虑跨平台以及底层适配问题: 升级简单——不需要通知用户 ...
- jquery mobile 移动web
轻量级框架jQuery Mobile 所需文件 <link rel="stylesheet" href="jquery.mobile-1.1.2/jquery.mo ...
- jQuery Mobile 移动 web 应用程序框架
在这里我们主要讲一下如何引用jQuery Mobile(引用了jQuery Mobile,你就能引用jQuery Mobile里已经封装好的代码,让开发更加快捷简单) 从 CDN 引用 jQuery ...
- jquery mobile 移动web(6)
jquery mobile 针对移动端设备的事件类型. 1.touch 事件. tap 快速触摸屏幕并且离开,类似一种完整的点击操作. taphold 触摸屏幕并保持一段时间. swipe 在1秒内水 ...
- jquery mobile 移动web(5)
有序列表 <div data-role="content"> <ol data-role="listview" data-theme=&quo ...
- jquery mobile 移动web(2)
button 按钮 data-role="button" 将超链接变成button. 具有icon 图标的button 组件. 提供了18常用的图标 data-icon =&quo ...
- jquery mobile 移动web(1)
轻量级框架jQuery Mobile 所需文件 <link rel="stylesheet" href="jquery.mobile-1.1.2/jquery.mo ...
- jquery mobile 移动web(4)
下拉菜单: 设置label 元素的for 属性为 select label 元素的文本内容作为选项的名称 定义div元素并设置data-role 属性值为 fieldcontain. <div ...
随机推荐
- Java 条件语句
1.if...else 一个 if 语句包含一个布尔表达式和一条或多条语句. if(布尔表达式) { //如果布尔表达式为true将执行的语句 }else{ //如果布尔表达式为false将执行的语句 ...
- H5插入视频兼容主浏览器
插入视频的方法有很多种,但是有一些方法不兼容. 方法1:DW插入视频利用DW插入的视频为flv格式,操作较简单,但是代码复杂,需要浏览器支持flash插件:火狐浏览器需要手动下载flash插件,比较麻 ...
- CSS动画效果
CSS变形效果 Transform translate:平移 translate(x,y) translateX(x) translateY(y)相对于元素原始位置平移. scale:缩放 大于1放大 ...
- css 平行四边
在视觉设计中,平行四边形往往给人一种动感. 要生成一个平行四边形,只要通过css变形,就可做到: -webkit-transform: skewX(-45deg); 那么生成一个平行四边形的按钮呢?列 ...
- cordova 开发 android app 简要流程
1. 安装cordova:npm install -g cordova --registry=https://registry.npm.taobao.org 2. 创建cordova工程:进入工作目录 ...
- 解决Tensorflow源码安装的之后TensorBoard 无法使用的问题
作者 cnblog 修雨轩陈 我是按照 Tensorflow 下 https://github.com/tensorflow/tensorflow/blob/master/tensorflow/g3 ...
- JS中的继承方式总结
1. 原型链继承(又称类继承) Child.prototype = new Parent(); function Parent (name, age) { this.name = name; this ...
- Android DiskLruCache完全解析,硬盘缓存的最佳方案 --转载
概述 记得在很早之前,我有写过一篇文章 Android高效加载大图.多图解决方案,有效避免程序OOM,这篇文章是翻译自Android Doc的,其中防止多图OOM的核心解决思路就是使用LruCache ...
- Oracle VM virtualBox -Centos6.4 安装后没有网解决方法
1.先修改Oracle VM virtualBox 的网络配置 2.然后启动centos输入: dhclient eth0 3.然后如果没报错的话 输入: ifconfig 就可以查看到ip地址 ...
- February 24 2017 Week 8 Friday
If you fail, don't forget to learn your lesson. 如果你失败了,千万别忘了汲取教训. Frankly speaking, it is easy to ta ...