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 相关文章推荐
JavaScript窗口功能指南之在窗口中书写内容
Jul 21 Javascript
JS效率个人经验谈(8-15更新),加入range技巧
Jan 09 Javascript
JTrackBar水平拖动效果
Jul 15 Javascript
JavaScript 学习初步 入门教程
Mar 25 Javascript
基于JQuery的一句代码实现表格的简单筛选
Jul 26 Javascript
jQuery中noConflict()用法实例分析
Feb 08 Javascript
深入理解MVC中的时间js格式化
May 19 Javascript
使用PBFunc在Powerbuilder中支付宝当面付款功能
Oct 01 Javascript
vue实现弹框遮罩点击其他区域弹框关闭及v-if与v-show的区别介绍
Sep 29 Javascript
bootstrapValidator表单校验、更改状态、新增、移除校验字段的实例代码
May 19 Javascript
vue配置多代理服务接口地址操作
Sep 08 Javascript
关于Javascript闭包与应用的详解
Apr 22 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中利用wsdl创建标准webservice的实现代码
2011/12/07 PHP
浅析PHP中的UNICODE 编码与解码
2013/06/29 PHP
浅谈PHP eval()函数定义和用法
2016/06/21 PHP
PHP Laravel 上传图片、文件等类封装
2017/08/16 PHP
javascript replace方法与正则表达式
2008/02/19 Javascript
javascript创建createXmlHttpRequest对象示例代码
2014/02/10 Javascript
jquery实现用户打分评分特效
2015/05/28 Javascript
JavaScript图片轮播代码分享
2015/07/31 Javascript
JavaScript获取浏览器信息的方法
2015/11/20 Javascript
JS动态插入并立即执行回调函数的方法
2016/04/21 Javascript
JavaScript关于提高网站性能的几点建议(一)
2016/07/24 Javascript
jQuery动态生成不规则表格(前后端)
2017/02/21 Javascript
canvas绘图不清晰的解决方案
2017/02/28 Javascript
vue项目中仿element-ui弹框效果的实例代码
2019/04/22 Javascript
解决vue+ element ui 表单验证有值但验证失败问题
2020/01/16 Javascript
在vue中使用cookie记住用户上次选择的实例(本次例子中为下拉框)
2020/09/11 Javascript
python用ConfigObj读写配置文件的实现代码
2013/03/04 Python
使用Python求解最大公约数的实现方法
2015/08/20 Python
pandas带有重复索引操作方法
2018/06/08 Python
Python给定一个句子倒序输出单词以及字母的方法
2018/12/20 Python
详解使用python绘制混淆矩阵(confusion_matrix)
2019/07/14 Python
解决django 新增加用户信息出现错误的问题
2019/07/28 Python
Python根据服务获取端口号的方法
2019/09/25 Python
python常用数据重复项处理方法
2019/11/22 Python
解决springboot yml配置 logging.level 报错问题
2020/02/21 Python
pycharm 实现光标快速移动到括号外或行尾的操作
2021/02/05 Python
The Hut德国站点:时装、家居用品、美容等
2016/09/23 全球购物
美国最好的钓鱼、狩猎和划船装备商店:Bass Pro Shops
2018/12/02 全球购物
自荐信的五个重要部分
2013/10/29 职场文书
品质主管岗位职责
2014/03/16 职场文书
机关作风建设心得体会
2014/10/22 职场文书
2015年度员工自我评价范文
2015/03/11 职场文书
退货证明模板
2015/06/23 职场文书
2016春季幼儿园大班开学寄语
2015/12/03 职场文书
2016年父亲节寄语
2015/12/04 职场文书
MySQL 计算连续登录天数
2022/05/11 MySQL