这两天看了《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. Flask项目之手机端租房网站的实战开发（十四）

    说明:该篇博客是博主一字一码编写的,实属不易,请尊重原创,谢谢大家! 接着上一篇博客继续往下写 :https://blog.csdn.net/qq_41782425/article/details/8 ...

  2. C++ 复制到粘贴板

    网上好多教程讲如何复制到剪切板,但是有可能复制的是乱码,为了方便,将CString类型的复制到剪切板 CString source;if (OpenClipboard()){//防止非ASCII语言复 ...

  3. 自绘listCtrl控件选中该行高亮（模拟windows）

    CListCtrl的派生类CMyListCtrl的DrawItem()函数里添加代码 CDC *pDC = CDC::FromHandle(lpDrawItemStruct->hDC); if ...

  4. [D3] Draw a basic US d3-geo map

    Install: npm install --save d3 d3-geo topojson Code: import React, {Component} from 'react'; import ...

  5. OSX: 逻辑卷管理系统Core Storage(1)

    Mac高大上嘛? Mac由于贵就高大上了?Mac由于没有这个哪个就不高大上了?本文没有结论,仅仅是回归技术本源,是不是高大上还要大家自己评说. 大多数Mac用户可能并不在乎苹果的OS X操作系统缺少一 ...

  6. MDaemon and Apache2

    MDaemon and Apache2 邮件服务器列表 http://down.chinaz.com/class/93_1.htm MDaemon11.03中文破解补丁 http://download ...

  7. HTML基础-第二讲

    转自:https://blog.csdn.net/likaier/article/details/326657 我们在第一讲里概括了一下网页的主要框架,现在我们来详细的研究网页的内部细则: 先从它的身 ...

  8. docker构建一个简易镜像

    一 下载centos镜像 docker pull centos 二 启动镜像 [root@Centos-node3 ~]# docker run -it --name my_ng centos bas ...

  9. 1.16 Python基础知识 - 装饰器初识

    Python中的装饰器就是函数,作用就是包装其他函数,为他们起到修饰作用.在不修改源代码的情况下,为这些函数额外添加一些功能,像日志记录,性能测试等.一个函数可以使用多个装饰器,产生的结果与装饰器的位 ...

  10. 11. Spring Boot JPA 连接数据库

    转自:https://blog.csdn.net/catoop/article/details/50508397