这两天看了《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. CentOS 7 网络配置、远程访问

    网络配置(配置固定IP访问) 相关命令 ip add 查看网卡状态 ifup eth0 打开端口eth0 ifdown eth0 关闭端口eth0 dhclient 自动获取IP mii-tool e ...

  2. CISP/CISA 每日一题 20

    CISSP 每日一题(答) What methods can be used to protectmobile devices such as a smartphone? Encryption,GPS ...

  3. servlet、filter、listener继承的基类和获得作用域的方式

    一.servlet: 1.servlet属于j2ee的组件,构建servlet的web project不需要导入项目框架jar包 2.servlet的体系结构:  在j2ee API中,提供给serv ...

  4. Centos下Elasticsearch安装详细教程

    Centos下Elasticsearch安装详细教程 1.Elasticsearch简介 ElasticSearch是一个基于Lucene的搜索服务器.它提供了一个分布式多用户能力的全文搜索引擎,基于 ...

  5. 洛谷 P1626 象棋比赛

    P1626 象棋比赛 题目描述 有N个人要参加国际象棋比赛,该比赛要进行K场对弈.每个人最多参加两场对弈,最少参加零场对弈.每个人都有一个与其他人不相同的等级(用一个正整数来表示). 在对弈中,等级高 ...

  6. 囧 appspot.com/

    囧 appspot.com/ 我负责公司人事,最近车间招了一批外来打工妹,让她们填写个人资料表格,早上在看表格登记,发现其中一张政治面貌一栏赫然写着"瓜子脸",当时笑得眼泪直流,没 ...

  7. 79.cgi硬盘查询个人信息

    运行截图: 把cgi编码转为char*类型 //把cgi编码转为char*类型 char* change(char *str) { //分配内存 ); //x是tempstr的下标,y是str的下标 ...

  8. seaJS注意点：

    1.require 是同步往下执行,require.async 则是异步回调执行.require.async 一般用来加载可延迟异步加载的模块.

  9. SQL_wm_concat函数实验：实现字段合并

    原创作品,出自 "深蓝的blog" 博客.欢迎转载.转载时请务必注明下面出处,否则追究版权法律责任. 深蓝的blog:http://blog.csdn.net/huangyanlo ...

  10. 常用加密算法的Java实现总结(二)

    常用加密算法的Java实现总结(二) ——对称加密算法DES.3DES和AES 摘自:http://www.blogjava.net/amigoxie/archive/2014/07/06/41550 ...