jquery-mobile 学习笔记之二(表单创建)
绪上
一、注意事项
1. <form> 元素必须设置 method 和 action 属性
2. 每一个表单元素必须设置唯一的 "id" 属性。
该 id 在网站的页面中必须是唯一的。
这是由于 jQuery Mobile 的单页面导航模型同意很多不同的“页面”同一时候呈现。
3. 每一个表单元素必须有一个标记(label)。
请设置 label 的 for 属性来匹配元素的 id。
二、各种属性的使用
【文本框】
data-role="fieldcontain" 大于480px 自己主动与label 同到一行
<div data-role="fieldcontain">
<label for="lname">姓:</label>
<input type="text" name="lname" id="lname">
<label for="fname">名:</label>
<input type="text" name="fname" id="fname">
</div>
假设不希望使用 jquery-mobile的样式
data-role="none"
【搜索框】
加上data-role="fieldcontain" 一行 不加每一个标签一行
<div data-role="fieldcontain">
<label for="search">Search:</label>
<input type="search" name="search" id="search">
<div data-role="fieldcontain">
【单选框】
<fieldset data-role="controlgroup">
<legend>请选择您的性别:</legend>
<label for="male">男性</label>
<input type="radio" name="gender" id="male" value="male">
<label for="female">女性</label>
<input type="radio" name="gender" id="female" value="female">
</fieldset>
【复选框】
<fieldset data-role="controlgroup">
<legend>请选择您喜爱的颜色:</legend>
<label for="red">红色</label>
<input type="checkbox" name="favcolor" id="red" value="red">
<label for="green">绿色</label>
<input type="checkbox" name="favcolor" id="green" value="green">
<label for="blue">蓝色</label>
<input type="checkbox" name="favcolor" id="blue" value="blue">
</fieldset>
[注意]:单复选水平分组
可在fieldset 标签中加入属性
data-type="horizontal"
预选某个button 能够使用:
input 的 checked
【选择菜单】
普通选择菜单,有点丑
<fieldset data-role="fieldcontain">
<label for="day">选择日期</label>
<select name="day" id="day">
<option value="mon">星期一</option>
<option value="tue">星期二</option>
<option value="wed">星期三</option>
</select>
</fieldset>
自己定义选择菜单
使用属性:data-native-menu="false"
<fieldset data-role="fieldcontain">
<label for="day">选择天</label>
<select name="day" id="day" data-native-menu="false">
<option value="mon">星期一</option>
<option value="tue">星期二</option>
<option value="wed">星期三</option>
<option value="thu">星期四</option>
<option value="fri">星期五</option>
<option value="sat">星期六</option>
<option value="sun">星期日</option>
</select>
</fieldset>
【多选菜单】
须要使用自己定义的
multiple="multiple"
data-native-menu="false"
<fieldset>
<label for="day">您能够选择多天:</label>
<select name="day" id="day" multiple="multiple" data-native-menu="false">
<option>天</option>
<option value="mon">星期一</option>
<option value="tue">星期二</option>
<option value="wed">星期三</option>
<option value="thu">星期四</option>
<option value="fri">星期五</option>
<option value="sat">星期六</option>
<option value="sun">星期日</option>
</select>
</fieldset>
【滑动条】
<div data-role="fieldcontain">
<label for="points">Points:</label>
<input type="range" name="points" id="points" value="50" min="0" max="100">
</div>
max - 规定同意的最大值
min - 规定同意的最小值
step - 规定合法的数字间隔
value - 规定默认值
<div data-role="fieldcontain">
<label for="points">Points:</label>
<input type="range" name="points" id="points" value="50" min="0" max="100" data-highlight="true">
</div>
【翻转切换开关】
data-role="slider"
默认选中可加 selected
<div data-role="fieldcontain">
<label for="switch">Toggle Switch:</label>
<select name="switch" id="switch" data-role="slider">
<option value="on">On</option>
<option value="off">Off</option>
</select>
</div>
-----颜色主题------
【主题样式】
a 默认。
黑色背景上的白色文本。
b 蓝色背景上的白色文本 / 灰色背景上的黑色文本
c 亮灰色背景上的黑色文本
d 白色背景上的黑色文本
e 橙色背景上的黑色文本
普通情况下 使用上面的颜色 能够直接使用属性
data-theme="e"
假设要改变对话框(遮罩)的背景色
data-overlay-theme="e" (放在page上)
改变可折叠的背景颜色
data-theme="b" data-content-theme="e" (放在collapsible)
主题划分button
data-split-theme="e" (放在 listview)
【加入新样式】
/*为工具条加入样式*/
改变背景色 须要改俩个地方:background 和 background-image .ui-bar-f{border:1px solid #333;
background:#f00;
color:#fff;font-weight:700;
text-shadow:0 -1px 0 #000;
background-image:-webkit-gradient(linear,left top,left bottom,from(#3c3c3c),to(#111));
background-image:-webkit-linear-gradient(#3c3c3c,#111);
background-image:-moz-linear-gradient(#3c3c3c,#111);
background-image:-ms-linear-gradient(#3c3c3c,#111);
background-image:-o-linear-gradient(#3c3c3c,#111);
background-image:linear-gradient(#3c3c3c,#111)
} .ui-bar-f,.ui-bar-f input,.ui-bar-f select,.ui-bar-f textarea,.ui-bar-f button{font-family:Helvetica,Arial,sans-serif}
.ui-bar-f .ui-link-inherit{color:#fff}
.ui-bar-f a.ui-link{color:#7cc4e7;font-weight:700}
.ui-bar-f a.ui-link:visited{color:#2489ce}
.ui-bar-f a.ui-link:hover{color:#2489ce}
.ui-bar-f a.ui-link:active{color:#2489ce} /*为内容加入样式*/
.ui-body-f{font-weight:bold;color:purple;} .ui-body-f,.ui-overlay-f{border:1px solid #444;
background:#222;color:#fff;
text-shadow:0 1px 0 #111;
font-weight:400;
background-image:-webkit-gradient(linear,left top,left bottom,from(#444),to(#222));
background-image:-webkit-linear-gradient(#444,#222);
background-image:-moz-linear-gradient(#444,#222);
background-image:-ms-linear-gradient(#444,#222);
background-image:-o-linear-gradient(#444,#222);
background-image:linear-gradient(#444,#222)
}
.ui-overlay-f{background-image:none;border-width:0}
.ui-body-f,.ui-body-f input,.ui-body-f select,.ui-body-f textarea,.ui-body-f button{font-family:Helvetica,Arial,sans-serif}
.ui-body-f .ui-link-inherit{color:#fff}
.ui-body-f .ui-link{color:#2489ce;font-weight:700}
.ui-body-f .ui-link:visited{color:#2489ce}
.ui-body-f .ui-link:hover{color:#2489ce}
.ui-body-f .ui-link:active{color:#2489ce}
jquery-mobile 学习笔记之二(表单创建)的更多相关文章
- Ext JS4 学习笔记之发送表单(Form)时也将表单下的表格(Grid)数据一同发送的方法
Ext JS4 学习笔记之发送表单(Form)时也将表单下的表格(Grid)数据一同发送的方法 昨天在开发的时候遇到个小问题,就是如何将Grid的内容与Form一起发送到服务器端.默认情况下,表单(F ...
- jQuery Mobile学习笔记
1.获取jQuery mobile 文件,访问jQuerymobile网站下载 (貌似使用jquery mobile后,jquery会自动在网页中添加一些class类,第一次知道的我是被吓呆的!!) ...
- Yii学习笔记之四(表单验证 api 翻译)
1.表单验证 对于用户输入的全部数据,你不能信任,必须加以验证. 全部框架如此.对于yii 能够使用函数 yii\base\Model::validate() 进行验证 他会返回boolean值的 ...
- knockoutJS学习笔记08:表单域绑定
前面的绑定都是用在基本标签上,这章主要讲表单域标签的绑定. 一.value 绑定 绑定标签:input text.textarea. <p>用户名:<input type=" ...
- Jquery Mobile 学习笔记(一)
1.模拟器,IOS:XCODE GENYMOTION ANDROID:ECLIPSE GENYMOTION 2.jquery mobile data-role=page 代表一个页面 data-po ...
- Jquery mobile 学习笔记
最近学习移动开发,接触到了phonegap,然后又需要开始学习jquery mobile.掌握两者是开发轻应用的前提 在学习jquery mobile中,遇到了许多问题让初学者很是头疼,无意间找到这个 ...
- HTML5学习笔记<五>: HTML表单和PHP环境搭建
HTML表单 1. 表单用于不同类型的用户输入 2. 常用的表单标签: 标签 说明 <form> 表单 <input> 输入域 <textarea> 文本域 < ...
- PHP学习笔记 01 之表单传值
一.HTML传值/PHP接收方法 1.GET(地址栏+问号+数据信息) (1)方式一:表单Form: method = 'get' GET接收数据方式: $_GET['表单元素name对应的值] (2 ...
- jQuery Mobile学习日记(二)
首先依HTML5方式加载,DOCTYPE表示格式为HTML5:主要适用于iPhone.Android等,viewport表示适用于移动终端的适中显示,initial-scale缩放比例在1.0~1.3 ...
- HTML学习笔记8:表单
什么是表单? 一个网页表单可以将用户输入的数据发送到服务器进行处理.因为互联网用户使用复选框,单选按钮或文本字段填写表格,所以WebForms的形式类似文件或数据库.例如,WebForms ...
随机推荐
- es6之数据结构 set,WeakSet,mapWeakMap
{ let list = new Set(); list.add(1); list.add(2); list.add(1); console.log(list); //Set(2) {1, 2} le ...
- Spark学习之数据读取与保存(4)
Spark学习之数据读取与保存(4) 1. 文件格式 Spark对很多种文件格式的读取和保存方式都很简单. 如文本文件的非结构化的文件,如JSON的半结构化文件,如SequenceFile结构化文件. ...
- postgreSQL在Centos6下编译安装
1.准备安装源 下载地址:https://www.postgresql.org/ftp/source/ 下载并解压. 2.软件编译安装 配置.检查安装环境 ./configure --prefix=/ ...
- Java 基础入门随笔(10) JavaSE版——单例设计模式
设计模式:对问题行之有效的解决方式.其实它是一种思想. 1.单例设计模式. 解决的问题:就是可以保证一个类在内存中的对象唯一性.(单个实例) 使用单例设计模式需求:必须对于多个程序使用同一个配置信息对 ...
- oracle查询性能优化
原文http://www.cnblogs.com/cnjava/archive/2013/02/28/2937699.html 讲解的oracle数据库面对大数据如何优化查询.
- Intel Processor Exception Handling
当一个进程的行为超出预期时,系统将把它kill掉. On Intel IA-32 and Intel 64 architecture processors, each architecturally- ...
- python游戏开发:pygame事件与设备轮询
一.pygame事件 1.简介 pygame事件可以处理游戏中的各种事情.其实在前两节的博客中,我们已经使用过他们了.如下是pygame的完整事件列表: QUIT,ACTIVEEVENT,KEYDOW ...
- ThinkPHP---TP功能类之上传
[一]概论 (1)上传操作的核心操作:移动临时文件(move_upload_file),在ThinkPHP里封装了上传类Upload.class.php (2)上传类Upload.class.php代 ...
- Android 各大网络请求库的比较及实战
自己学习android也有一段时间了,在实际开发中,频繁的接触网络请求,而网络请求的方式很多,最常见的那么几个也就那么几个.本篇文章对常见的网络请求库进行一个总结. HttpUrlConnection ...
- enote笔记法的思考
章节:enote笔记法的思考 why enote笔记法: key1)大脑喜欢颜色. 我们的大脑天生就喜欢颜色.对颜色很敏感,这是由我们人类过去的演化历程决定的. 你可以理解为,文字有了颜色,让这个 ...