jQuery mobile 学习12 表单的使用方法及访问设备判断
2015-02-27 17:06
387 查看
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%> <% String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; %> <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0"> <link rel="stylesheet" href="./css/jquery.mobile-1.3.0.css"/> <script type="text/javascript" src="./js/jquery-1.8.3.js"></script> <script type="text/javascript"> /*判断设备的属性*/ var deviceAgent = navigator.userAgent.toLowerCase(); var agentID = deviceAgent.match(/(iphone|ipod|ipad|android)/); if(agentID.indexOf("iphone")>=0){ alert("iphone"); } if(agentID.indexOf("ipod")>=0){ alert("ipod"); } if(agentID.indexOf("ipad")>=0){ alert("ipad"); } if(agentID.indexOf("android")>=0){ alert("android"); } </script> <script type="text/javascript" src="./js/jquery.mobile-1.3.0.js"></script> </head> <body> <div data-role="page" id="a"> <div data-role="header" data-position="fixed" data-theme="b"> <h2> a页面的标题 </h2> </div> <!-- 提交表单 jQuery Mobile 自动采用 Ajax 的方式提交表单,默认的 method 为 get ,action 为当前页面的相对路径, 在表单页面和结果页面之间会有平滑的转场过渡,并且可以在表单上使用 data-transition 指定转场效果。 如果不想使用 Ajax 的方式提交表单,可以在全局事件禁用 Ajax (如何全局禁止 Ajax 并不在本文讨论范围, 但会在本系列的后续文章中作详细说明)或是在 form 上添加 data-ajax="false" 属性, 下面是 data-transition 的所有可取值。 slide 滑动(默认值,从左至右滑出), slideup(从下至上滑出), slidedown(从上至下滑出), pop(从中心渐显展开), fade(渐显), flip(翻转)。 --> <!-- 由于 jQuery Mobile 使用 Ajax 导航,因此不同的 page 可以同时加载到一个 DOM 中, 因此 form id 必须整站唯一以保证每个 DOM 的表单 id 都是不同的。 每一个表单元素应该要有相应的 label 对应,label 的 for 值要与元素的 id 相同, 使其在语义上相关,并且可以使用一个带有 data-role="fieldcontain" 属性的 div 或 fieldset 容器包裹, jQuery Mobile 会自动在容器底部增加一条细边框作为分隔。 --> <div data-role="content"> <textarea rows="10" cols="20">jack</textarea> <input type="password"> <div data-role="fieldcontain"> <label for="slider">开关</label> <select name="slider" id="slider" data-role="slider"> <option value="off">关闭</option> <option value="on">开启</option> </select> </div> <div data-role="fieldcontain"> <label for="slider">滑杆</label> <input type="range" name="slider" id="slider" value="0" min="0" max="100" /> </div> <!-- 单选结果选项的下拉框 --> <!-- data-native-menu="false" 这个属性很重要,没有就不能达到JQM的效果哦 --> <div data-role="fieldcontain"> <label for="select-choice-1" class="select">选择列表</label> <select data-native-menu="false" name="select-choice-1" id="select-choice-1"> <option value="12h">12小时</option> <option value="1d">一天</option> <option value="2d">两天</option> <option value="week">一周</option> </select> </div> <!-- 多选结果选项的下拉框 --> <div data-role="fieldcontain"> <label for="select-choice-2" class="select">多项选择列表</label> <select data-native-menu="false" multiple="multiple" name="select-choice-2" id="select-choice-2"> <option value="12h">12小时</option> <option value="1d">一天</option> <option value="2d">两天</option> <option value="week">一周</option> </select> </div> <!-- 分组单选结果选项的下拉框 --> <div data-role="fieldcontain"> <label for="select-choice-3" class="select">分组选择列表</label> <select data-native-menu="false" name="select-choice-3" id="select-choice-3"> <optgroup label="Group1"> <option value="12h">12小时</option> <option value="1d">一天</option> <option value="2d">两天</option> <option value="week">一周</option> </optgroup> <optgroup label="Group2"> <option value="1m">一个月</option> <option value="1q">一季度</option> <option value="1y">一年</option> </optgroup> </select> </div> <div data-role="fieldcontain"> <label for="text">文本输入框</label> <input type="text" name="text" id="text" value="" /> </div> <div data-role="fieldcontain"> <label for="text">文本输入框</label> <input type="text" name="text" id="text" value="" /> </div> <div data-role="fieldcontain"> <label for="textarea">文本输入域</label> <textarea cols="40" rows="8" name="textarea" id="textarea"></textarea> </div> <div data-role="fieldcontain"> <label for="search">搜索输入框</label> <input type="search" name="search" id="search" value="" /> </div> <fieldset> <div><button type="submit" data-theme="c">Cancel</button></div> <div><button type="submit" data-theme="b">Submit</button></div> </fieldset> </div> <div data-role="footer" data-theme="a" data-position="fixed"> <h2>a页面的底部</h2> </div> </div> </body> </html>
相关文章推荐
- 使用PHP判断Web客户端访问设备类型(手机、平板、PC)的方法
- 判断设备及学习定义方法中的返回值使用
- iOS学习笔记39-iOS开发,谓词(NSPredicate)的用法:(二)谓词和正则表达式配合使用,进行表单内容判断
- javascript判断移动端访问设备并解析对应CSS的方法
- 快速学习jQuery插件 jquery.validate.js表单验证插件使用方法
- SpringMVC + Spring + MyBatis 学习笔记:在类和方法上都使用RequestMapping如何访问
- Android学习指南之三十:使用URLConnection和HttpClient访问网络的方法
- [PHP]如何使用Mobile_Detect来判断访问网站的设备:安卓,平板,电脑
- 在使用私有属性公有方法访问的时候在get方法里使用判断
- 客户端访问设备类型判断方法-Js
- 如何使用Mobile_Detect来判断访问网站的设备:安卓,平板,电脑
- Web客户端访问设备类型判断方法- PHP判断方法,Js判断方法
- 每天学习一算法系列(12) (求1+2+…+n,不能使用乘除法,for、while、if 、else、switch、case 等关键字以及条件判断语句)
- 巧妙使用CSS媒体查询(Media Queries)和JavaScript判断浏览器设备类型的好方法
- 关于“访问映射网络驱动器提示 本地设备名已在使用中,此连接尚未还原”解决方法!
- [PHP]如何使用Mobile_Detect来判断访问网站的设备:安卓,平板,电脑
- [PHP]如何使用Mobile_Detect来判断访问网站的设备:安卓,平板,电脑
- [PHP]如何使用Mobile_Detect来判断访问网站的设备:安卓,平板,电脑
- 巧妙使用CSS媒体查询(Media Queries)和JavaScript判断浏览器设备类型的好方法
- 如何使用Mobile_Detect来判断访问网站的设备:安卓,平板,电脑