返回顶部下载帮助
网站模板
模板颜色分类:
当前位置: dw入门 >

页面初始化,页面预加载,页面缓存代码

2020-05-08 文章标签: 手机端 浏览次数:

我们讲解下设计第一个移动页面,现在移动端是浏览网站占比很大,小程序,今儿头条,等大部分通过这些搜索相关信息了。所以一个网站的手机版是必不可少的。手机版的和html写法和电脑版的有什么区别呢?

HTML5教程

1.页面初始化

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<meta name="viewport" content="width=device-width,initial-scale=1" />
<link href="jquery-mobile/jquery.mobile.theme-1.3.0.min.css" rel="stylesheet" type="text/css">
<link href="jquery-mobile/jquery.mobile.structure-1.3.0.min.css" rel="stylesheet" type="text/css">
<script src="jquery-mobile/jquery-1.8.3.min.js" type="text/javascript"></script>
<script src="jquery-mobile/jquery.mobile-1.3.0.min.js" type="text/javascript"></script>
<script>
$(function(){
})
$(document).ready(function(e){
    alert("触发$(document).ready事件");
})
$(document).live("mobileinit", function(){
    alert("触发mobileinit事件");
});
$(document).delegate("#page1", "pageinit", function(){
    alert("触发页面1的pageinit事件");
})
$(document).delegate("#page1", "pageshow", function(){
    alert("触发页面1的pageshow事件");
})
$(document).delegate("#page2", "pageinit", function(){
    alert("触发页面2的pageinit事件");
})
</script>
<style type="text/css"></style>
</head>
<body>
<div data-role="page" id="page1">
    <div data-role="header">
        <h1>第一页</h1>
    </div>
    <div data-role="content">
        <ul data-role="listview" data-inset="true">
            <li><a href="#" onClick="$(document).trigger('mobileinit')">触发mobileinit事件</a></li>
            <li><a href="#page2">进入第2页</a></li>
        </ul>
    </div>
</div>
<div data-role="page" id="page2">
    <div data-role="header">
        <h1>第二页</h1>
    </div>
    <div data-role="content"> <a data-role="button" href="#page1">返回第1页</a> </div>
</div>
</body>
</html>

2.页面预加载

<!DOCTYPE html> 
<html>
<head>
<meta charset="utf-8">
<title>jQuery Mobile Web 应用程序</title>
<meta name="viewport" content="width=device-width,initial-scale=1" />
<link href="jquery-mobile/jquery.mobile-1.3.0.min.css" rel="stylesheet" type="text/css"/>
<style type="text/css">
#page div p img { width: 100%; }
</style>
<script src="jquery-mobile/jquery-1.8.3.min.js" type="text/javascript"></script>
<script src="jquery-mobile/jquery.mobile-1.3.0.min.js" type="text/javascript"></script>
</head> 
<body> 
<div data-role="page" id="page">
<div data-role="header">
<h1>大数据是互联网金融题中应有之义</h1>
</div>
<div data-role="content">
<p><img src="images/3.png"  alt=""/></p>
        <p>互联网对金融的变革,总体上来说,可以分为两部分:互联网思想和互联网技术,这两者类似世界观和方法论的关系,是互相辅佐和渗透的。</p>
        <p>互联网技术从深层次、具体化的角度解读可以分为:大数据、P2P人人组织网络和两面市场。其中大数据是最重要的因素之一。金融没有类似实物的物理生产、仓储、物流等过程,但其本身是数据的生产、仓储、挖掘、传输、分析和集成。所以大数据对于金融而言,相比其他行业,无疑是有更巨大的影响力。</p>
        <p>大数据,是思维、技术与数据的三足鼎立。大数据不仅指规模庞大的数据,它首先是一种思维方式的变化,其次是对这些数据的处理和应用,是数据、处理技术与应用三者的统一的一列处理技术,最后,大数据的前提必然是充裕互通的数据本身。</p>
        <p>大数据的思维方式会改变传统金融作业思维,它首先是会改变金融信贷业的抵押文化,推动信用变现成为可能和主流。尤其是中国金融行业,有着根深蒂固的抵押文化,在贷款的过程中严重依赖于抵押物,这是中小企业得不到贷款服务的很重要原因。抵押文化让贷款服务提供方在考量时思维变得简单粗暴。贷款方的考量核心是判断抵押物品的价值,确保有相应的价值空间。比如房产价值200万,那么打个7折,只要保证价值不下跌太厉害,那么就不会产生风险。房价不下跌,风险不大;房价下跌,也是国家的事情,与银行机构无关。</p>
        <p>……</p>
</div>
<div data-role="footer">
<h4>Copyright © 虎嗅网 ( 京ICP备12013432 ) </h4>
</div>
</div>
</body>
</html>

demo2

