小强的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(超文本标记语言) ...

随机推荐

洛谷P1852 奇怪的字符串
题目描述输入两个01串,输出它们的最长公共子序列的长度输入输出格式输入格式: 一行,两个01串输出格式: 最长公共子序列的长度输入输出样例输入样例#1: 复制 01010101010 00 ...
Android视频播放软解与硬解的区别
硬解,用自带播放器播放,android中的VideoView 软解,使用音视频解码库,比如FFmpeg 一.硬解码硬解:就是调用GPU的专门模块编码来解,减少CPU运算,对CPU等硬件要求也相对低点 ...
【hdu 1068】Girls and Boys
[Link]:http://acm.hdu.edu.cn/showproblem.php?pid=1068 [Description] 有n个人,一些人认识另外一些人,选取一个集合,使得集合里的每个人 ...
[Angular] Custom directive Form validator
Create a directive to check no special characters allowed: import {Directive, forwardRef} from '@ang ...
Apple Watch 集成环信SDK
本文简单的讲述下怎样用Apple Watch Kit集成环信SDK. 升级xcode到version 6.2,和 IOS SDK8.2 下载环信SDK从官网打开XCode->new proje ...
caffe 在 windows 下的配置（scripts\build_win.cmd）
官网配置文档见:GitHub - BVLC/caffe at windows 1. windows 设置 requirements: visual studio 2013/2015 CMake > ...
Java Web学习总结（15）——JSP指令
一.JSP指令简介 JSP指令(directive)是为JSP引擎而设计的,它们并不直接产生任何可见输出,而只是告诉引擎如何处理JSP页面中的其余部分. 在JSP 2.0规范中共定义了三个指令: pa ...
洛谷——P1022 计算器的改良
https://www.luogu.org/problem/show?pid=1022#sub 题目背景 NCL是一家专门从事计算器改良与升级的实验室,最近该实验室收到了某公司所委托的一个任务:需要在 ...
[AngularJS] Interpolation fail in IE 11
When you occured this problem, check few things: For the input field, use // Use ng-attr-placeholder ...
Redis 性能測试
Redis 性能測试 Redis 性能測试是通过同一时候运行多个命令实现的. 语法 redis 性能測试的基本命令例如以下: redis-benchmark [option] [option valu ...

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

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

随机推荐

热门专题