bmy/ClassContent
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

first commit

Browse Source
This commit is contained in:
编码猿
2024-09-27 02:06:13 +08:00
commit 852d94fbb9
36760 changed files with 3274413 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

208
历届学生/刘合群/新闻app/index.html Normal file
View File

@@ -0,0 +1,208 @@
<!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>