<!DOCTYPE html> 
<html>
<head>
<meta charset="utf-8">
<title>jQuery Mobile Web 应用程序</title>
<meta name="viewport" content="width=device-width,initial-scale=1" />
<link href="jquery-mobile/jquery.mobile-1.3.0.min.css" rel="stylesheet" type="text/css"/>
<style type="text/css">
#page div p img { width: 100%; }
</style>
<script src="jquery-mobile/jquery-1.8.3.min.js" type="text/javascript"></script>
<script src="jquery-mobile/jquery.mobile-1.3.0.min.js" type="text/javascript"></script>
</head> 
<body> 
<div data-role="page" id="page">
<div data-role="header">
<h1>微信公众平台该改变了!</h1>
</div>
<div data-role="content">
<p><img src="images/2.jpg"  alt=""/></p>
        <p>微信的火早已经从APP层面烧到平台层面,这个不用多废话。但是,在运营“山寨发布会”和“如是淼闻”两个数万粉丝的公众号半年、也在接触了不少企业公众帐号开发者之后,淼叔却感觉,微信公众平台似乎还没有做好这个“平台”的准备,这才是今天要说的重点。</p>
        <h2>为何说微信公众平台不完善?</h2>
        <p>作为一个APP来说,所需要关心的无非是用户数、增长率、留存率、活跃度和ARPU值。但对于将“开放平台”列为三大宗旨(另外两大是沟通和社交)的微信来说,这些指标显然不能满足微信的野心。</p>
        <p>……</p>
        <h2>建立公开API体系迫在眉睫</h2>
        <p>我们可以看一下历史上几个著名的平台。最早的大众领域平台实际上是DOS/Windows系统,在DOS时代,就有了成熟的中断调用体系供第三方程序使用;Windows时代,这一接口进化为API体系。成千上万基于Windows的第三方软件应用成为平台的巨大财富,也帮助Windows巩固了自己的用户群体,在桌面领域逐一击败苹果、IBM、Novell和Linux等挑战者。而在互联网时代,最具商业价值的开放平台是苹果的App Store,这个市场曾被媒体给予了3000亿美元的估值。较为成熟的还有Google/Android平台,Google地图靠着完善的API接口获得了大量第三方应用开发者的青睐,得以嵌入更多LBS应用,成为移动互联网的基础设施级产品。</p>
        <p>……</p>
</div>
<div data-role="footer">
<h4>Copyright © 虎嗅网 ( 京ICP备12013432 ) </h4>
</div>
</div>
</body>
</html>

demo3

<!DOCTYPE html> 
<html>
<head>
<meta charset="utf-8">
<title>jQuery Mobile Web 应用程序</title>
<meta name="viewport" content="width=device-width,initial-scale=1" />
<link href="jquery-mobile/jquery.mobile-1.3.0.min.css" rel="stylesheet" type="text/css"/>
<script src="jquery-mobile/jquery-1.8.3.min.js" type="text/javascript"></script>
<script src="jquery-mobile/jquery.mobile-1.3.0.min.js" type="text/javascript"></script>
</head> 
<body> 
<div data-role="page" id="page">
<div data-role="header">
<h1>虎嗅网-多点</h1>
</div>
<div data-role="content">
<ul data-role="listview">
<li><a href="page2.html" data-prefetch="true">看点</a></li>
            <li><a href="page3.html" data-prefetch="true">观点</a></li>
</ul>
</div>
<div data-role="footer">
<h4>Copyright © 虎嗅网 ( 京ICP备12013432 ) </h4>
</div>
</div>
</body>
</html>

3.页面缓存

<!DOCTYPE html> 
<html>
<head>
<meta charset="utf-8">
<title>jQuery Mobile Web 应用程序</title>
<meta name="viewport" content="width=device-width,initial-scale=1" />
<link href="jquery-mobile/jquery.mobile-1.3.0.min.css" rel="stylesheet" type="text/css"/>
<style type="text/css">
#page div p img { width: 100%; }
</style>
<script src="jquery-mobile/jquery-1.8.3.min.js" type="text/javascript"></script>
<script src="jquery-mobile/jquery.mobile-1.3.0.min.js" type="text/javascript"></script>
</head> 
<body> 
<div data-role="page" id="page">
<div data-role="header">
<h1>大数据是互联网金融题中应有之义</h1>
</div>
<div data-role="content">
<p><img src="images/3.png"  alt=""/></p>
        <p>互联网对金融的变革,总体上来说,可以分为两部分:互联网思想和互联网技术,这两者类似世界观和方法论的关系,是互相辅佐和渗透的。</p>
        <p>互联网技术从深层次、具体化的角度解读可以分为:大数据、P2P人人组织网络和两面市场。其中大数据是最重要的因素之一。金融没有类似实物的物理生产、仓储、物流等过程,但其本身是数据的生产、仓储、挖掘、传输、分析和集成。所以大数据对于金融而言,相比其他行业,无疑是有更巨大的影响力。</p>
        <p>大数据,是思维、技术与数据的三足鼎立。大数据不仅指规模庞大的数据,它首先是一种思维方式的变化,其次是对这些数据的处理和应用,是数据、处理技术与应用三者的统一的一列处理技术,最后,大数据的前提必然是充裕互通的数据本身。</p>
        <p>大数据的思维方式会改变传统金融作业思维,它首先是会改变金融信贷业的抵押文化,推动信用变现成为可能和主流。尤其是中国金融行业,有着根深蒂固的抵押文化,在贷款的过程中严重依赖于抵押物,这是中小企业得不到贷款服务的很重要原因。抵押文化让贷款服务提供方在考量时思维变得简单粗暴。贷款方的考量核心是判断抵押物品的价值,确保有相应的价值空间。比如房产价值200万,那么打个7折,只要保证价值不下跌太厉害,那么就不会产生风险。房价不下跌,风险不大;房价下跌,也是国家的事情,与银行机构无关。</p>
        <p>……</p>
