HTML5移动开发之路（48）——（小练习）新闻订阅系统【1】

本文为 兄弟连IT教育 机构官方 HTML5培训 教程，主要介绍：HTML5移动开发之路（48）——（小练习）新闻订阅系统【1】

一、总体设计

二、数据库设计

[sql] view plain copy

print?

  1. --新闻类别表
  2. create table  news_cate(
  3. news_cateid int primary key auto_increment,
  4. news_iconurl varchar(50),
  5. news_catname varchar(5),
  6. news_catedesc varchar(500));
  7. --新闻数据表
  8. create table news_data(
  9. news_id int primary key auto_increment,
  10. news_title varchar(50),
  11. news_content varchar(500),
  12. news_source varchar(50),
  13. news_cateid int,
  14. news_adddate datetime
  15. );

三、系统封面开发

[html] view plain copy

print?

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>练习</title>
  5. <meta charset="utf-8">
  6. <meta name="viewport" content="width=device-width,
  7. initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" />
  8. <link href="css/jquery.mobile-1.0.1.min.css"
  9. rel="stylesheet" type="text/css"/>
  10. <link href="css/rttopHtml5.css"
  11. rel="stylesheet" type="text/css"/>
  12. <script src="js/jquery-1.6.4.js"
  13. type="text/javascript" ></script>
  14. <script src="js/jquery.mobile-1.0.1.js"
  15. type="text/javascript" ></script>
  16. </head>
  17. <body>
  18. <div data-role="page" id="load_index" data-theme="c">
  19. <div data-role="header" data-position="fixed">
  20. <h4>阳光小强</h4>
  21. </div>
  22. <p class="border_p01"></p>
  23. <div class="load">
  24. <p class="t">心是一个人的翅膀，心有多大世界就有多大，每个人都有一颗不平凡的心——相信自己</p>
  25. <p><img src="images/rttop_loading.gif" alt="" /></p>
  26. <p class="l">正在加载数据...</p>
  27. </div>
  28. <div data-role="footer" data-position="fixed" >
  29. <h1>2014 blog.csdn.net/dawanganban studio</h1>
  30. </div>
  31. </div>
  32. <script src="js/rttopHtml5.base.js"
  33. type="text/javascript"></script>
  34. <script src="js/rttopHtml5.news.js"
  35. type="text/javascript" ></script>
  36. </body>
  37. </html>
  38. </html>

在上面代码中引入了两个js文件

rttopHtml5.base.js

[javascript] view plain copy

print?

  1. var rttophtml5mobi = {
  2. author: ‘tgrong‘,
  3. version: ‘1.0‘,
  4. website: ‘http://localhost‘
  5. }
  6. rttophtml5mobi.utils = {
  7. setParam: function(name, value) {
  8. localStorage.setItem(name, value)
  9. },
  10. getParam: function(name) {
  11. return localStorage.getItem(name)
  12. }
  13. }

基础的属性设置

rttopHtml5.new.js

[javascript] view plain copy

print?

  1. //封面页面创建事件
  2. function changepage() {
  3. window.location.href = "index.htm";
  4. }
  5. $(‘#load_index‘).live("pagecreate", function() {
  6. var id = setInterval("changepage()", 3000);
  7. })

创建一个changepage()函数，设置window对象location.href路径，绑定本页面的pagecreate事件，每隔3秒执行changepage()方法。

index.htm

[html] view plain copy

print?

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>练习</title>
  5. <meta charset="utf-8">
  6. <meta name="viewport" content="width=device-width,
  7. initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" />
  8. <link href="css/jquery.mobile-1.0.1.min.css"
  9. rel="stylesheet" type="text/css"/>
  10. <script src="js/jquery-1.6.4.js"
  11. type="text/javascript" ></script>
  12. <script src="js/jquery.mobile-1.0.1.js"
  13. type="text/javascript" ></script>
  14. </head>
  15. <body>
  16. <div data-role="page" id="index_index">
  17. <div data-role="header" data-position="fixed"
  18. data-position="inline">
  19. <h4>阳光新闻</h4>
  20. </div>
  21. <div data-role="content">
  22. </div>
  23. <div data-role="footer" data-position="fixed" >
  24. <h1></h1>
  25. </div>
  26. </div>
  27. </body>
  28. </html>

时间： 2024-12-16 16:10:28

HTML5移动开发之路（48）——（小练习）新闻订阅系统【1】的相关文章

HTML5移动开发之路（19）——HTML5 Local Storage（本地存储）

本文为 兄弟连IT教育 机构官方 HTML5培训 教程,主要介绍:HTML5移动开发之路(19)--HTML5 Local Storage(本地存储) 一.浏览器存储的发展历程 本地存储解决方案很多,比如Flash SharedObject.Google Gears.Cookie.DOM Storage.User Data.window.name.Silverlight.Open Database等. 借用网上的一张图来看下目前主流的本地存储方案: Cookie: 在web中得到广泛应用,但局限

