优化标签
This commit is contained in:
1152958806@qq.com
parent
6cfff6053b
commit
154d92c5de
|
|
@ -300,60 +300,60 @@ document.addEventListener("DOMContentLoaded", () => {
|
||||||
|
|
||||||
|
|
||||||
// 分栏 tab
|
// 分栏 tab
|
||||||
customElements.define(
|
// customElements.define(
|
||||||
"hao-tabs",
|
// "hao-tabs",
|
||||||
class HaoTabs extends HTMLElement {
|
// class HaoTabs extends HTMLElement {
|
||||||
constructor() {
|
// constructor() {
|
||||||
super();
|
// super();
|
||||||
this.options = {
|
// this.options = {
|
||||||
id: this.getAttribute("id") || '',
|
// id: this.getAttribute("id") || '',
|
||||||
index: this.getAttribute("index") || ''
|
// index: this.getAttribute("index") || ''
|
||||||
};
|
// };
|
||||||
const id = this.options.id
|
// const id = this.options.id
|
||||||
const index = this.options.index
|
// const index = this.options.index
|
||||||
const _temp = getChildren(this, "_tpl");
|
// const _temp = getChildren(this, "_tpl");
|
||||||
|
//
|
||||||
let _innerHTML = _temp.innerHTML.trim().replace(/^(<br>)|(<br>)$/g, "");
|
// let _innerHTML = _temp.innerHTML.trim().replace(/^(<br>)|(<br>)$/g, "");
|
||||||
let navs = "";
|
// let navs = "";
|
||||||
let contents = "";
|
// let contents = "";
|
||||||
let newIndex = 0;
|
// let newIndex = 0;
|
||||||
|
//
|
||||||
_innerHTML.replace(
|
// _innerHTML.replace(
|
||||||
/{tabs-item([^}]*)}([\s\S]*?){\/tabs-item}/g,
|
// /{tabs-item([^}]*)}([\s\S]*?){\/tabs-item}/g,
|
||||||
function ($0, $1, $2) {
|
// function ($0, $1, $2) {
|
||||||
newIndex +=1;
|
// newIndex +=1;
|
||||||
let active =''
|
// let active =''
|
||||||
if(index!='' && index!=null){
|
// if(index!='' && index!=null){
|
||||||
if(newIndex == index){
|
// if(newIndex == index){
|
||||||
active = 'active';
|
// active = 'active';
|
||||||
}
|
// }
|
||||||
}else{
|
// }else{
|
||||||
if(newIndex==1){
|
// if(newIndex==1){
|
||||||
active = 'active'
|
// active = 'active'
|
||||||
}
|
// }
|
||||||
}
|
// }
|
||||||
navs += `
|
// navs += `
|
||||||
<li class="tab ${active}"><button type="button" data-href="#${id}-${newIndex}">${$1}</button></li>
|
// <li class="tab ${active}"><button type="button" data-href="#${id}-${newIndex}">${$1}</button></li>
|
||||||
`;
|
// `;
|
||||||
contents += `
|
// contents += `
|
||||||
<div class="tab-item-content ${active}" id="${id}-${newIndex}">
|
// <div class="tab-item-content ${active}" id="${id}-${newIndex}">
|
||||||
${$2.trim().replace(/^(<br>)|(<br>)$/g, "")}
|
// ${$2.trim().replace(/^(<br>)|(<br>)$/g, "")}
|
||||||
<button type="button" class="tab-to-top" aria-label="scroll to top"><i class="haofont hao-icon-arrow-up"></i></button>
|
// <button type="button" class="tab-to-top" aria-label="scroll to top"><i class="haofont hao-icon-arrow-up"></i></button>
|
||||||
</div>
|
// </div>
|
||||||
`;
|
// `;
|
||||||
}
|
// }
|
||||||
);
|
// );
|
||||||
let htmlStr = `
|
// let htmlStr = `
|
||||||
<div class="tabs" id="${this.options.id}">
|
// <div class="tabs" id="${this.options.id}">
|
||||||
<ul class="nav-tabs">${navs}</ul>
|
// <ul class="nav-tabs">${navs}</ul>
|
||||||
<div class="tab-contents">${contents}</div>
|
// <div class="tab-contents">${contents}</div>
|
||||||
</div>
|
// </div>
|
||||||
|
//
|
||||||
`;
|
// `;
|
||||||
this.innerHTML = htmlStr;
|
// this.innerHTML = htmlStr;
|
||||||
}
|
// }
|
||||||
}
|
// }
|
||||||
);
|
// );
|
||||||
|
|
||||||
// gallerygroup 相册图库
|
// gallerygroup 相册图库
|
||||||
customElements.define(
|
customElements.define(
|
||||||
|
|
@ -591,47 +591,4 @@ document.addEventListener("DOMContentLoaded", () => {
|
||||||
}
|
}
|
||||||
);
|
);
|
||||||
|
|
||||||
customElements.define(
|
|
||||||
"hao-bilibili",
|
|
||||||
class HaoBilibili extends HTMLElement {
|
|
||||||
constructor() {
|
|
||||||
super();
|
|
||||||
this.options = {
|
|
||||||
bvid: this.getAttribute("bvid"),
|
|
||||||
page: +(this.getAttribute("page") || "1"),
|
|
||||||
width: this.getAttribute("width") || "100%",
|
|
||||||
height: this.getAttribute("height") || "500px",
|
|
||||||
};
|
|
||||||
this.render();
|
|
||||||
}
|
|
||||||
render() {
|
|
||||||
if (this.options.bvid)
|
|
||||||
this.innerHTML = `<iframe allowfullscreen="true" class="hao_vplayer" src="//player.bilibili.com/player.html?bvid=${this.options.bvid}&page=${this.options.page}" style="width:${this.options.width};height:${this.options.height}"></iframe>`;
|
|
||||||
else this.innerHTML = "bvid未填写！";
|
|
||||||
}
|
|
||||||
}
|
|
||||||
);
|
|
||||||
|
|
||||||
// customElements.define(
|
|
||||||
// "hao-pdf",
|
|
||||||
// class HaoPdf extends HTMLElement {
|
|
||||||
// constructor() {
|
|
||||||
// super();
|
|
||||||
// this.options = {
|
|
||||||
// src: this.getAttribute("src") || "",
|
|
||||||
// width: this.getAttribute("width") || "100%",
|
|
||||||
// height: this.getAttribute("height") || "500px",
|
|
||||||
// };
|
|
||||||
// this.render();
|
|
||||||
// }
|
|
||||||
// render() {
|
|
||||||
// if (!this.options.src) return (this.innerHTML = "pdf地址未填写！");
|
|
||||||
// this.innerHTML = `
|
|
||||||
// <div >
|
|
||||||
// <iframe src="/themes/theme-hao/assets/libs/pdfjs/web/viewer.html?file=${this.options.src}" style="width:${this.options.width};height:${this.options.height}"></iframe>
|
|
||||||
// </div>`;
|
|
||||||
// }
|
|
||||||
// }
|
|
||||||
// );
|
|
||||||
|
|
||||||
});
|
});
|
||||||
|
|
|
||||||
|
|
@ -12,7 +12,6 @@
|
||||||
|
|
||||||
<head>
|
<head>
|
||||||
<th:block th:replace="~{modules/head :: head(htmlType = ${htmlType})}"/>
|
<th:block th:replace="~{modules/head :: head(htmlType = ${htmlType})}"/>
|
||||||
<script th:src="${assets_link + '/js/custom.js'}"></script>
|
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue