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 onmouseout 解决办法
Jul 17 Javascript
非常强大的 jQuery.AsyncBox 弹出对话框插件
Aug 29 Javascript
js 阻止子元素响应父元素的onmouseout事件具体实现
Dec 23 Javascript
JS清空多文本框、文本域示例代码
Feb 24 Javascript
深入解析JavaScript编程中的this关键字使用
Nov 09 Javascript
Angularjs通过指令监听ng-repeat渲染完成后执行脚本的方法
Dec 31 Javascript
jQuery插件echarts实现的多柱子柱状图效果示例【附demo源码下载】
Mar 04 Javascript
浅谈Node.js 沙箱环境
May 15 Javascript
微信小程序实现单选选项卡切换效果
Jun 19 Javascript
详解Vue.js中引入图片路径的几种方式
Jun 17 Javascript
Node如何后台数据库使用增删改查功能
Nov 21 Javascript
JavaScript 俄罗斯方块游戏实现方法与代码解释
Apr 08 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除数取整示例
2014/04/24 PHP
windwos下使用php连接oracle数据库的过程分享
2014/05/26 PHP
[原创]CI(CodeIgniter)简单统计访问人数实现方法
2016/01/19 PHP
javascript options属性集合操作代码
2009/12/28 Javascript
jQuery数组处理代码详解(含实例演示)
2012/02/03 Javascript
理解JavaScript的prototype属性
2012/02/11 Javascript
js简易namespace管理器 实例代码
2013/06/21 Javascript
JS远程获取网页源代码实例
2013/09/05 Javascript
js和php如何获取当前url的内容
2013/09/22 Javascript
js保留小数点后几位的写法
2014/01/03 Javascript
jQuery获取标签文本内容和html内容的方法
2015/03/27 Javascript
jQuery插件EnPlaceholder实现输入框提示文字
2015/06/05 Javascript
jquery-tips悬浮提示插件分享
2015/07/31 Javascript
如何使用jquery easyui创建标签组件
2015/11/18 Javascript
详解Angular的内置过滤器和自定义过滤器【推荐】
2016/12/26 Javascript
BootStrap table删除指定行的注意事项(笔记整理)
2017/02/05 Javascript
JavaScript实现form表单的多文件上传
2020/03/27 Javascript
关于jquery layui弹出层的使用方法
2018/04/21 jQuery
浅谈Vue数据响应
2018/11/05 Javascript
vue实现图片上传功能
2020/05/28 Javascript
WebStorm中如何将自己的代码上传到github示例详解
2020/10/28 Javascript
Vue.extend 登录注册模态框的实现
2020/12/29 Vue.js
Python中用Spark模块的使用教程
2015/04/13 Python
Python list操作用法总结
2015/11/10 Python
Python爬虫番外篇之Cookie和Session详解
2017/12/27 Python
Python爬虫爬取百度搜索内容代码实例
2020/06/05 Python
linux面试题参考答案(11)
2012/05/01 面试题
师范生个人推荐信
2013/11/29 职场文书
初中学生评语大全
2014/04/24 职场文书
创业女性典型材料
2014/05/02 职场文书
任命书标准格式
2015/03/02 职场文书
试用期旷工辞退通知书
2015/04/17 职场文书
2015年大学班主任工作总结
2015/04/30 职场文书
2015年学校综合治理工作总结
2015/07/20 职场文书
php7中停止php-fpm服务的方法详解
2021/05/09 PHP
Python趣味挑战之给幼儿园弟弟生成1000道算术题
2021/05/28 Python