这两天看了《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. Java 学习(16):集合框架

    Java 集合框架 早在Java 2中之前,Java就提供了特设类.比如:Dictionary, Vector, Stack,  Properties 这些类用来存储和操作对象组. 虽然这些类都非常有 ...

  2. OC内存管理总结,清晰明了!

    <span style="font-size:18px;">OC内存管理 一.基本原理 (一)为什么要进行内存管理. 由于移动设备的内存极其有限.所以每一个APP所占的 ...

  3. WebApp调用手机相册或摄像头、拨打电话

    WebApp调用手机相册或摄像头.拨打电话 一.总结 一句话总结:input标签,指定type为file,选择好对应的accept即可.camera——相机,相应的accept为image : cam ...

  4. 最新GitHub账号注册(详细图解)

    说明:该篇博客是博主一字一码编写的,实属不易,请尊重原创,谢谢大家! 一.简介 GitHub是一个面向开源及私有软件项目的托管平台,因为只支持git 作为唯一的版本库格式进行托管,故名gitHub. ...

  5. Node.js自学笔记之回调函数

    写在前面:如果你是一个前端程序员,你不懂得像PHP.Python或Ruby等动态编程语言,然后你想创建自己的服务,那么Node.js是一个非常好的选择.这段时间对node.js进行了简单的学习,在这里 ...

  6. 字符集和编码II: fat/msdos/vfat (文件名乱码的问题)

    具体到文件名乱码的问题,需要明确两点 第一,文件名作为一个字符串,需要被编码后存入文件系统: 第二,Linux内核无非是个特殊的应用程序,它读取文件名,再把文件名以编码后的形式传递出去. 但Linux ...

  7. php ignore_user_abort()实现计划(定时执行)任务功能

    ? 1 2 3 4 5 6 7 8 9 10 11 12 <?php     ignore_user_abort(TRUE);  //关掉浏览器,PHP脚本也可以继续执行.     set_ti ...

  8. Delegates, Events and Singletons with Unity3D – C#

     在这里我将演示怎样创建代表. 事件和Singletons 在一起工作. 本教程为 Unity3D 编写. 我想知道这为什么?作为一个年轻的自学程序猿,我常常发现自己写tons 和布尔的语句,以确 ...

  9. 数据库中暂时表,表变量和CTE使用优势极其差别

    1 在写SQL时常常会用到暂时表,表变量和CTE,这三者在使用时各有优势: 1. 暂时表:分为局部暂时表和全局暂时表. 1.1局部暂时表,创建时以#开头,在系统数据库tempdb中存储. 在当前的链接 ...

  10. 【u023】最长上升子序列(sequence)

    Time Limit: 1 second Memory Limit: 128 MB [问题描述] 非常经典的问题,拿来给大家练手了. 序列 { 1,2,...,n } 的一个子序列是指序列 { i1, ...