mirror of
https://gitee.com/ulthon/layui-ul.git
synced 2026-07-05 20:02:49 +08:00
新增移动端组件;移动端新增分组导航组件
This commit is contained in:
augushong
197
demo/pc/tree.html
Normal file
197
demo/pc/tree.html
Normal file
@@ -0,0 +1,197 @@
|
||||
<fieldset class="layui-elem-field layui-field-title">
|
||||
<legend>简约目录</legend>
|
||||
<div class="layui-field-box">
|
||||
<div>
|
||||
直接复制html样式,需要给每个单位置顶level,然后使用js去整理一下样式
|
||||
<br>
|
||||
需要自己写出目录收缩逻辑
|
||||
</div>
|
||||
<div class="ul-tree">
|
||||
<div class="ul-tree-item">
|
||||
<div class="ul-tree-item-info">
|
||||
<i class="ul-tree-item-icon layui-icon layui-icon-triangle-d"></i>
|
||||
<span class="ul-tree-item-title">读书笔记</span>
|
||||
</div>
|
||||
<div class="ul-tree-item-children">
|
||||
<div class="ul-tree-item">
|
||||
<div class="ul-tree-item-info current">
|
||||
<i class="ul-tree-item-icon layui-icon layui-icon-triangle-d"></i>
|
||||
<span class="ul-tree-item-title">小说</span>
|
||||
</div>
|
||||
<div class="ul-tree-item-children">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ul-tree-item">
|
||||
<div class="ul-tree-item-info">
|
||||
<i class="ul-tree-item-icon layui-icon layui-icon-triangle-d"></i>
|
||||
<span class="ul-tree-item-title">技术笔记</span>
|
||||
</div>
|
||||
<div class="ul-tree-item-children">
|
||||
<div class="ul-tree-item">
|
||||
<div class="ul-tree-item-info">
|
||||
<i class="ul-tree-item-icon layui-icon layui-icon-triangle-d"></i>
|
||||
<span class="ul-tree-item-title">Mysql</span>
|
||||
</div>
|
||||
<div class="ul-tree-item-children">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="ul-tree-item">
|
||||
<div class="ul-tree-item-info">
|
||||
<i class="ul-tree-item-icon layui-icon layui-icon-triangle-d"></i>
|
||||
<span class="ul-tree-item-title">PHP</span>
|
||||
</div>
|
||||
<div class="ul-tree-item-children">
|
||||
<div class="ul-tree-item disabled">
|
||||
<div class="ul-tree-item-info">
|
||||
<i class="ul-tree-item-icon layui-icon layui-icon-triangle-d"></i>
|
||||
<span class="ul-tree-item-title">扩展</span>
|
||||
</div>
|
||||
<div class="ul-tree-item-children">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="ul-tree-item">
|
||||
<div class="ul-tree-item-info">
|
||||
<i class="ul-tree-item-icon layui-icon layui-icon-triangle-d"></i>
|
||||
<span class="ul-tree-item-title">框架</span>
|
||||
</div>
|
||||
<div class="ul-tree-item-children">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<pre class="layui-code demo-js"></pre>
|
||||
<script class="demo-js-src">
|
||||
// 可以用以下代码整理元素
|
||||
$('.ul-tree-item').each(function () {
|
||||
var itemTree = this
|
||||
var parents = $(itemTree).parents('.ul-tree-item')
|
||||
var level = parents.length
|
||||
$(itemTree).find('.ul-tree-item-title').css('margin-left', (level + 1) * 15 + 5 + 'px')
|
||||
$(itemTree).find('.ul-tree-item-icon').css('left', (level + 1) * 15 - 15 + 'px')
|
||||
|
||||
if ($(itemTree).children('.ul-tree-item-children').children().length == 0) {
|
||||
$(itemTree).children('.ul-tree-item-info').find('.ul-tree-item-icon').remove()
|
||||
}
|
||||
|
||||
$(itemTree).children('.ul-tree-item-info').click(function (e) {
|
||||
if ($(e.target).hasClass('ul-tree-item-icon')) {
|
||||
var iconItem = e.target
|
||||
if ($(iconItem).hasClass('layui-icon-triangle-d')) {
|
||||
// 收缩
|
||||
$(iconItem).removeClass('layui-icon-triangle-d')
|
||||
$(iconItem).addClass('layui-icon-triangle-r')
|
||||
|
||||
$(itemTree).children('.ul-tree-item-children').hide()
|
||||
} else {
|
||||
// 展开
|
||||
$(iconItem).addClass('layui-icon-triangle-d')
|
||||
$(iconItem).removeClass('layui-icon-triangle-r')
|
||||
|
||||
$(itemTree).children('.ul-tree-item-children').show()
|
||||
}
|
||||
console.log('点击收缩目录');
|
||||
// 一般不用写这个逻辑
|
||||
} else {
|
||||
console.log('点击目录项');
|
||||
// 在这里写点击逻辑
|
||||
}
|
||||
})
|
||||
|
||||
})
|
||||
|
||||
|
||||
</script>
|
||||
</div>
|
||||
</div>
|
||||
</fieldset>
|
||||
<fieldset class="layui-elem-field layui-field-title">
|
||||
<legend>基本组件</legend>
|
||||
<div class="layui-field-box">
|
||||
<div>
|
||||
最基本的组件,ul-tree-item-icon的按钮会在执行js后进行相应的移除,缩进样式也许需要执行js
|
||||
</div>
|
||||
<div class="ul-section">
|
||||
<div class="ul-tree">
|
||||
<div class="ul-tree-item">
|
||||
<div class="ul-tree-item-info">
|
||||
<i class="ul-tree-item-icon layui-icon layui-icon-triangle-d"></i>
|
||||
<span class="ul-tree-item-title">读书笔记</span>
|
||||
</div>
|
||||
<div class="ul-tree-item-children">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="ul-section">
|
||||
<div class="ul-tree">
|
||||
<div class="ul-tree-item">
|
||||
<div class="ul-tree-item-info">
|
||||
<i class="ul-tree-item-icon layui-icon layui-icon-triangle-d"></i>
|
||||
<span class="ul-tree-item-title">读书笔记</span>
|
||||
</div>
|
||||
<div class="ul-tree-item-children">
|
||||
<div class="ul-tree-item">
|
||||
<div class="ul-tree-item-info">
|
||||
<i class="ul-tree-item-icon layui-icon layui-icon-triangle-d"></i>
|
||||
<span class="ul-tree-item-title">小说</span>
|
||||
</div>
|
||||
<div class="ul-tree-item-children">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<pre class="layui-code demo-js"></pre>
|
||||
<div class="demo-js-src">
|
||||
<!-- 基本组件 -->
|
||||
<div class="ul-tree">
|
||||
<div class="ul-tree-item">
|
||||
<div class="ul-tree-item-info">
|
||||
<i class="ul-tree-item-icon layui-icon layui-icon-triangle-d"></i>
|
||||
<span class="ul-tree-item-title">读书笔记</span>
|
||||
</div>
|
||||
<div class="ul-tree-item-children">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<!-- 子目录只需要将ul-tree-item嵌套在ul-tree-item-children即可 -->
|
||||
<div class="ul-tree">
|
||||
<div class="ul-tree-item">
|
||||
<div class="ul-tree-item-info">
|
||||
<i class="ul-tree-item-icon layui-icon layui-icon-triangle-d"></i>
|
||||
<span class="ul-tree-item-title">读书笔记</span>
|
||||
</div>
|
||||
<div class="ul-tree-item-children">
|
||||
<div class="ul-tree-item">
|
||||
<div class="ul-tree-item-info">
|
||||
<i class="ul-tree-item-icon layui-icon layui-icon-triangle-d"></i>
|
||||
<span class="ul-tree-item-title">小说</span>
|
||||
</div>
|
||||
<div class="ul-tree-item-children">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</fieldset>
|
||||
Reference in New Issue
Block a user