88 lines
3.0 KiB
HTML
88 lines
3.0 KiB
HTML
<!DOCTYPE html>
|
||
<html>
|
||
|
||
<head>
|
||
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1">
|
||
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
|
||
<link href="/jscss/style.css" rel="stylesheet" type="text/css" />
|
||
<script type="text/javascript" charset="utf-8" src="/jscss/theme.js"></script>
|
||
<style>
|
||
</style>
|
||
</head>
|
||
|
||
<body>
|
||
<blockquote>tabcard类</blockquote>
|
||
<p>tabcard类用于创建带有选项卡的卡片，可以切换不同内容，并提供右侧按钮。</p>
|
||
<p>使用方法：</p>
|
||
<p>支持2个样式类，分别是simple、form</p>
|
||
<p>支持full类，将空间高度占满</p>
|
||
<p>支持right元素，用于放置右侧按钮</p>
|
||
<p>tabcontent与li数量相等，自动切换对应tabcontent</p>
|
||
<p>无tabcontent则用户自行实现</p>
|
||
<p>JS调用ciyclass.tabcard()方法初始化</p>
|
||
data-display: 元素属性，显示模式。可选值block、inline-block、flex、inline-flex、grid、inline-grid<br/>
|
||
dom: 指定tabcard dom<br/>
|
||
onchange: 选项卡变更回调函数<br/>
|
||
|
||
<div class="ciy-tabcard simple" style="margin: 1em;border-radius: 0.5em;box-shadow: 3px 3px 8px #00000033;">
|
||
<ul>
|
||
<li data-liid="0" class="lang">全部</li>
|
||
<li data-liid="1" class="lang">选项1</li>
|
||
<li data-liid="2" class="lang">选项2</li>
|
||
<right>右侧按钮<button class="btn sm">按钮</button></right>
|
||
</ul>
|
||
<div>
|
||
<div class="tabcontent">
|
||
tab1
|
||
</div>
|
||
<div class="tabcontent">
|
||
tab2
|
||
</div>
|
||
<div class="tabcontent">
|
||
tab3
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<br/><br/><br/><br/><br/>
|
||
<div class="ciy-tabcard form" style="margin: 1em;">
|
||
<ul>
|
||
<li data-liid="0" class="lang">全部</li>
|
||
<li data-liid="1" class="lang">选项1</li>
|
||
<li data-liid="2" class="lang">选项2</li>
|
||
<right>右侧按钮<button class="btn sm">按钮</button></right>
|
||
</ul>
|
||
<div>
|
||
<div class="tabcontent">
|
||
tab1
|
||
</div>
|
||
<div class="tabcontent">
|
||
tab2
|
||
</div>
|
||
<div class="tabcontent">
|
||
tab3
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<script type="text/javascript" src="/jscss/ciy.js"></script>
|
||
<script type="text/javascript" src="/jscss/ciycmp.js"></script>
|
||
|
||
<script type="text/javascript">
|
||
'use strict';
|
||
var tab = new ciyclass.tabcard({
|
||
dom: '.ciy-tabcard.simple',
|
||
onchange: function (e) {
|
||
console.log(e);
|
||
}
|
||
});
|
||
var tab = new ciyclass.tabcard({
|
||
dom: '.ciy-tabcard.form',
|
||
onchange: function (e) {
|
||
console.log(e);
|
||
}
|
||
});
|
||
</script>
|
||
</body>
|
||
|
||
</html> |