Jquery Mobile初探

最新推荐文章于 2018-03-05 11:39:25 发布

呵呵后

最新推荐文章于 2018-03-05 11:39:25 发布

阅读量3.2k

点赞数

本文链接：https://blog.csdn.net/oHeHeHou/article/details/8738657

版权

一个汇率换算工具。主要用到的空间就是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" οnclick="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的组件显示不正常。

呵呵后

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
3
评论
Jquery Mobile初探

一个汇率换算工具。主要用到的空间就是button和edittext。jquery ajax提交请求，后台用servlet处理运算。页面放在服务器上,本地应用只要用webview访问地址就行。我感觉Jquery Mobile的东西不流畅，不知道Sencha touch怎么样工程结构index.html 　　 My Page
复制链接

扫一扫