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

随机推荐

1.3 Quick Start中 Step 6: Setting up a multi-broker cluster官网剖析（博主推荐）
不多说,直接上干货! 一切来源于官网 http://kafka.apache.org/documentation/ Step 6: Setting up a multi-broker cluster ...
django 简单会议室预约（3）
URL配置: 今天配置一下URL,打开urls.py配置如下: from django.conf.urls import patterns, include, url from djapp impor ...
移动开发js库Zepto.js使用中的一些注意点
来自http://chaoskeh.com/blog/some-experience-of-using-zepto.html的参考. 前段时间完成了公司一个产品的 HTML5 触屏版,开发中使用了 Z ...
golang iota
package main import ( "fmt" ) const ( Low = * (iota + ) Medium High ) func main() { //iota ...
Linux常用运维命令小结
1. 空设备文件以及标准输入输出 /dev/null 表示空设备文件 0 表示stdin标准输入 1 表示stdout标准输出 2 表示stderr标准错误 2>&1 这里有两种解释:将 ...
synchronized和AtomicInteger解决并发问题的性能比较
AtomicInteger,一个提供原子操作的Integer的类.在Java语言中,++i和i++操作并不是线程安全的,在使用的时候,不可避免的会用到synchronized关键字.而volatile ...
JNI各种环境下编译方法及初期出错分析
转自 https://www.cnblogs.com/xyang0917/p/4172490.html 第五步.将C/C++代码编译成本地动态库文件动态库文件名命名规则:lib+动态库文件名+后缀( ...
springboot 使用FreeMarker模板（转）
在spring boot中使用FreeMarker模板非常简单方便,只需要简单几步就行: 1.引入依赖: <dependency> <groupId>org.springfra ...
51NOD——N 1107 斜率小于0的连线数量
https://www.51nod.com/onlineJudge/questionCode.html#!problemId=1107 基准时间限制:1 秒空间限制:131072 KB 分值: 40 ...
Android ---------- Android Bar Bug 总结
1 怎样设置 ActionBar的Tab 的颜色? // 设置actionBar的颜色 Drawable draw = new ColorDrawable(Color.GREEN); actionBa ...

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

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

随机推荐

热门专题