码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2015-02-27 18:29:30      阅读:149      评论:0      收藏:0      [点我收藏+]

标签:jquery mobile   布局   表单   

<%@ 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>

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

标签:jquery mobile   布局   表单   

原文地址:http://blog.csdn.net/responsecool/article/details/43969951

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!