Heim > Artikel > Web-Frontend > Xiaoqiangs HTML5-Entwicklungsstraße für Mobilgeräte (48) – (Kleine Übung) Nachrichtenabonnementsystem [1]

Xiaoqiangs HTML5-Entwicklungsstraße für Mobilgeräte (48) – (Kleine Übung) Nachrichtenabonnementsystem [1]

黄舟Original: 2017-02-15 13:40:401230Durchsuche

1. Gesamtdesign

2. Datenbankdesign

     --新闻类别表
      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. Entwicklung der Systemabdeckung

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

Oben Code Zwei js-Dateien werden in

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

Grundlegende Eigenschafteneinstellungen

rttopHtml5.new.js

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

Erstellen Sie eine changepage()-Funktion und legen Sie das Fensterobjekt location.href fest Pfad, binden Sie das Pagecreate-Ereignis dieser Seite und führen Sie alle 3 Sekunden die Methode changepage () aus.

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>

Das ist es Xiaoqiangs HTML5-Entwicklungsstraße für Mobilgeräte (48) – (Kleine Übung) Inhalt des Nachrichtenabonnementsystems [1]. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website (www.php.cn)!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Xiaoqiangs HTML5-Entwicklungsstraße für Mobilgeräte (47) – JQuery Mobile Basic Page FrameworkNächster Artikel：Xiaoqiangs HTML5-Entwicklungsstraße für Mobilgeräte (47) – JQuery Mobile Basic Page Framework

In Verbindung stehende Artikel

Mehr sehen