search

Home >Web Front-end >H5 Tutorial >Xiaoqiang's HTML5 mobile development road (48) - (Small exercise) News subscription system [1]

Xiaoqiang's HTML5 mobile development road (48) - (Small exercise) News subscription system [1]

黄舟
黄舟Original
2017-02-15 13:40:401435browse

1. Overall design


2. Database design


     --新闻类别表
      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
     );


3. System cover development


<!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>
  <p data-role="page" id="load_index" data-theme="c">
    <p data-role="header" data-position="fixed">
      <h4>阳光小强</h4>
    </p>
    <p class="border_p01"></p>  
    <p class="load">
       <p class="t">心是一个人的翅膀，心有多大世界就有多大，每个人都有一颗不平凡的心——相信自己</p>
       <p><img src="images/rttop_loading.gif" alt="" /></p>
       <p class="l">正在加载数据...</p>
    </p>
    <p data-role="footer" data-position="fixed" >
      <h1>©2014 blog.csdn.net/dawanganban studio</h1>
    </p>
  </p>
<script src="js/rttopHtml5.base.js" 
          type="text/javascript"></script>
<script src="js/rttopHtml5.news.js" 
      type="text/javascript" ></script>
</body>
</html>
</html>

Introduced two js file


rttopHtml5.base.js


var rttophtml5mobi = {
    author: &#39;tgrong&#39;,
    version: &#39;1.0&#39;,
    website: &#39;http://localhost&#39;
}
rttophtml5mobi.utils = {
    setParam: function(name, value) {
        localStorage.setItem(name, value)
    },
    getParam: function(name) {
        return localStorage.getItem(name)
    }
}


Basic Property settings

rttopHtml5.new.js


//封面页面创建事件
function changepage() {
    window.location.href = "index.htm";
}
$(&#39;#load_index&#39;).live("pagecreate", function() {
    var id = setInterval("changepage()", 3000);
})

Create a changepage() function, set the window object location.href path, and bind the pagecreate of this page event, execute the changepage() method every 3 seconds.


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>
	<p data-role="page" id="index_index">
    <p data-role="header" data-position="fixed" 
         data-position="inline">
      	 <h4>阳光新闻</h4>
    </p>
    <p data-role="content">

    </p>
    <p data-role="footer" data-position="fixed" >
      <h1></h1>
    </p>
  </p>
</body>
</html>


The above is Xiaoqiang’s The Road to HTML5 Mobile Development (48) - (Small Exercise) The content of the news subscription system [1]. For more related content, please pay attention to the PHP Chinese website (www.php.cn)!



Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：Xiaoqiang’s HTML5 mobile development road (47) - jquery mobile basic page frameworkNext article：Xiaoqiang’s HTML5 mobile development road (47) - jquery mobile basic page framework

Related articles

See more