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 ...
随机推荐
- Myeclipse2014安装&破解激活
市场上很多JavaWeb的IDE比如Idea(听说用好开发效率会很高),eclipse(插件丰富还免费),但是对于初学者还是为了提高学习的效率(Myeclipse创建web项目的时候可以自动生成一些配 ...
- 第3章 DOM
1.节点,dom有3种节点,元素节点,文本节点,属性节点 2.元素节点是dom的原子,所有的属性节点和文本节点都被元素包含,但并不是所有的元素都包含他们 3.继承,节点树上的元素将继承父元素的样式和属 ...
- ReLU激活函数:简单之美
出自 http://blog.csdn.net/cherrylvlei/article/details/53149381 导语 在深度神经网络中,通常使用一种叫修正线性单元(Rectified lin ...
- Tomcat无法clean,无法remove部署的项目
错误: 对部署在Tomcat下的项目进行clean操作,总是提示Could not load the Tomcat server configuration,错误信息如图: 解决: 原来是将Serve ...
- 读《实战 GUI 产品的自动化测试》之:第二步,构建利于维护的自动化测试系统
转载自:http://www.ibm.com/developerworks/cn/rational/r-cn-guiautotesting2/ 基石——IBM 框架简介 Rational Functi ...
- 360 你妈妈知道你跟Python存在兼容问题吗?
最近在用Python2.7.6版本开发的的过程中发现了一个问题 提示:UnicodeDecodeError:'ascii' codec can't decode bytes 0xb0 刚开始以为是编码 ...
- HTTP、HTTP1.0、HTTP1.1、HTTP2.0——笔记
笔记来源地址:https://mp.weixin.qq.com/s/T2IErLDxbWP1a-VbRkZZHg HTTP: HTTP是WWW数据通信的基础,是应用层协议. HTTP是干什么的?用来给 ...
- HDU_1006_Tick and Tick
Tick and Tick Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others)Tot ...
- win10系统杀毒功能
最近很多客户的电脑都是win10的,部署web服务时用到的破解软件(exe文件),经常被当成病毒杀死,今天发现可以在杀毒记录里找到刚刚被杀掉的文件,然后点击操作,点击允许,再运行时就可以畅通无阻了
- 从Element.getElementsByTagName方法说起
一.getElementsByTagName方法: 我们先看几个解释:1)W3C:getElementsByTagName() 方法可返回带有指定标签名的对象的集合.没有说明返回值的具体类型.2)菜鸟 ...