这两天看了《PhoneGap实战》上面有一个汇率计算器的例子，个人觉得比较好，就拿出来和大家分享一下，在接下来的几篇文章中我们来一起完成这个PhoneGap + Jquery mobile的小练习。

一、在DrameWeaver中新建站点，如图：

二、编写汇率计算页

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>无标题文档</title>

<!--引入相关样式框架-->

<link rel="stylesheet" href="css/jquery.mobile-1.0.1.min.css"/>

<script src="js/jquery.js"></script>

<script src="js/jquery.mobile-1.0.1.min.js"></script>

</head>

<body>

	<div data-role="page" id="index">

    	<div class="exchangeRates">

        <div class="header">

        	<div class="right">

            	<div class="right">

                	<a href="#setting" data-transition="slide"><img src="images/tm.gif" width="80" height="89" border="0"></a>

                </div>

            </div>

        </div>

        <div class="bg">

        	<div class="list">

            	<div class="currency">人民币</div>

                <div class="money"><input type="number" id="c1" maxlength="12" value="0"/></div>

            </div>

        	<div class="list">

            	<div class="currency">美元</div>

                <div class="money strong"><input type="number" id="c2" maxlength="12" value="0"/></div>

            </div>

        	<div class="list">

            	<div class="currency">日元</div>

                <div class="money strong"><input type="number" id="c3" maxlength="12" value="0"/></div>

            </div>

        	<div class="list">

            	<div class="currency">里尔</div>

                <div class="money strong"><input type="number" id="c4" maxlength="12" value="0"/></div>

            </div>

        	<div class="list">

            	<div class="currency">新加坡元</div>

                <div class="money strong"><input type="number" id="c5" maxlength="12" value="0"/></div>

            </div>

            <div class="list">

            	<div class="currency">欧元</div>

                <div class="money strong"><input type="number" id="c6" maxlength="12" value="0"/></div>

            </div>

            <div class="list">

            	<div class="currency">克朗</div>

                <div class="money strong"><input type="number" id="c7" maxlength="12" value="0"/></div>

            </div>

            <div class="list">

            	<div class="currency">英镑</div>

                <div class="money strong"><input type="number" id="c8" maxlength="12" value="0"/></div>

            </div>

        </div>

    </div>

    <div data-role="page" id="setting">

    	<div class="setRates">

        </div>

    </div>

</body>

</html>

这个界面现在还很不美观，我们来设计一下样式

引入样式文件：

<link rel="stylesheet" href="css/style.css"/>

添加头部样式：

/* CSS Document */

body{

	background-color:#c19e7d;

	font-family:"黑体";

	margin:0px;

	padding:0px;

}

/*

1.text-align:center 设置文本或img标签等一些内联对象（或与之类似的元素）的居中。

2.margin:0 auto 设置块元素（或与之类似的元素）的居中。

*/

.exchangeRates,.setRates{

	width:480px;

	height:100%;

	margin:0 auto;

	font-family:"黑体";

}

.header{

	width:480px;

	height:116px;

	background:url(../images/title.png) no-repeat;

}

.header .right{

	float:right;

	width:80px;

	height:54px;

}

.header .right a{

	float:right;

	width:80px;

	height:54px;

}

.header .right a:hover{

	float:left;

	width:80px;

	height:54px;

	background:url(../images/setting.png) no-repeat;

}

添加列表样式：

.bg{

	width:480px;

	height:598px;

	background:url(../images/bg.png) no-repeat;

	background-color:#999933;

	overflow:hidden;

}

.bg .list{

	float:left;

	width:480px;

	height:77px;

	background:url(../images/line.png) 0px 64px no-repeat;

}

.bg .list .currency{

	float:left;

	width:150px;

	height:77px;

	text-align:left;

	font-size:28px;

	line-height:50px;

	color:#bea58c;

	padding-left:30px;

}

.bg .list .money{

	float:left;

	width:240px;

	height:77px;

	text-align:right;

	font-weight:bold;

	line-height:50px;

	color:#ffefda;

	padding-top:3px;

}

.bg .list .money input{

	float:right;

	background-color:transparent;

	width:210px;

	height:25px;

	border:0px;

	font-size:30px;

	color:#ffefda;

	font-family:Arial, Helvetica, sans-serif;

	padding-left:6px;

	padding-right:6px;

	text-align:right;

}

.strong{ font-weight:bold}

.footer{

	width:480px;

	height:49px;

	background:url(../images/bottom.png) no-repeat;

}

源代码下载：http://download.csdn.net/detail/lxq_xsyu/7189855

