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

76
历届学生/18课程/class18/课程/2020-10-22/index.html Normal file
View File

@@ -0,0 +1,76 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>newTbas</title>
<script src="./tabs.js"></script>
<link rel="stylesheet" href="./tabs.css">
</head>
<body>
<div id="app"></div>
</body>
<script>
var TabsData = [
{
name: '社会',
content: [
{
time: '2020-10-22',
title: '社会1标题',
text: '社会的1内容'
},
{
time: '2020-10-22',
title: '社会2标题',
text: '社会的2内容'
},
{
time: '2020-10-22',
title: '社会3标题',
text: '社会的3内容'
},
]
},
{
name: '科技',
content: [
{
time: '2020-10-22',
title: '科技1标题',
text: '科技的1内容'
}
]
},
{
name: '军事',
content: [
{
time: '2020-10-22',
title: '军事1标题',
text: '军事的1内容'
},
{
time: '2020-10-22',
title: '军事2标题',
text: '军事的2内容'
}
]
},
]
new lBtab({
el: '#app',
tabsTitle: 'name',
data: TabsData
})
</script>
</html>

21
历届学生/18课程/class18/课程/2020-10-22/tabs.css Normal file
View File

@@ -0,0 +1,21 @@
body,ul,li{
margin: 0;
padding: 0;
list-style: none;
}
.tabs_title {
overflow: hidden;
}
.tabs_title li {
float: left;
margin-right: 10px;
}
.tabs_content li {
display: none;
}
.tabs_content_active {
display: block !important;
}
.tabs_title_active {
color: red;
}

101
历届学生/18课程/class18/课程/2020-10-22/tabs.js Normal file
View File

@@ -0,0 +1,101 @@
// js 封装插件
(function () {
var defaultOption = {
tabsTitle: "title", // tabs的标题
}
// 构造函数，在这里面定义变量，实现插件参数的校验
function Tabs(option) {
if (option.hasOwnProperty("el") && option.hasOwnProperty("data")) {
if (option.el.length !=0 && option.data.length !=0) {
defaultOption.tabsTitle = option.tabsTitle || defaultOption.tabsTitle
this.option = option
this.init()
} else {
throw new Error("插件需要的核心参数：el和data的数值都不能为空")
}
} else {
// console.error("插件需要的核心参数：el和data都不能为空");
throw new Error("插件需要的核心参数：el和data都必须传入")
}
}
// 类的方法，主要实现插件的核心功能
Tabs.prototype = {
init: function () {
this.CreatedTabsTitle();
},
// 创建tabs切换的标题
CreatedTabsTitle: function () {
var Ul = document.createElement("ul")
Ul.className = "tabs_title"
this.option.data.forEach((v,i) => {
console.log(v);
Ul.innerHTML += `<li class="${ i == 0 ? 'tabs_title_active' : '' }">${v[defaultOption.tabsTitle]}</li>`
});
this.AppendElement(Ul);
this.CreatedTabsContent();
this.BindTabsTitleClick();
},
// 为tabs标题绑定事件
BindTabsTitleClick() {
var li = document.querySelectorAll(".tabs_title li")
var tabsContentLi = document.querySelectorAll(".tabs_content li")
li.forEach((v,i)=>{
v.onclick = function () {
li.forEach((k,s)=>{
k.className = ""
tabsContentLi[s].className = ""
});
v.className = "tabs_title_active"
tabsContentLi[i].className = "tabs_content_active"
}
})
},
// 创建tabs切换的内容
CreatedTabsContent() {
var Ul = document.createElement("ul")
Ul.className = "tabs_content";
this.option.data.forEach((v,i) => {
var li = document.createElement("li");
i == 0 ? li.className = "tabs_content_active" : '';
v.content.forEach((k)=>{
li.innerHTML += `<div>${k.text}</div>`
});
Ul.appendChild(li)
});
this.AppendElement(Ul)
},
/**
* 将html插入到用户指定的父节点中
* @param {*} html 需要被插入的html
*/
AppendElement(html) {
document.querySelector(this.option.el).appendChild(html)
}
}
// 将自执行函数内部的方法通过全局对象 window 暴露到外面，
//给用户能使用到
window.lBtab = Tabs
})()
//es5
//es6
// class
// class a {
// constructor() {
// this.init()
// }
// init() {}
// }
// new a()
// 语法糖