Jquery Mobile初探
一个汇率换算工具。主要用到的空间就是button和edittext。jquery ajax提交请求，后台用servlet处理运算。
页面放在服务器上,本地应用只要用webview访问地址就行。
我感觉Jquery Mobile的东西不流畅，不知道Sencha touch怎么样
工程结构
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>My Page</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/themes/default/jquery.mobile-1.3.0.css" />
<link rel="stylesheet" href="css/themes/default/jquery.mobile.structure-1.3.0.css" />
<link rel="stylesheet" href="css/themes/default/jquery.mobile.theme-1.3.0.css" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.mobile-1.3.0.js"></script>
<script type="text/javascript" charset="utf-8">
//监听输入框的变化
$(document).ready(function(){
$("#us").bind('input propertychange', function(){
cal('us');
});
$("#uk").bind('input propertychange', function(){
cal('uk');
});
$("#cn").bind('input propertychange', function(){
cal('cn');
});
});
function clearText() {
$("#us").val("");
$("#uk").val("");
$("#cn").val("");
}
//每次输入改变都调用
function cal(id) {
var value = $("#"+id).val();
var type = id;
if (value == "") {
clearText();
}
else {
$.ajax({
url: "HandlerServlet?ammount="+value+"&type="+type,
type:"get",
success:function(result){
var a = result.split(";");
var type = a[2];
var val1 = a[0];
var val2 = a[1];
if (type == "cn") {
$("#us").val(val1);
$("#uk").val(val2);
}
else if (type == "us") {
$("#cn").val(val1);
$("#uk").val(val2);
}
else {
$("#us").val(val1);
$("#cn").val(val2);
}
}
});
}
}
</script>
</head>
<body>
<div data-role="page">
<!-- header -->
<div data-role="header" data-position="fixed" >
<h3>汇率转换</h3>
</div>
<!-- header -->
<!-- navigator.app.exitApp() -->
<!-- content -->
<div id="content" data-role="content" >
<div style="text-align: center;margin-left: auto;margin-right: auto;">
<table >
<tr >
<td><img src="images/china.png" style="width: 60px;height: 40px"/></td>
<td><input id="cn" type="number" name="text-1" value="" style="width: 200px;text-align: right;"></td>
<td>¥</td>
</tr>
<tr>
<td><img src="images/us.png " style="width: 60px;height: 40px" /></td>
<td><input type="number" name="text-1" id="us" value="" style="width: 200px;text-align: right;"></td>
<td>$</td>
</tr>
<tr>
<td><img src="images/uk.png" style="width: 60px;height: 40px"/></td>
<td><input type="number" name="text-1" id="uk" value="" style="width: 200px;text-align: right;"></td>
<td>£</td>
</tr>
</table>
</div>
<div style="text-align: center;margin-left: auto;margin-right: auto;">
<a id="clear" href="#" data-role="button" data-inline="true" onclick="clearText();">清空</a>
</div>
</div>
<!-- content -->
<!-- footer -->
<div id="footer" data-role="footer" data-position="fixed">
</div>
<!-- footer -->
</div>
<!-- /page -->
</body>
</html>
HandlerServlet.java:
package com.test.test;
import java.io.IOException;
import java.io.PrintWriter;
import java.math.BigDecimal;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
public class HandlerServlet extends HttpServlet {
private static final double US_TO_CN = 6.2125;
private static final double CN_TO_US = 0.1610;
private static final double US_TO_UK = 0.6597;
private static final double UK_TO_US = 1.5158;
private static final double CN_TO_UK = 0.1060;
private static final double UK_TO_CN = 9.4172;
protected void doGet(HttpServletRequest req, HttpServletResponse resp)
throws ServletException, IOException {
String ammount = req.getParameter("ammount");
String type = req.getParameter("type");
double us = 0;
double uk = 0;
double cn = 0;
double value = Double.parseDouble(ammount);
PrintWriter out = resp.getWriter();
BigDecimal big1 = new BigDecimal(value);
if ("cn".equals(type)) {
BigDecimal bigUS = new BigDecimal(CN_TO_US);
BigDecimal bigUK = new BigDecimal(CN_TO_UK);
us = big1.multiply(bigUS).setScale(2, BigDecimal.ROUND_HALF_UP).doubleValue();
uk = big1.multiply(bigUK).setScale(2, BigDecimal.ROUND_HALF_UP).doubleValue();
out.write(us+";"+uk+";"+"cn");
}
else if ("us".equals(type)) {
BigDecimal bigCN = new BigDecimal(US_TO_CN);
BigDecimal bigUK = new BigDecimal(US_TO_UK);
cn = big1.multiply(bigCN).setScale(2, BigDecimal.ROUND_HALF_UP).doubleValue();
uk = big1.multiply(bigUK).setScale(2, BigDecimal.ROUND_HALF_UP).doubleValue();
out.write(cn+";"+uk+";"+"us");
}
else {
BigDecimal bigCN = new BigDecimal(UK_TO_CN);
BigDecimal bigUS = new BigDecimal(UK_TO_US);
us = big1.multiply(bigUS).setScale(2, BigDecimal.ROUND_HALF_UP).doubleValue();
cn = big1.multiply(bigCN).setScale(2, BigDecimal.ROUND_HALF_UP).doubleValue();
out.write(us+";"+cn+";"+"uk");
}
System.out.println(us);
}
protected void doPost(HttpServletRequest req, HttpServletResponse resp)
throws ServletException, IOException {
// TODO Auto-generated method stub
doGet(req, resp);
}
}
运行截图：
一个输入框改变其他2个根据相应的汇率实时算出结果
注：如果用WebView控件注意设置
WebView web = (WebView)findViewById(R.id.web); web.getSettings().setJavaScriptEnabled(true);
不然没法加载页面js。
html缩进不要用tab键，会导致jquery mobile的组件显示不正常。