quicktab
Version:
Multi IFrame tab plugin. operate IFrame like operating browser tabs
166 lines (148 loc) • 7.14 kB
HTML
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Title</title>
<link rel="stylesheet" href="dist/css/quicktab.css">
<style>
.container {
padding: 30px;
}
</style>
</head>
<body>
<div class="container">
<div class="quicktab reverse q-tab-1">
<!-- tab工具栏部分 -->
<ul class="tab-bar">
<li class="prev">
<button class="disabled">
<svg viewBox="0 0 16 16">
<path
d="M10 12.796V3.204L4.519 8 10 12.796zm-.659.753-5.48-4.796a1 1 0 0 1 0-1.506l5.48-4.796A1 1 0 0 1 11 3.204v9.592a1 1 0 0 1-1.659.753z" />
</svg>
</button>
</li>
<li class="refresh">
<button>
<svg viewBox="0 0 16 16">
<path fill-rule="evenodd"
d="M8 3a5 5 0 1 0 4.546 2.914.5.5 0 0 1 .908-.417A6 6 0 1 1 8 2v1z" />
<path
d="M8 4.466V.534a.25.25 0 0 1 .41-.192l2.36 1.966c.12.1.12.284 0 .384L8.41 4.658A.25.25 0 0 1 8 4.466z" />
</svg>
</button>
</li>
<li class="scroll">
<button><span>首页</span></button>
<button><span>文章管理</span></button>
<button class="active">
<span>库存管理库存管理库存管理</span>
<svg viewBox="0 0 16 16">
<path
d="M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z" />
</svg>
</button>
<button>
<span>商品管理商品管理商品管理</span>
<svg viewBox="0 0 16 16">
<path
d="M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z" />
</svg>
</button>
<button><span>tab1</span></button>
<button><span>tab2</span></button>
<button><span>tab3</span></button>
<button><span>tab4</span></button>
<button><span>tab5</span></button>
<button><span>tab6</span></button>
<button><span>tab7</span></button>
<button><span>tab8</span></button>
<button><span>tab9</span></button>
<button><span>tab10</span></button>
<button><span>tab11</span></button>
<button><span>tab12</span></button>
<button><span>tab13</span></button>
<button><span>tab14</span></button>
<button><span>tab15</span></button>
<button><span>tab16</span></button>
<button><span>tab17</span></button>
<button><span>tab18</span></button>
<button><span>tab19</span></button>
<button><span>tab20</span></button>
<button><span>tab21</span></button>
<button><span>tab22</span></button>
<button><span>tab23</span></button>
<button><span>tab24</span></button>
<button><span>tab25</span></button>
<button><span>tab26</span></button>
<button><span>tab27</span></button>
<button><span>tab28</span></button>
<button><span>tab29</span></button>
<button><span>tab30</span></button>
</li>
<li class="next ">
<button>
<svg viewBox="0 0 16 16">
<path
d="M6 12.796V3.204L11.481 8 6 12.796zm.659.753 5.48-4.796a1 1 0 0 0 0-1.506L6.66 2.451C6.011 1.885 5 2.345 5 3.204v9.592a1 1 0 0 0 1.659.753z" />
</svg>
</button>
</li>
<li class="dropdown">
<button>
<svg viewBox="0 0 16 16">
<path
d="M3.204 5h9.592L8 10.481 3.204 5zm-.753.659 4.796 5.48a1 1 0 0 0 1.506 0l4.796-5.48c.566-.647.106-1.659-.753-1.659H3.204a1 1 0 0 0-.753 1.659z" />
</svg>
</button>
</li>
<li class="fullscreen">
<button>
<svg viewBox="0 0 16 16">
<path
d="M1.5 1a.5.5 0 0 0-.5.5v4a.5.5 0 0 1-1 0v-4A1.5 1.5 0 0 1 1.5 0h4a.5.5 0 0 1 0 1h-4zM10 .5a.5.5 0 0 1 .5-.5h4A1.5 1.5 0 0 1 16 1.5v4a.5.5 0 0 1-1 0v-4a.5.5 0 0 0-.5-.5h-4a.5.5 0 0 1-.5-.5zM.5 10a.5.5 0 0 1 .5.5v4a.5.5 0 0 0 .5.5h4a.5.5 0 0 1 0 1h-4A1.5 1.5 0 0 1 0 14.5v-4a.5.5 0 0 1 .5-.5zm15 0a.5.5 0 0 1 .5.5v4a1.5 1.5 0 0 1-1.5 1.5h-4a.5.5 0 0 1 0-1h4a.5.5 0 0 0 .5-.5v-4a.5.5 0 0 1 .5-.5z" />
</svg>
</button>
</li>
</ul>
<!-- 面板容器部分 -->
<ul class="tab-body">
<li>
<div class="mask">
<div class="mask-inner">
<div class="quicktab-loaders">
<div></div>
<div></div>
<div></div>
</div>
</div>
</div>
<iframe src="page1.html"></iframe>
</li>
<li class="active">
<iframe src="page2.html"></iframe>
</li>
</ul>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/jquery@3.7.1/dist/jquery.min.js"></script>
<script>
$('.prev').on('click', function () {
const scroll = document.querySelector('.tab-bar li.scroll');
scroll.scrollTo({
left: scroll.scrollLeft - scroll.offsetWidth,
behavior: 'smooth'
})
})
$('.next').on('click', function () {
const scroll = document.querySelector('.tab-bar li.scroll');
scroll.scrollTo({
left: scroll.scrollLeft + scroll.offsetWidth,
behavior: 'smooth'
})
})
</script>
</body>
</html>