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

一、总体设计

二、数据库设计

     --新闻类别表

      create table  news_cate(

          news_cateid int primary key auto_increment,

          news_iconurl varchar(50),

          news_catname varchar(5),

          news_catedesc varchar(500));

     --新闻数据表

      create table news_data(

          news_id int primary key auto_increment,

          news_title varchar(50),

          news_content varchar(500),

          news_source varchar(50),

          news_cateid int,

          news_adddate datetime

     );

三、系统封面开发

<!DOCTYPE html>

<html>

<head>

<title>练习</title>

<meta charset="utf-8">

<meta name="viewport" content="width=device-width,

      initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" />

<link href="css/jquery.mobile-1.0.1.min.css"

      rel="stylesheet" type="text/css"/>

<link href="css/rttopHtml5.css"

      rel="stylesheet" type="text/css"/>

<script src="js/jquery-1.6.4.js"

      type="text/javascript" ></script>

<script src="js/jquery.mobile-1.0.1.js"

      type="text/javascript" ></script>

</head>

<body>

  <div data-role="page" id="load_index" data-theme="c">

    <div data-role="header" data-position="fixed">

      <h4>阳光小强</h4>

    </div>

    <p class="border_p01"></p>

    <div class="load">

       <p class="t">心是一个人的翅膀，心有多大世界就有多大，每个人都有一颗不平凡的心——相信自己</p>

       <p><img src="images/rttop_loading.gif" alt="" /></p>

       <p class="l">正在加载数据...</p>

    </div>

    <div data-role="footer" data-position="fixed" >

      <h1>©2014 blog.csdn.net/dawanganban studio</h1>

    </div>

  </div>

<script src="js/rttopHtml5.base.js"

          type="text/javascript"></script>

<script src="js/rttopHtml5.news.js"

      type="text/javascript" ></script>

</body>

</html>

</html>

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

rttopHtml5.base.js

var rttophtml5mobi = {

    author: 'tgrong',

    version: '1.0',

    website: 'http://localhost'

}

rttophtml5mobi.utils = {

    setParam: function(name, value) {

        localStorage.setItem(name, value)

    },

    getParam: function(name) {

        return localStorage.getItem(name)

    }

}

基础的属性设置

rttopHtml5.new.js

//封面页面创建事件

function changepage() {

    window.location.href = "index.htm";

}

$('#load_index').live("pagecreate", function() {

    var id = setInterval("changepage()", 3000);

})

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

index.htm

<!DOCTYPE html>

<html>

<head>

<title>练习</title>

<meta charset="utf-8">

<meta name="viewport" content="width=device-width,

      initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" />

<link href="css/jquery.mobile-1.0.1.min.css"

      rel="stylesheet" type="text/css"/>

<script src="js/jquery-1.6.4.js"

      type="text/javascript" ></script>

<script src="js/jquery.mobile-1.0.1.js"

      type="text/javascript" ></script>

</head>

<body>

	<div data-role="page" id="index_index">

    <div data-role="header" data-position="fixed"

         data-position="inline">

      	 <h4>阳光新闻</h4>

    </div>

    <div data-role="content">

    </div>

    <div data-role="footer" data-position="fixed" >

      <h1></h1>

    </div>

  </div>

</body>

</html>

小强的HTML5移动开发之路（48）——（小练习）新闻订阅系统【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移动开发之路（3）——HTML5与HTML4比较
来自:http://blog.csdn.net/dawanganban/article/details/17652873 在前面介绍了HTML5的新特性,新标签的使用,智能表单设计,引入多媒体对象,C ...
小强的HTML5移动开发之路（1）——HTML介绍
来自:http://blog.csdn.net/dawanganban/article/details/17591373 HTML是HyperText Markup Language(超文本标记语言) ...

随机推荐

Node.js安装+环境配置【Windows版】
Node.js安装及环境配置之Windows篇一.安装环境 1.本机系统:Windows 10 Pro(64位)2.Node.js:v6.9.2LTS(64位) 二.安装Node.js步骤 1.下 ...
Maven搭建hadoop环境报Missing artifact jdk.tools:jdk.tools:jar:1.7（5种办法，2种正解）
刚刚写的那一篇,是网上比较主流的解决办法. 鉴于实际情况,有伙伴的机器上没有遇到这个问题,我们再探究原因,最终还有4种情况需要说明. 先说,另外一种"正解". <depend ...
Method of address space layout randomization for windows operating systems
A system and method for address space layout randomization ("ASLR") for a Windows operatin ...
邮件协议与port
电子邮箱的协议有SMTP.POP2.POP3.IMAP4等.都隶属于TCP/IP协议簇,默认状态下.分别通过TCPport25.110和143建立连接.针对不同的用途和功能,我们在邮件se ...
算法中的优化问题（optimization problem）
和多数算法不同的是,有些问题的答案不只一个,而是需要在多个答案中,按照一定标准选出"最佳"答案,这类问题就统称为"优化问题"(optimization prob ...
常用到的Linux命令
记录一下日常用到的Linux命令,就当做日志了 1.查看Linux 端口号 netstat -apn | grep 80 2.杀死进程 kill -s 9 pid (tomcat 启动不起来有可 ...
@RequestMapping value 能够反复吗 [
@RequestMapping value 能够反复吗 [问题点数:40分,结帖人wangqiao4j] 不显示删除回复显示全部回复显示星级回复显示得分回复仅仅显示楼主 u=http://bbs. ...
算法 Tricks（三）—— 数组（序列）任意区间最小（大）值
序列(数组)的区间通过左右端点确定,这样首先设置一个最值变量用来记录最值,从左端点一步步移动到右端点,自然移动的过程中也可以计算整个区间的和,也即一次线性遍历下来,可同时获得多个有用信息. // 区间 ...
C语言深度剖析-----多维数组和多维指针
多维数组和多维指针指向指针的指针指针变量同样也有传址调用和传值调用 case1:估算要5个字节的空间,实际只用前面3个字节,设计释放空的2字节 case2:扩充到10字节二维数组与二维指针二维 ...
Angular7环境搭建报错
昨天写的2019年Angular7——安装搭建路由方法不太正统,今天又去翻了下angular官网,跟着上面的环境搭建与部署走了一遍从安装@angular/cli命令行工具开始本篇主要记录下搭建过程 ...

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

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

随机推荐

热门专题