208 lines
6.8 KiB
HTML
208 lines
6.8 KiB
HTML
<!DOCTYPE html>
|
||
<html>
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||
<title>我的生活</title>
|
||
<meta name="viewport" content="initial-scale=1, maximum-scale=1">
|
||
|
||
<meta name="apple-mobile-web-app-capable" content="yes">
|
||
<meta name="apple-mobile-web-app-status-bar-style" content="black">
|
||
|
||
<link rel="stylesheet" href="http://g.alicdn.com/msui/sm/0.6.2/css/sm.min.css">
|
||
<link rel="stylesheet" href="http://g.alicdn.com/msui/sm/0.6.2/css/sm-extend.min.css">
|
||
|
||
<link rel="stylesheet" href="./css/index.css">
|
||
|
||
</head>
|
||
<body>
|
||
|
||
|
||
|
||
<!-- page集合的容器，里面放多个平行的.page，其他.page作为内联页面由路由控制展示 -->
|
||
<div class="page-group">
|
||
<!-- 单个page ,第一个.page默认被展示-->
|
||
<div class="page">
|
||
<!-- 标题栏 -->
|
||
<header class="bar bar-nav">
|
||
<a class="icon icon-me pull-left open-panel"></a>
|
||
<h1 class="title">标题</h1>
|
||
</header>
|
||
|
||
<!-- 工具栏 -->
|
||
<nav class="bar bar-tab">
|
||
<a class="tab-item external active" href="#">
|
||
<span class="icon icon-home"></span>
|
||
<span class="tab-label">首页</span>
|
||
</a>
|
||
<a class="tab-item external" href="#">
|
||
<span class="icon icon-star"></span>
|
||
<span class="tab-label">收藏</span>
|
||
</a>
|
||
<a class="tab-item external" href="#">
|
||
<span class="icon icon-settings"></span>
|
||
<span class="tab-label">设置</span>
|
||
</a>
|
||
</nav>
|
||
|
||
<!-- 这里是页面内容区 -->
|
||
<div class="content">
|
||
|
||
<div class="buttons-tab" id="TabsTitle">
|
||
|
||
|
||
</div>
|
||
|
||
|
||
<div class="tabs">
|
||
<div id="tab1" class="tab active">
|
||
<div class="list-block media-list">
|
||
<ul id="NewsList">
|
||
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
<div id="tab2" class="tab">
|
||
<div class="list-block media-list">
|
||
<ul>
|
||
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
<div id="tab3" class="tab">
|
||
<div class="list-block media-list">
|
||
<ul>
|
||
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
<div id="tab4" class="tab">
|
||
<div class="list-block media-list">
|
||
<ul>
|
||
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<!-- popup, panel 等放在这里 -->
|
||
<div class="panel-overlay"></div>
|
||
<!-- Left Panel with Reveal effect -->
|
||
<div class="panel panel-left panel-reveal">
|
||
<div class="content-block">
|
||
<p>这是一个侧栏</p>
|
||
<p></p>
|
||
<!-- Click on link with "close-panel" class will close panel -->
|
||
<p><a href="#" class="close-panel">关闭</a></p>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
|
||
|
||
<script type='text/javascript' src='http://g.alicdn.com/sj/lib/zepto/zepto.min.js' charset='utf-8'></script>
|
||
<script type='text/javascript' src='http://g.alicdn.com/msui/sm/0.6.2/js/sm.min.js' charset='utf-8'></script>
|
||
<script type='text/javascript' src='http://g.alicdn.com/msui/sm/0.6.2/js/sm-extend.min.js' charset='utf-8'></script>
|
||
|
||
<script src="./js/data.js"></script>
|
||
<script>
|
||
var NewsList = document.getElementById('NewsList');
|
||
|
||
/**
|
||
* 渲染全部分类标签的新闻
|
||
*/
|
||
function RenderAllNew() {
|
||
var htmls = "";
|
||
for(let i = 0; i<listData.data.length; i++) {
|
||
htmls+= `<li>
|
||
<a href="${listData.data[i].surl}" class="item-link item-content">
|
||
<div class="item-media"><img src="${listData.data[i].img}" style='width: 4rem;'></div>
|
||
<div class="item-inner">
|
||
<div class="item-title-row">
|
||
<div class="item-title">${listData.data[i].title}</div>
|
||
</div>
|
||
<div class="item-text">${listData.data[i].intro}</div>
|
||
</div>
|
||
</a>
|
||
</li>`;
|
||
}
|
||
NewsList.innerHTML = htmls
|
||
}
|
||
|
||
/**
|
||
* 渲染顶部的分类tab标签
|
||
*/
|
||
function RenderTab() {
|
||
var TabsTitle = document.getElementById("TabsTitle");
|
||
// tab切换标签的数组
|
||
var TabList = [
|
||
{ id: 1, title: '全部', isactive: true },
|
||
{ id: 2, title: '体育', isactive: false },
|
||
{ id: 3, title: '新闻', isactive: false },
|
||
{ id: 4, title: '搞笑', isactive: false }
|
||
];
|
||
var htmlDoms = ""
|
||
// 生成tab切换标签的html代码
|
||
for(var i =0;i<TabList.length;i++){
|
||
htmlDoms+= `<a onclick="clickTabs(${TabList[i].id},'${TabList[i].title}')" href="#tab${TabList[i].id}" class="tab-link ${TabList[i].isactive ? 'active' : ''} button">${TabList[i].title}</a>`
|
||
}
|
||
TabsTitle.innerHTML = htmlDoms;
|
||
}
|
||
|
||
/**
|
||
* 顶部分类tab标签被点击的时候
|
||
*/
|
||
function clickTabs(id,title) {
|
||
var html = "";
|
||
// 获取你点击的分类tab里面的ul父级节点，作用：方便下面插入新闻列表
|
||
var father = document.getElementById(`tab${id}`).getElementsByTagName("ul")[0]
|
||
|
||
|
||
var newData = [];
|
||
// 判断用户点击顶部分类类型，如果是全部，则不筛选数据，直接调用 RenderAllNew
|
||
if(title == '全部') {
|
||
RenderAllNew()
|
||
}else {
|
||
|
||
// 筛选符合分类的数据
|
||
for(let i = 0; i<listData.data.length; i++) {
|
||
if(listData.data[i].category_chn == title) {
|
||
newData.push(listData.data[i])
|
||
}
|
||
}
|
||
|
||
for(let i = 0; i<newData.length; i++) {
|
||
html+= `<li>
|
||
<a href="${newData[i].surl}" class="item-link item-content">
|
||
<div class="item-media"><img src="${newData[i].img}" style='width: 4rem;'></div>
|
||
<div class="item-inner">
|
||
<div class="item-title-row">
|
||
<div class="item-title">${newData[i].title}</div>
|
||
</div>
|
||
<div class="item-text">${newData[i].intro}</div>
|
||
</div>
|
||
</a>
|
||
</li>`;
|
||
}
|
||
|
||
father.innerHTML = html;
|
||
|
||
}
|
||
|
||
|
||
}
|
||
|
||
RenderAllNew()
|
||
RenderTab()
|
||
|
||
</script>
|
||
|
||
</body>
|
||
</html> |