recherche

Maison >interface Web >Tutoriel H5 >Route de développement mobile HTML5 de Xiaoqiang (48) - (Petit exercice) Système d'abonnement aux actualités [1]

Route de développement mobile HTML5 de Xiaoqiang (48) - (Petit exercice) Système d'abonnement aux actualités [1]

黄舟
黄舟original
2017-02-15 13:40:401436parcourir

1. Conception globale


2. Conception de la base de données


     --新闻类别表
      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. Développement de la couverture du système 


<!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>

Dans ce qui précède code Deux fichiers js sont introduits dans


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)
    }
}


Paramètres de propriété de base

rttopHtml5.new.js


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

Créez une fonction changepage() et définissez l'emplacement de l'objet fenêtre.href Chemin, liez l'événement pagecreate de cette page et exécutez la méthode changepage() toutes les 3 secondes.


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>


C'est ça Route de développement mobile HTML5 de Xiaoqiang (48) - (Petit exercice) Contenu du système d'abonnement aux actualités [1], pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois (www.php.cn) !



Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Route de développement mobile HTML5 de Xiaoqiang (47) - cadre de page de base mobile jqueryArticle suivant：Route de développement mobile HTML5 de Xiaoqiang (47) - cadre de page de base mobile jquery

Articles Liés

Voir plus