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 相关文章推荐
自己动手开发jQuery插件教程
Aug 25 Javascript
JavaScript中string转换成number介绍
Dec 31 Javascript
js时间戳转为日期格式的方法
Dec 28 Javascript
JS防止网页被嵌入iframe框架的方法分析
Sep 13 Javascript
Javascript 实现计算器时间功能详解及实例(二)
Jan 08 Javascript
JS中实现函数return多个返回值的实例
Feb 21 Javascript
详解vue.js全局组件和局部组件
Apr 10 Javascript
微信小程序商城项目之商品属性分类(4)
Apr 17 Javascript
解决vue的变量在settimeout内部效果失效的问题
Aug 30 Javascript
JavaScript基础教程之如何实现一个简单的promise
Sep 11 Javascript
解决vue-router路由拦截造成死循环问题
Aug 05 Javascript
浅谈javascript事件环微任务和宏任务队列原理
Sep 12 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
用PHP实现弹出消息提示框的两种方法
2013/12/17 PHP
Laravel5.5以下版本中如何自定义日志行为详解
2018/08/01 PHP
jquery中load方法的用法及注意事项说明
2014/02/22 Javascript
javascript获得当前的信息的一些常用命令
2015/02/25 Javascript
javascript判断变量是否有值的方法
2015/04/20 Javascript
AngularJS教程之MVC体系结构详解
2016/08/16 Javascript
JavaScript面向对象编写购物车功能
2016/08/19 Javascript
javascript 解决浏览器不支持的问题
2016/09/24 Javascript
vue2中的keep-alive使用总结及注意事项
2017/12/21 Javascript
基于vue v-for 多层循环嵌套获取行数的方法
2018/09/26 Javascript
原生JS 实现的input输入时表格过滤操作示例
2019/08/03 Javascript
nodejs文件夹深层复制功能
2019/09/03 NodeJs
js实现掷骰子小游戏
2019/10/24 Javascript
python实现的各种排序算法代码
2013/03/04 Python
利用Python实现简单的相似图片搜索的教程
2015/04/23 Python
Python简单进程锁代码实例
2015/04/27 Python
在主机商的共享服务器上部署Django站点的方法
2015/07/22 Python
windows下ipython的安装与使用详解
2016/10/20 Python
Python如何实现守护进程的方法示例
2017/02/08 Python
windows下Python实现将pdf文件转化为png格式图片的方法
2017/07/21 Python
python requests 使用快速入门
2017/08/31 Python
python使用多进程的实例详解
2018/09/19 Python
django创建超级用户时指定添加其它字段方式
2020/05/14 Python
详解向scrapy中的spider传递参数的几种方法(2种)
2020/09/28 Python
基于CSS3实现的几个小loading效果
2018/09/27 HTML / CSS
原生 JS+CSS+HTML 实现时序图的方法
2019/07/31 HTML / CSS
中餐厅主管的职责范文
2014/02/04 职场文书
幼儿园老师寄语
2014/04/03 职场文书
幼儿园课题实施方案
2014/05/14 职场文书
2014年医务科工作总结
2014/12/18 职场文书
先进工作者事迹材料
2014/12/23 职场文书
汽车转让协议书
2015/01/29 职场文书
年会主持人开场白台词
2015/05/29 职场文书
红楼梦读书笔记
2015/06/25 职场文书
Python基础知识之变量的详解
2021/04/14 Python
《进击的巨人》新联动CM 兵长强势出击兽巨人
2022/04/05 日漫