HTML5移动开发之路（33）—— jqMobi基础

本文为 兄弟连IT教育 机构官方 HTML5培训 教程,主要介绍:HTML5移动开发之路(33)-- jqMobi基础 一.什么是jqMobi jqMobi是由appMobi针对HTML5浏览器和移动设备开发的JavaScript框架,是个极快速的查询选择库,支持W3C查询. 版本 jqMobi源码最初在2012年1月份推出,基于MIT/X11许可证,托管在GitHub上,开发者可参与并通过插件不断改进该框架. 2012年3月13日,jqMobi 1.0版本正式发布.现在最新的版本是jqMobi

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

本文为 兄弟连IT教育 机构官方 HTML5培训 教程,主要介绍:HTML5移动开发之路(45)--汇率计算器[1] 这两天看了<PhoneGap实战>上面有一个汇率计算器的例子,个人觉得比较好,就拿出来和大家分享一下,在接下来的几篇文章中我们来一起完成这个PhoneGap + jQuery mobile的小练习. 一.在DrameWeaver中新建站点,如图: 二.编写汇率计算页 [html] view plain copy print? <!doctype html> <

HTML5移动开发之路（17）——HTML5内联SVG

本文为 兄弟连IT教育 机构官方 HTML5培训 教程,主要介绍:HTML5移动开发之路(17)--HTML5内联SVG 一.什么是SVG 可缩放矢量图形是基于可扩展标记语言(标准通用标记语言的子集),用于描述二维矢量图形的一种图形格式.它由万维网联盟SVG 于 2003 年 1 月 14 日成为 W3C 推荐标准. SVG 指可伸缩矢量图形 (Scalable Vector Graphics) SVG 用于定义用于网络的基于矢量的图形 SVG 使用 XML 格式定义图形 SVG 图像在放大或改

HTML5移动开发之路（8）——坦克大战游戏2

本文为 兄弟连IT教育 机构官方 HTML5培训 教程,主要介绍:HTML5移动开发之路(8)--坦克大战游戏2 在上一篇文章中我们已经画出了自己的坦克,并且可以控制自己的坦克移动,我们继续接着上一篇来实现我们的坦克大战游戏吧. 一.将JS文件分离出来 使用OO的思想,我们已经对坦克进行了封装,对画坦克也进行了封装,下面我们将这两个对象提取到外部的js文件中,文件内容如下: [javascript] view plain copy print? //定义一个Hero类(后面还要改进) //x表示

HTML5移动开发之路（7）——坦克大战游戏1

本文为 兄弟连IT教育 机构官方 HTML5培训 教程,主要介绍:HTML5移动开发之路(7)--坦克大战游戏1 上一篇中我们介绍了关于Canvas的基础知识,用Canvas绘制各种图形和图片,在上一篇的基础上我们来做一个基于HTML5的坦克大战游戏,下面我们开始吧 一.用Canvas画出我们的坦克 我们设计的坦克结构如下图所示,如果有的朋友有更好的设计,希望分享和交流一下. 如上图所示,我们的坦克基本上是由三个矩形和一个圆形一个线段组成,每个部件的尺寸进行了标记,单位为px,下面我们用上一篇中

HTML5移动开发之路（35）——jQuery中的过滤器详解

本文为 兄弟连IT教育 机构官方 HTML5培训 教程,主要介绍:HTML5移动开发之路(35)--jQuery中的过滤器详解 1.基本过滤选择器 :first:last:not(selector) :selector匹配的节点之外的节点:even :偶数:odd :奇数:eq(index):gt(index) :比他大的 :lt(index) :比他小的 [html] view plain copy print? <html> <head> <script src=&quo

HTML5移动开发之路（14）——Video标签详解

本文为 兄弟连IT教育 机构官方 HTML5培训 教程,主要介绍:HTML5移动开发之路(14)--Video标签详解 一.使用技巧 在HTML5中可以使用<audio>或者<video>标签播放html5媒体,使用方式如下: [html] view plaincopyprint? <video src="move.mp4"></video> video标签中有很多属性,例如controls属性可以控制是否有控制台. [html] vie

HTML5移动开发之路（10）——在线画板

本文为 兄弟连IT教育 机构官方 HTML5培训 教程,主要介绍:HTML5移动开发之路(10)--在线画板 在这一篇文章中我们用HTML5来实现一个在线的画板,玩过你画我猜的朋友今天也可以做一个简单的你画我猜小游戏啦,效果如下图所示: 过程很简单直接上代码了: [html] view plain copy print? <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.