mobilebone
Version:
Bone main for mobile web APP with a sigle page mode by using HTML5 history API router.
258 lines (253 loc) • 9.61 kB
HTML
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
<title>微信</title>
<link rel="stylesheet" href="../../src/mobilebone.css">
<link rel="stylesheet" href="css/wechat.css">
</head>
<body>
<div class="header out" data-role="header">
<h1>微信</h1>
<a href="../index.html" class="icon-add" data-ajax="false">添加</a>
<a href="../index.html" class="icon-search" data-ajax="false">搜索</a>
</div>
<div id="pageHome" class="page out" data-title="微信">
<div class="content">
<div class="">
<a href="#pageChatList" class="wechat-list">
<img src="img/head/header-1.jpg">
<div class="cell">
<div class="wechat-h-time"><h5>爱钓鱼的小伙</h5><time>早上09:51</time></div>
<p>点击右上角搜索图标可以回到主测试页面</p>
</div>
</a>
<a href="#pageChatList" class="wechat-list">
<img src="img/head/public-1.png">
<div class="cell">
<div class="wechat-h-time"><h5 class="business">微团购</h5><time>早上09:38</time></div>
<p>食间道，兄弟姐妹们来报道喽</p>
</div>
</a>
<a href="#pageChatList" class="wechat-list">
<img src="img/head/public-2.png">
<div class="cell">
<div class="wechat-h-time"><h5>腾讯新闻</h5><time>早上08:47</time></div>
<p>习近平：文艺不能当市场的奴隶</p>
</div>
</a>
<a href="#pageChatList" class="wechat-list">
<img src="img/head/public-3.png">
<div class="cell">
<div class="wechat-h-time"><h5>订阅号</h5><time>早上08:36</time></div>
<p>腾讯大申网:图说上海·女儿啊，快醒醒</p>
</div>
</a>
<a href="#pageChatList" class="wechat-list">
<img src="img/head/header-2.jpg">
<div class="cell">
<div class="wechat-h-time"><h5>上海设计中心</h5><time>昨天</time></div>
<p>橘：我觉得有很多角落可以Ps上</p>
</div>
</a>
<a href="#pageChatList" class="wechat-list">
<img src="img/head/header-3.jpg">
<div class="cell">
<div class="wechat-h-time"><h5>紫禁之巅敲代码</h5><time>昨天</time></div>
<p>西门吹雪:[视频]</p>
</div>
</a>
<a href="#pageChatList" class="wechat-list">
<img src="img/head/public-4.png">
<div class="cell">
<div class="wechat-h-time"><h5 class="business">手机话费充值</h5><time>昨天</time></div>
<p>【疯抢流量】全国联通冲200M送50M</p>
</div>
</a>
<a href="#pageChatList" class="wechat-list">
<img src="img/head/header-4.jpg">
<div class="cell">
<div class="wechat-h-time"><h5>mobilebone作者</h5><time>星期三</time></div>
<p><img src="img/ok.png" width="16" height="16"></p>
</div>
</a>
<a href="#pageChatList" class="wechat-list">
<img src="img/head/header-5.jpg">
<div class="cell">
<div class="wechat-h-time"><h5>tracy</h5><time>星期三</time></div>
<p>Ah he'll make a good companion I hope.</p>
</div>
</a>
</div>
</div>
</div>
<div id="pageChatList" class="page out">
<div class="header" data-role="header">
<a href="#pageHome" class="icon-back" data-rel="back">返回</a>
<h1>腾讯新闻</h1>
</div>
<div class="content">
<div class="wechat-detail">
<img id="screenShot" data-src="img/screenshot/1.jpg" data-width="720" data-height="2405">
</div>
<div class="loading"></div>
</div>
</div>
<div id="pageContacts" class="page out">
<div class="content">
<div>
<div class="contact-group">
<div class="contact-list">
<img src="img/head/contact-1.png">
<nickname>新的朋友</nickname>
</div>
<div class="contact-list">
<img src="img/head/contact-2.png">
<nickname>群聊</nickname>
</div>
<div class="contact-list">
<img src="img/head/contact-3.png">
<nickname>标签</nickname>
</div>
<div class="contact-list">
<img src="img/head/contact-4.png">
<nickname>公众号</nickname>
</div>
</div>
<h5 class="contact-h">企业号</h5>
<div class="contact-group">
<div class="contact-list">
<img src="img/head/contact-5.png">
<nickname>腾讯企业号</nickname>
</div>
</div>
<h5 class="contact-h">A</h5>
<div class="contact-group">
<div class="contact-list">
<img src="img/head/header-1.jpg">
<nickname>爱钓鱼的小伙</nickname>
</div>
<div class="contact-list">
<img src="img/head/header-7.jpg">
<nickname>阿里巴巴</nickname>
</div>
</div>
<h5 class="contact-h">B</h5>
<div class="contact-group">
<div class="contact-list">
<img src="img/head/header-8.gif">
<nickname>Big-laugh</nickname>
</div>
</div>
<h5 class="contact-h">M</h5>
<div class="contact-group">
<div class="contact-list">
<img src="img/head/header-0.jpg">
<nickname>Mobilebone</nickname>
</div>
</div>
<h5 class="contact-h">Q</h5>
<div class="contact-group">
<div class="contact-list">
<img src="img/head/header-6.jpg">
<nickname>乔巴</nickname>
</div>
</div>
</div>
</div>
</div>
<div id="pageFind" class="page out">
<div class="content">
<div>
<div class="find-group">
<div class="find-list">
<i class="icon-find icon-find-1"></i>朋友圈
</div>
</div>
<div class="find-group">
<div class="find-list">
<i class="icon-find icon-find-2"></i>扫一扫
</div>
<div class="find-list">
<i class="icon-find icon-find-3"></i>摇一摇
</div>
</div>
<div class="find-group">
<div class="find-list">
<i class="icon-find icon-find-4"></i>附近的人
</div>
<div class="find-list">
<i class="icon-find icon-find-5"></i>漂流瓶
</div>
</div>
<div class="find-group">
<div class="find-list">
<i class="icon-find icon-find-6"></i>购物
</div>
<div class="find-list">
<i class="icon-find icon-find-7"></i>游戏
</div>
</div>
</div>
</div>
</div>
<div id="pageMe" class="page out">
<div class="content">
<div>
<div class="me-group">
<div class="me-header">
<img class="me-head" src="img/head/header-0.jpg">
<div class="me-detail">
<h6>Mobilebone</h6>
<img src="img/account.png" width="153" height="16">
</div>
</div>
</div>
<div class="me-group">
<div class="me-list">
<i class="icon-me icon-me-1"></i>相册
</div>
<div class="me-list">
<i class="icon-me icon-me-2"></i>收藏
</div>
</div>
<div class="me-group">
<div class="me-list">
<i class="icon-me icon-me-3"></i>钱包
</div>
</div>
<div class="me-group">
<div class="me-list">
<i class="icon-me icon-me-4"></i>设置
</div>
</div>
</div>
</div>
</div>
<div class="footer out" data-role="footer">
<a href="#pageHome" data-rel="auto">
<i class="icon-wechat"></i>微信
</a>
<a href="#pageContacts" data-rel="auto">
<i class="icon-contacts"></i>通讯录
</a>
<a href="#pageFind" data-rel="auto">
<i class="icon-finds"></i>发现
</a>
<a href="#pageMe" data-rel="auto">
<i class="icon-mes"></i>我
</a>
</div>
<script src="js/iscroll-lite.js"></script>
<script src="js/zepto-docs.js"></script>
<!--zepto或者fastclick都是可以的
-->
<!--<script src="js/fastclick.js"></script>
<script>
FastClick.attach(document.body);
</script>-->
<script src="../../src/mobilebone.js"></script>
<script src="js/wechat.js"></script>
</body>
</html>