</div>
<div data-role="footer">
<h4>Copyright © 虎嗅网 ( 京ICP备12013432 ) </h4>
</div>
</div>
</body>
</html>

demo2

<!DOCTYPE html> 
<html>
<head>
<meta charset="utf-8">
<title>jQuery Mobile Web 应用程序</title>
<meta name="viewport" content="width=device-width,initial-scale=1" />
<link href="jquery-mobile/jquery.mobile-1.3.0.min.css" rel="stylesheet" type="text/css"/>
<style type="text/css">
#page div p img { width: 100%; }
</style>
<script src="jquery-mobile/jquery-1.8.3.min.js" type="text/javascript"></script>
<script src="jquery-mobile/jquery.mobile-1.3.0.min.js" type="text/javascript"></script>
</head> 
<body> 
<div data-role="page" id="page">
<div data-role="header">
<h1>微信公众平台该改变了!</h1>
</div>
<div data-role="content">
<p><img src="images/2.jpg"  alt=""/></p>
        <p>微信的火早已经从APP层面烧到平台层面,这个不用多废话。但是,在运营“山寨发布会”和“如是淼闻”两个数万粉丝的公众号半年、也在接触了不少企业公众帐号开发者之后,淼叔却感觉,微信公众平台似乎还没有做好这个“平台”的准备,这才是今天要说的重点。</p>
        <h2>为何说微信公众平台不完善?</h2>
        <p>作为一个APP来说,所需要关心的无非是用户数、增长率、留存率、活跃度和ARPU值。但对于将“开放平台”列为三大宗旨(另外两大是沟通和社交)的微信来说,这些指标显然不能满足微信的野心。</p>
        <p>……</p>
        <h2>建立公开API体系迫在眉睫</h2>
        <p>我们可以看一下历史上几个著名的平台。最早的大众领域平台实际上是DOS/Windows系统,在DOS时代,就有了成熟的中断调用体系供第三方程序使用;Windows时代,这一接口进化为API体系。成千上万基于Windows的第三方软件应用成为平台的巨大财富,也帮助Windows巩固了自己的用户群体,在桌面领域逐一击败苹果、IBM、Novell和Linux等挑战者。而在互联网时代,最具商业价值的开放平台是苹果的App Store,这个市场曾被媒体给予了3000亿美元的估值。较为成熟的还有Google/Android平台,Google地图靠着完善的API接口获得了大量第三方应用开发者的青睐,得以嵌入更多LBS应用,成为移动互联网的基础设施级产品。</p>
        <p>……</p>
</div>
<div data-role="footer">
<h4>Copyright © 虎嗅网 ( 京ICP备12013432 ) </h4>
</div>
</div>
</body>
</html>

demo3

<!DOCTYPE html> 
<html>
<head>
<meta charset="utf-8">
<title>jQuery Mobile Web 应用程序</title>
<meta name="viewport" content="width=device-width,initial-scale=1" />
<link href="jquery-mobile/jquery.mobile-1.3.0.min.css" rel="stylesheet" type="text/css"/>
<script src="jquery-mobile/jquery-1.8.3.min.js" type="text/javascript"></script>
<script src="jquery-mobile/jquery.mobile-1.3.0.min.js" type="text/javascript"></script>
</head> 
<body> 
<div data-role="page" id="page" data-dom-cache="true">
<div data-role="header">
<h1>虎嗅网-多点</h1>
</div>
<div data-role="content">
<ul data-role="listview">
<li><a href="page2.html" data-prefetch="true">看点</a></li>
            <li><a href="page3.html" data-prefetch="true">观点</a></li>
</ul>
</div>
<div data-role="footer">
<h4>Copyright © 虎嗅网 ( 京ICP备12013432 ) </h4>
</div>
</div>
</body>
</html>


建站咨询 - 联系我们 - 广告服务 - 友情链接 - 版权声明 - 手机版

免责声明:站内所有资源仅供学习与参考,请勿用于商业用途,否则产生的一切后果将由您自己承担!版权归原创者所有,如果侵犯了您的权益,请通知我们,我们会及时删除侵权内容。