绪上

一、注意事项

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 学习笔记之二(表单创建)的更多相关文章

  1. Ext JS4 学习笔记之发送表单(Form)时也将表单下的表格(Grid)数据一同发送的方法

    Ext JS4 学习笔记之发送表单(Form)时也将表单下的表格(Grid)数据一同发送的方法 昨天在开发的时候遇到个小问题,就是如何将Grid的内容与Form一起发送到服务器端.默认情况下,表单(F ...

  2. jQuery Mobile学习笔记

    1.获取jQuery mobile 文件,访问jQuerymobile网站下载 (貌似使用jquery mobile后,jquery会自动在网页中添加一些class类,第一次知道的我是被吓呆的!!) ...

  3. Yii学习笔记之四(表单验证 api 翻译)

    1.表单验证 对于用户输入的全部数据,你不能信任,必须加以验证. 全部框架如此.对于yii 能够使用函数  yii\base\Model::validate()  进行验证 他会返回boolean值的 ...

  4. knockoutJS学习笔记08:表单域绑定

    前面的绑定都是用在基本标签上,这章主要讲表单域标签的绑定. 一.value 绑定 绑定标签:input text.textarea. <p>用户名:<input type=" ...

  5. Jquery Mobile 学习笔记(一)

    1.模拟器,IOS:XCODE GENYMOTION  ANDROID:ECLIPSE GENYMOTION 2.jquery mobile data-role=page 代表一个页面 data-po ...

  6. Jquery mobile 学习笔记

    最近学习移动开发,接触到了phonegap,然后又需要开始学习jquery mobile.掌握两者是开发轻应用的前提 在学习jquery mobile中,遇到了许多问题让初学者很是头疼,无意间找到这个 ...

  7. HTML5学习笔记<五>: HTML表单和PHP环境搭建

    HTML表单 1. 表单用于不同类型的用户输入 2. 常用的表单标签: 标签 说明 <form> 表单 <input> 输入域 <textarea> 文本域 < ...

  8. PHP学习笔记 01 之表单传值

    一.HTML传值/PHP接收方法 1.GET(地址栏+问号+数据信息) (1)方式一:表单Form: method = 'get' GET接收数据方式: $_GET['表单元素name对应的值] (2 ...

  9. jQuery Mobile学习日记(二)

    首先依HTML5方式加载,DOCTYPE表示格式为HTML5:主要适用于iPhone.Android等,viewport表示适用于移动终端的适中显示,initial-scale缩放比例在1.0~1.3 ...

  10. HTML学习笔记8:表单

      什么是表单?     一个网页表单可以将用户输入的数据发送到服务器进行处理.因为互联网用户使用复选框,单选按钮或文本字段填写表格,所以WebForms的形式类似文件或数据库.例如,WebForms ...

随机推荐

  1. Myeclipse2014安装&破解激活

    市场上很多JavaWeb的IDE比如Idea(听说用好开发效率会很高),eclipse(插件丰富还免费),但是对于初学者还是为了提高学习的效率(Myeclipse创建web项目的时候可以自动生成一些配 ...

  2. 第3章 DOM

    1.节点,dom有3种节点,元素节点,文本节点,属性节点 2.元素节点是dom的原子,所有的属性节点和文本节点都被元素包含,但并不是所有的元素都包含他们 3.继承,节点树上的元素将继承父元素的样式和属 ...

  3. ReLU激活函数:简单之美

    出自 http://blog.csdn.net/cherrylvlei/article/details/53149381 导语 在深度神经网络中,通常使用一种叫修正线性单元(Rectified lin ...

  4. Tomcat无法clean,无法remove部署的项目

    错误: 对部署在Tomcat下的项目进行clean操作,总是提示Could not load the Tomcat server configuration,错误信息如图: 解决: 原来是将Serve ...

  5. 读《实战 GUI 产品的自动化测试》之:第二步,构建利于维护的自动化测试系统

    转载自:http://www.ibm.com/developerworks/cn/rational/r-cn-guiautotesting2/ 基石——IBM 框架简介 Rational Functi ...

  6. 360 你妈妈知道你跟Python存在兼容问题吗?

    最近在用Python2.7.6版本开发的的过程中发现了一个问题 提示:UnicodeDecodeError:'ascii' codec can't decode bytes 0xb0 刚开始以为是编码 ...

  7. HTTP、HTTP1.0、HTTP1.1、HTTP2.0——笔记

    笔记来源地址:https://mp.weixin.qq.com/s/T2IErLDxbWP1a-VbRkZZHg HTTP: HTTP是WWW数据通信的基础,是应用层协议. HTTP是干什么的?用来给 ...

  8. HDU_1006_Tick and Tick

    Tick and Tick Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Tot ...

  9. win10系统杀毒功能

    最近很多客户的电脑都是win10的,部署web服务时用到的破解软件(exe文件),经常被当成病毒杀死,今天发现可以在杀毒记录里找到刚刚被杀掉的文件,然后点击操作,点击允许,再运行时就可以畅通无阻了

  10. 从Element.getElementsByTagName方法说起

    一.getElementsByTagName方法: 我们先看几个解释:1)W3C:getElementsByTagName() 方法可返回带有指定标签名的对象的集合.没有说明返回值的具体类型.2)菜鸟 ...