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

随机推荐

Impala是什么？
Impala是Cloudera公司主导开发的新型查询系统,它提供SQL语义,能查询存储在Hadoop的HDFS和HBase中的PB级大数据.已有的Hive系统虽然也提供了SQL语义,但由于Hive底层 ...
Spring异步执行(@Async)2点注意事项
Spring中可以异步执行代码,注解方式是使用@Async注解. 原理.怎么使用,就不说了. 写2点自己遇到过的问题. 1.方法是公有的 // 通知归属人 @Async public void not ...
【hdu 4333】Revolving Digits
[链接]http://acm.hdu.edu.cn/showproblem.php?pid=4333 [题意] 就是给你一个数字,然后把最后一个数字放到最前面去,经过几次变换后又回到原数字,问在这些数 ...
ORA-01078错误举例：SID的大写和小写错误
案例重演: dbca建库.SID:metro --手工建库时实例名小写的metro ...... [oracle@org54 ~]$ export ORACLE_SID=METRO ...
3lession-python编程规范
今天继续学习python,内容主要就是python编程过程中的一些规范,包括注释.换行等 1.注释所有的注释都是以#开头,注释可以单独占有一行,也可以放到语句的末尾.因为python没有多行注释,所 ...
Web 组件是什么
Web 组件是什么一.总结这篇下面的内容多看 1.组件化的目的:高内聚,低耦合,便于多人同时开发 2.各种前端框架(前端组件化)让写前端不要太简单: 3.组件编程最最最最简单实例: <lin ...
PythonServer
服务器模型硬件服务器主机.集群厂商:IBM.HP.联想.浪潮软件服务器:编写的服务端应用程序,在硬件服务器上运行,一般依托于操作系统,给用户提供一套完整的服务 httpserver:处理htt ...
洛谷 P1808 单词分类_NOI导刊2011提高（01）
P1808 单词分类_NOI导刊2011提高(01) 题目描述 Oliver为了学好英语决定苦背单词,但很快他发现要直接记住杂乱无章的单词非常困难,他决定对单词进行分类. 两个单词可以分为一类当且仅当 ...
input选中和 select点击下拉选择获取选中选项的值
1.input选中$('#checkBox').find('input').each(function(i){ if($(this).prop('checked')){//获取是否选中并判断 $(t ...
Javascript和jquery事件--事件监听器
之前看完了js和jq的冒泡捕获和事件对象event,这里看看同时使用js和jq后我最容易混淆的监听器的绑定. (1) js的监听器绑定解绑绑定监听器有两种方式: a.on-事件type,比如oncl ...

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

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

随机推荐

热门专题