jQuery mobile 学习12 表单的使用方法及访问设备判断

来源：互联网发布：htc刷机救砖软件编辑：程序博客网时间：2024/06/05 09:36
<%@ 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>
0 0