theluyuan/layui-js
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

1.0.9

Browse Source
This commit is contained in:
sentsin
2017-02-28 02:16:08 +08:00
parent e55f6f33d7
commit 1d31b8be24
50 changed files with 389 additions and 450 deletions
Download Patch File Download Diff File Expand all files Collapse all files

60
test/element.html
View File

@@ -14,6 +14,29 @@ body{padding:20px;}
<body>
<div class="layui-collapse" lay-filter="test" lay-accordion>
<div class="layui-colla-item">
<h2 class="layui-colla-title">杜甫</h2>
<div class="layui-colla-content layui-show">
<p>杜甫的思想核心是儒家的仁政思想，他有“致君尧舜上，再使风俗淳”的宏伟抱负。杜甫虽然在世时名声并不显赫，但后来声名远播，对中国文学和日本文学都产生了深远的影响。杜甫共有约1500首诗歌被保留了下来，大多集于《杜工部集》。</p>
</div>
</div>
<div class="layui-colla-item">
<h2 class="layui-colla-title">李清照</h2>
<div class="layui-colla-content">
<p>李清照出生于书香门第，早期生活优裕，其父李格非藏书甚富，她小时候就在良好的家庭环境中打下文学基础。出嫁后与夫赵明诚共同致力于书画金石的搜集整理。金兵入据中原时，流寓南方，境遇孤苦。所作词，前期多写其悠闲生活，后期多悲叹身世，情调感伤。形式上善用白描手法，自辟途径，语言清丽。</p>
</div>
</div>
<div class="layui-colla-item">
<h2 class="layui-colla-title">鲁迅</h2>
<div class="layui-colla-content">
<p>鲁迅一生在文学创作、文学批评、思想研究、文学史研究、翻译、美术理论引进、基础科学介绍和古籍校勘与研究等多个领域具有重大贡献。他对于五四运动以后的中国社会思想文化发展具有重大影响，蜚声世界文坛，尤其在韩国、日本思想文化领域有极其重要的地位和影响，被誉为“二十世纪东亚文化地图上占最大领土的作家”。</p>
</div>
</div>
</div>
<br><br>
<div class="layui-progress">
<div class="layui-progress-bar" lay-percent="10%"></div>
</div>
@@ -135,11 +158,11 @@ body{padding:20px;}
<div class="layui-tab" lay-filter="tabDemo" lay-allowClose="true">
<ul class="layui-tab-title">
<li class="layui-this">标题1</li>
<li>标题2</li>
<li>标题3</li>
<li>标题4</li>
<li>标题5</li>
<li class="layui-this" lay-id="1">标题1</li>
<li lay-id="2">标题2</li>
<li lay-id="3">标题3</li>
<li lay-id="4">标题4</li>
<li lay-id="5">标题5</li>
</ul>
<div class="layui-tab-content">
<div class="layui-tab-item layui-show">1</div>
@@ -150,9 +173,9 @@ body{padding:20px;}
</div>
</div>
<button class="layui-btn" onclick="layui.element().tabChange('tabDemo', 2)">手工切换到第三项</button>
<button class="layui-btn" onclick="layui.element().tabAdd('tabDemo', {title:'新标题', content:'新内容'})">添加Tab</button>
<button class="layui-btn" onclick="layui.element().tabDelete('tabDemo', 3)">删除第四项</button>
<button class="layui-btn" onclick="layui.element().tabChange('tabDemo', 3)">手工切换到“标题3”</button>
<button class="layui-btn" onclick="layui.element().tabAdd('tabDemo', {title:'新标题', content:'新内容', id: +new Date})">添加Tab</button>
<button class="layui-btn" onclick="layui.element().tabDelete('tabDemo', 4)">删除“标题4”</button>
<div class="layui-tab layui-tab-brief">
<ul class="layui-tab-title">
@@ -168,7 +191,7 @@ body{padding:20px;}
<div class="layui-inline">
<div class="layui-tab layui-tab-card">
<ul class="layui-tab-title">
<li class="layui-this">标题1</li>
<li class="layui-this">标题一</li>
<li>标题2</li>
<li>标题3</li>
<li>标题4</li>
@@ -176,7 +199,18 @@ body{padding:20px;}
<li>标题6</li>
</ul>
<div class="layui-tab-content">
<div class="layui-tab-item layui-show">1</div>
<div class="layui-tab-item layui-show">
<div class="layui-form">
<select>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
</select>
</div>
</div>
<div class="layui-tab-item">2</div>
<div class="layui-tab-item">3</div>
<div class="layui-tab-item">4</div>
@@ -204,7 +238,7 @@ body{padding:20px;}
<script src="../src/layui.js"></script>
<script>
layui.use('element', function(){
layui.use(['element', 'form'], function(){
var element = layui.element();
element.on('tab(test)', function(data){
@@ -214,6 +248,10 @@ layui.use('element', function(){
element.on('nav(test)', function(elem){
console.log(elem)
});
element.on('collapse(test)', function(data){
console.log(data);
});
});
</script>
</body>