小强的HTML5移动开发之路（45）—

这两天看了《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】的更多相关文章

小强的HTML5移动开发之路（18）——HTML5地理定位
来自:http://blog.csdn.net/dawanganban/article/details/18192091 在前面的<小强的HTML5移动开发之路(2)--HTML5的新特性> ...
小强的HTML5移动开发之路（14）——Video标签详解
来自:http://blog.csdn.net/dawanganban/article/details/18180605 在前面的小强的HTML5移动开发之路(5)--制作一个漂亮的视频播放器中制作了 ...
小强的HTML5移动开发之路（13）——HTML5中的全局属性
来自:http://blog.csdn.net/dawanganban/article/details/18179483 一.accssskey 快捷键 <!DOCTYPE HTML> ...
小强的HTML5移动开发之路（11）——链接，图片，表格，框架
来自:http://blog.csdn.net/dawanganban/article/details/18098193 一.HTML是什么? HTML(hypertext mark-uplangua ...
小强的HTML5移动开发之路（42）——HTML4与HTML5文档结构比较
一般来说,人们在书写包括HTML在内的文档时,习惯上按照类似于"章--节--小节"这样的层次结构来进行. 在HTML4中的描述方式: <html> <head&g ...
小强的HTML5移动开发之路（37）——jqMobi快速入门
在<小强的HTML5移动开发之路(33)-- jqMobi基础>中我们了解了什么是jqMobi,并从官方下载了jqMobi开发包,下载后解压目录如下: 拷贝上面的/css目录./plugi ...
小强的HTML5移动开发之路（12）——从一个多媒体标签说起
来自:http://blog.csdn.net/dawanganban/article/details/18136813 一.视频播放 <html> <head> <ti ...
小强的HTML5移动开发之路（5）——制作一个漂亮的视频播放器
来自:http://blog.csdn.net/dawanganban/article/details/17679069 在前面几篇文章中介绍了HTML5的特点和需要掌握的基础知识,下面我们开始真正的 ...
小强的HTML5移动开发之路（3）——HTML5与HTML4比较
来自:http://blog.csdn.net/dawanganban/article/details/17652873 在前面介绍了HTML5的新特性,新标签的使用,智能表单设计,引入多媒体对象,C ...

随机推荐

echarts统计图踩坑合集
1:折线图条的颜色修改 series : [ { name : 'SBP(收缩压)', type : 'line', itemStyle : { normal : { lineStyle:{ colo ...
GIS学习 Geoserver使用添加、删除、查询地图中的POI
geoserverwfs:Querywfs:Deletewfs:Updatewfs:Insert 在geoserver自定义的地图中通过geoserver wfs 查询,删除,添加相关的POI. 相 ...
restcontroller和controller区别
http://www.cnblogs.com/softidea/p/5884772.html#undefined http://blog.csdn.net/blueheart20/article/de ...
C++ 指针与引用知识点小结
[摘要] 指针能够指向变量.数组.字符串.函数.甚至结构体.即指针能够指向不同数据对象.指针问题包含常量指针.数组指针.函数指针.this指针.指针传值.指向指针的指针等. 主要知识点包含:1. ...
do_pj--下拉代码脚本的使用
接本目录 /home/zhangshuli/git2/vanzo_team/xulei/Platform.py 在~/bin目录下链接 ln -sf ~/git2/vanzo_team/xulei/P ...
ORACLE11g R2【RAC+ASM→单实例FS】
ORACLE11g R2[RAC+ASM→单实例FS] 11g R2 RAC+ASMà单实例FS的DG,建议禁用OMF. 本演示案例所用环境: primary standby OS Hostnam ...
JS学习笔记 - fgm练习 2-12- 全选反选判断CheckBox是否选中 &&运算符
练习地址:http://www.fgm.cc/learn/lesson2/12.html 总结: 1. && 运算符,从左向右依次执行,如果遇到 false,就不再继续执行后面的语句 ...
14、序列化操作，类的保存和dict转JSON
在程序运行的过程中,所有的变量都是在内存中,比如,定义一个dict: d = dict(name='Bob', age=20, score=88) 可以随时修改变量,比如把name改成'Bill',但 ...
【hdu 6000】Wash
[链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 因为每件衣服都是没有区别的. 只有洗衣机不同会影响洗衣时间. 那么我们把每台洗衣机洗衣的时间一开始都加入到队列中. 比如{2,3,6 ...
1.3 Python基础知识 - 用户交互及传递参数
一.用户交互用户交互方面,每种开发语言都有不同的方式,例如shell语言用的是,“read -p "What is your name ? " ”.python中是什么样子的呢 ...

小强的HTML5移动开发之路（45）——汇率计算器【1】

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

随机推荐

热门专题