首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 移动开发 > 移动开发 >

jquery mobile 初记

2012-09-19 
jquery mobile 小记%@ page languagejava importjava.util.* pageEncodingUTF-8%%String path

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 PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
? <head>
??? <base href="<%=basePath%>">
???
??? <title>My JSP 'index.jsp' starting page</title>
?<meta http-equiv="pragma" content="no-cache">
?<meta http-equiv="cache-control" content="no-cache">
?<meta http-equiv="expires" content="0">???
?<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
?<meta http-equiv="description" content="This is my page">
?<link rel="stylesheet" href="jquerymobile/jquery.mobile-1.0b1.min.css" />
?<script src="jquerymobile/jquery-1.6.1.js"></script>
?<script src="jquerymobile/jquery.mobile-1.0b1.min.js"></script>???????
? </head>
?
? <body>
? ?<div? data-role="page">
??<div? data-role="header">
???---
??</div>
??<div? data-role="content">
???<div data-role="fieldcontain">
?????? <label for="name">Text Input:</label>
?????? <input type="text" name="name" id="name" value="" />
???</div>?
???<a href="index.html" data-role="button" data-icon="delete">Delete</a>
??</div>
??<div data-role="button">
???<input type="text" name="name" id="name2" value="" />
???<a? id="cha" data-role="button" data-icon="arrow-d" data-iconpos="notext"></a>
??<select? name="selectchoice" id="selectchoice"? data-native-menu="false">
???<option value="standard">Standard: 7 day</option>
???<option value="rush">Rush: 3 days</option>
???<option value="express">Express: next day</option>
???<option value="overnight">Overnight</option>
??</select>
??</div>
??
??
??<div? data-role="footer">...</div>
?</div>
?<script type="text/javascript">
??setTimeout(function (){
???$("#cha").click(function (){
????$(".ui-select").find("a").trigger("click");
????var position =$("#cha").offset();
????$(".ui-selectmenu").css("top",""+position.top);
????$(".ui-selectmenu").css("left",""+position.left-($("#name").width()/2));
????$(".ui-selectmenu").find("ul").find("li").find("div").find("div").append("xxx");
????$(".ui-selectmenu").click(function (){
?????$("#name2").val($("#selectchoice").val());
????});
???});
???$(".ui-select").hide();
??},100);
?</script>
? </body>
</html>

热点排行