• 技术文章 >web前端 >H5教程

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

    黄舟黄舟2017-02-15 13:40:40原创586
    一、总体设计


    二、数据库设计


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

    在上面代码中引入了两个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>
    	<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>


    以上就是小强的HTML5移动开发之路(48)——(小练习)新闻订阅系统【1】的内容,更多相关内容请关注PHP中文网(m.sbmmt.com)!

    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。
    上一篇:小强的HTML5移动开发之路(47)——jquery mobile基本的页面框架 下一篇:小强的HTML5移动开发之路(49)——HTML5开发神器HBuilder
    20期PHP线上班

    相关文章推荐

    • 【活动】充值PHP中文网VIP即送云服务器• phonegap使用方法介绍(八)操作数据库• HTML5 b和i标记将被赋予真正的语义_html5教程技巧• HTML 5可以做五件事情 超出你的想象• 在今天,利用 HTML5 开发和发布大型跨平台网游,可行性如何?要解决哪些问题?
    1/1

    PHP中文网