说明：有关框架和图片资源请在源代码中获取。

小强的HTML5移动开发之路（45）——汇率计算器【1】的更多相关文章

  1. 小强的HTML5移动开发之路（18）——HTML5地理定位

    来自:http://blog.csdn.net/dawanganban/article/details/18192091 在前面的<小强的HTML5移动开发之路(2)--HTML5的新特性> ...

  2. 小强的HTML5移动开发之路（14）——Video标签详解

    来自:http://blog.csdn.net/dawanganban/article/details/18180605 在前面的小强的HTML5移动开发之路(5)--制作一个漂亮的视频播放器中制作了 ...

  3. 小强的HTML5移动开发之路（13）——HTML5中的全局属性

    来自:http://blog.csdn.net/dawanganban/article/details/18179483 一.accssskey  快捷键 <!DOCTYPE HTML> ...

  4. 小强的HTML5移动开发之路（11）——链接，图片，表格，框架

    来自:http://blog.csdn.net/dawanganban/article/details/18098193 一.HTML是什么? HTML(hypertext mark-uplangua ...

  5. 小强的HTML5移动开发之路（42）——HTML4与HTML5文档结构比较

    一般来说,人们在书写包括HTML在内的文档时,习惯上按照类似于"章--节--小节"这样的层次结构来进行. 在HTML4中的描述方式: <html> <head&g ...

  6. 小强的HTML5移动开发之路（37）——jqMobi快速入门

    在<小强的HTML5移动开发之路(33)-- jqMobi基础>中我们了解了什么是jqMobi,并从官方下载了jqMobi开发包,下载后解压目录如下: 拷贝上面的/css目录./plugi ...

  7. 小强的HTML5移动开发之路（12）——从一个多媒体标签说起

    来自:http://blog.csdn.net/dawanganban/article/details/18136813 一.视频播放 <html> <head> <ti ...

  8. 小强的HTML5移动开发之路（5）——制作一个漂亮的视频播放器

    来自:http://blog.csdn.net/dawanganban/article/details/17679069 在前面几篇文章中介绍了HTML5的特点和需要掌握的基础知识,下面我们开始真正的 ...

  9. 小强的HTML5移动开发之路（3）——HTML5与HTML4比较

    来自:http://blog.csdn.net/dawanganban/article/details/17652873 在前面介绍了HTML5的新特性,新标签的使用,智能表单设计,引入多媒体对象,C ...

随机推荐

  1. 七、Docker+nginx

    原文:七.Docker+nginx docker run -p 80:80 --name nginx-v1.0.0 -v /usr/nginx/www:/www -v /home/docker/ngi ...

  2. Spark SQL概念学习系列之Spark SQL基本原理

    Spark SQL基本原理 1.Spark SQL模块划分 2.Spark SQL架构--catalyst设计图 3.Spark SQL运行架构 4.Hive兼容性 1.Spark SQL模块划分 S ...

  3. iterm恢复默认设置

    命令行执行以下命令即可: defaults delete com.googlecode.iterm2

  4. cocos2d-x 3.x游戏开发学习笔记(1)--mac下配置cocos2d-x 3.x开发环境

    打开用户文件夹下.bash_profile文件,配置环境 vim ~/.bash_profile //按键i,进行插入编辑(假设输错d进行删除一行) 环境配置过程例如以下: 1.首先配置下androi ...

  5. JS学习笔记 - 普通选项卡（面向过程）

    疑问: 1. getElementsByTagName 和 getElementsByClassName  的区别? 分别在什么应用场景?    <!DOCTYPE html> <h ...

  6. HDU 2473 Junk-Mail Filter 并查集删除(FZU 2155盟国)

    http://acm.hdu.edu.cn/showproblem.php?pid=2473 http://acm.fzu.edu.cn/problem.php?pid=2155 题目大意: 编号0~ ...

  7. 9、str类型和byte类型转换、列表拾遗、元组拾遗、字典拾遗、如何判断对象是否可迭代

    str(字节类型,编码)       可用于创建字符串,或者将其他的转换成字符串 a= ‘李露’ #将字符串转换成字节流 b = bytes(a,encoding = 'utf-8') #将字节转换成 ...

  8. 【Codeforces Round #445 (Div. 2) B】Vlad and Cafes

    [链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 傻逼模拟 [代码] #include <bits/stdc++.h> using namespace std; cons ...

  9. 【Codeforces Round #299 (Div. 2) A】 Tavas and Nafas

    [链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 模拟题 [代码] #include <bits/stdc++.h> using namespace std; map & ...

  10. git 配置用户名email地址，设置密码