jquery-mobile表单的创建方法详解


Posted in Javascript onNovember 23, 2016

本文实例讲述了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"

预选某个按钮 可以使用:

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)

主题划分按钮

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程序设计有所帮助。

Javascript 相关文章推荐
jquery1.5.1中根据元素ID获取元素对象的代码
Apr 02 Javascript
Google的跟踪代码 动态加载js代码方法应用
Nov 12 Javascript
通过正则格式化url查询字符串实现代码
Dec 28 Javascript
php显示当前文件所在的文件以及文件夹所有文件以树形展开
Dec 13 Javascript
js中取得变量绝对值的方法
Jan 03 Javascript
关于Jquery中的bind(),on()绑定事件方式总结
Oct 26 Javascript
JS中用三种方式实现导航菜单中的二级下拉菜单
Oct 31 Javascript
微信小程序 实现点击添加移除class
Jun 12 Javascript
详解react使用react-bootstrap当轮子造车
Aug 15 Javascript
layui点击按钮页面会自动刷新的解决方案
Oct 25 Javascript
Vue解决echart在element的tab切换时显示不正确问题
Aug 03 Javascript
如何在JavaScript中使用localStorage详情
Feb 04 Javascript
js获取当前时间(昨天、今天、明天)
Nov 23 #Javascript
浅析Node.js:DNS模块的使用
Nov 23 #Javascript
jquery-mobile基础属性与用法详解
Nov 23 #Javascript
微信小程序 wx.request(接口调用方式)详解及实例
Nov 23 #Javascript
利用jquery获取select下拉框的值
Nov 23 #Javascript
JQuery和PHP结合实现动态进度条上传显示
Nov 23 #Javascript
ionic进入多级目录后隐藏底部导航栏(tabs)的完美解决方案
Nov 23 #Javascript
You might like
1.PHP简介
2006/10/09 PHP
轻松修复Discuz!数据库
2008/05/03 PHP
php对mongodb的扩展(初出茅庐)
2012/11/11 PHP
PHP之APC缓存详细介绍 apc模块安装
2014/01/13 PHP
在win7中搭建Linux+PHP 开发环境
2014/10/08 PHP
php从memcache读取数据再批量写入mysql的方法
2014/12/29 PHP
thinkPHP中create方法与令牌验证实例浅析
2015/12/08 PHP
JavaScript EasyPager 分页函数
2011/05/25 Javascript
js中页面的重新加载(当前页面/上级页面)及frame或iframe元素引用介绍
2013/01/24 Javascript
jquery ajax jsonp跨域调用实例代码
2013/12/11 Javascript
Js实现手机发送验证码时按钮延迟操作
2014/06/20 Javascript
javascript 自定义回调函数示例代码
2014/09/26 Javascript
JS实现的网页倒计时数字时钟效果
2015/03/02 Javascript
JavaScript中的关联数组问题
2015/03/04 Javascript
继续学习javascript闭包
2015/12/03 Javascript
vue动画之点击按钮往上渐渐显示出来的实例
2018/09/29 Javascript
vue+php实现的微博留言功能示例
2019/03/16 Javascript
elementUI vue this.$confirm 和el-dialog 弹出框 移动 示例demo
2019/07/03 Javascript
vue实现整屏滚动切换
2020/06/29 Javascript
给Python中的MySQLdb模块添加超时功能的教程
2015/05/05 Python
Python Socket实现简单TCP Server/client功能示例
2017/08/05 Python
CentOS 6.5中安装Python 3.6.2的方法步骤
2017/12/03 Python
Django中使用Whoosh进行全文检索的方法
2019/03/31 Python
Python初学者常见错误详解
2019/07/02 Python
Win10系统下安装labelme及json文件批量转化方法
2019/07/30 Python
PyTorch的SoftMax交叉熵损失和梯度用法
2020/01/15 Python
CSS3实现网站商品展示效果图
2020/01/18 HTML / CSS
html5记忆翻牌游戏实现思路及代码
2013/07/25 HTML / CSS
美国最大的骑马用品零售商:HorseLoverZ
2017/01/12 全球购物
伯利陶器:Burleigh Pottery
2018/01/03 全球购物
城市轨道专业个人求职信范文
2013/09/23 职场文书
英文版餐饮业求职信
2013/10/18 职场文书
高中毕业自我鉴定
2013/12/19 职场文书
财务支持类个人的自我评价
2014/02/14 职场文书
水利公司纪检监察自我鉴定
2014/02/25 职场文书
Java中API的使用方法详情
2022/04/06 Java/Android