绪上

一、注意事项

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. 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 ...

  2. Spark学习之数据读取与保存(4)

    Spark学习之数据读取与保存(4) 1. 文件格式 Spark对很多种文件格式的读取和保存方式都很简单. 如文本文件的非结构化的文件,如JSON的半结构化文件,如SequenceFile结构化文件. ...

  3. postgreSQL在Centos6下编译安装

    1.准备安装源 下载地址:https://www.postgresql.org/ftp/source/ 下载并解压. 2.软件编译安装 配置.检查安装环境 ./configure --prefix=/ ...

  4. Java 基础入门随笔(10) JavaSE版——单例设计模式

    设计模式:对问题行之有效的解决方式.其实它是一种思想. 1.单例设计模式. 解决的问题:就是可以保证一个类在内存中的对象唯一性.(单个实例) 使用单例设计模式需求:必须对于多个程序使用同一个配置信息对 ...

  5. oracle查询性能优化

    原文http://www.cnblogs.com/cnjava/archive/2013/02/28/2937699.html 讲解的oracle数据库面对大数据如何优化查询.

  6. Intel Processor Exception Handling

    当一个进程的行为超出预期时,系统将把它kill掉. On Intel IA-32 and Intel 64 architecture processors, each architecturally- ...

  7. python游戏开发:pygame事件与设备轮询

    一.pygame事件 1.简介 pygame事件可以处理游戏中的各种事情.其实在前两节的博客中,我们已经使用过他们了.如下是pygame的完整事件列表: QUIT,ACTIVEEVENT,KEYDOW ...

  8. ThinkPHP---TP功能类之上传

    [一]概论 (1)上传操作的核心操作:移动临时文件(move_upload_file),在ThinkPHP里封装了上传类Upload.class.php (2)上传类Upload.class.php代 ...

  9. Android 各大网络请求库的比较及实战

    自己学习android也有一段时间了,在实际开发中,频繁的接触网络请求,而网络请求的方式很多,最常见的那么几个也就那么几个.本篇文章对常见的网络请求库进行一个总结. HttpUrlConnection ...

  10. enote笔记法的思考

    章节:enote笔记法的思考   why enote笔记法: key1)大脑喜欢颜色. 我们的大脑天生就喜欢颜色.对颜色很敏感,这是由我们人类过去的演化历程决定的. 你可以理解为,文字有了颜色,让这个 ...