最代码官方
2015-07-29 14:54:45
证
bootstrap风格开发的tree插件
项目截图
<html>
<head>
<link id="bootstrap_221" rel="stylesheet" type="text/css" class="library" href="http://static.zuidaima.com/resource/css/bootstrap.min.css?v=20140118">
<script id="jquery_172" type="text/javascript" class="library" src="http://static.zuidaima.com/resource/js/jquery.min.js"></script>
<script id="bootstrap_221" type="text/javascript" class="library" src="http://static.zuidaima.com/resource/js/bootstrap.min.js"></script>
<style>
.tree {
min-height:20px;
padding:19px;
margin-bottom:20px;
background-color:#fbfbfb;
border:1px solid #999;
-webkit-border-radius:4px;
-moz-border-radius:4px;
border-radius:4px;
-webkit-box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.05);
-moz-box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.05);
box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.05)
}
.tree li {
list-style-type:none;
margin:0;
padding:10px 5px 0 5px;
position:relative
}
.tree li::before, .tree li::after {
content:'';
left:-20px;
position:absolute;
right:auto
}
.tree li::before {
border-left:1px solid #999;
bottom:50px;
height:100%;
top:0;
width:1px
}
.tree li::after {
border-top:1px solid #999;
height:20px;
top:25px;
width:25px
}
.tree li span {
-moz-border-radius:5px;
-webkit-border-radius:5px;
border:1px solid #999;
border-radius:5px;
display:inline-block;
padding:3px 8px;
text-decoration:none
}
.tree li.parent_li>span {
cursor:pointer
}
.tree>ul>li::before, .tree>ul>li::after {
border:0
}
.tree li:last-child::before {
height:30px
}
.tree li.parent_li>span:hover, .tree li.parent_li>span:hover+ul li span {
background:#eee;
border:1px solid #94a0b4;
color:#000
}
</style>
</head>
<body>
<div class="tree well">
<ul>
<li>
<span><i class="icon-folder-open"></i> Parent</span> <a href="">Goes somewhere</a>
<ul>
<li>
<span><i class="icon-minus-sign"></i> Child</span> <a href="">Goes somewhere</a>
<ul>
<li>
<span><i class="icon-leaf"></i> Grand Child</span> <a href="">Goes somewhere</a>
</li>
</ul>
</li>
<li>
<span><i class="icon-minus-sign"></i> Child</span> <a href="">Goes somewhere</a>
<ul>
<li>
<span><i class="icon-leaf"></i> Grand Child</span> <a href="">Goes somewhere</a>
</li>
<li>
<span><i class="icon-minus-sign"></i> Grand Child</span> <a href="">Goes somewhere</a>
<ul>
<li>
<span><i class="icon-minus-sign"></i> Great Grand Child</span> <a href="">Goes somewhere</a>
<ul>
<li>
<span><i class="icon-leaf"></i> Great great Grand Child</span> <a href="">Goes somewhere</a>
</li>
<li>
<span><i class="icon-leaf"></i> Great great Grand Child</span> <a href="">Goes somewhere</a>
</li>
</ul>
</li>
<li>
<span><i class="icon-leaf"></i> Great Grand Child</span> <a href="">Goes somewhere</a>
</li>
<li>
<span><i class="icon-leaf"></i> Great Grand Child</span> <a href="">Goes somewhere</a>
</li>
</ul>
</li>
<li>
<span><i class="icon-leaf"></i> Grand Child</span> <a href="">Goes somewhere</a>
</li>
</ul>
</li>
</ul>
</li>
<li>
<span><i class="icon-folder-open"></i> Parent2</span> <a href="">Goes somewhere</a>
<ul>
<li>
<span><i class="icon-leaf"></i> Child</span> <a href="">Goes somewhere</a>
</li>
</ul>
</li>
</ul>
</div>
<div class="tree">
<ul>
<li>
<span><i class="icon-calendar"></i> 2013, Week 2</span>
<ul>
<li>
<span class="badge badge-success"><i class="icon-minus-sign"></i> Monday, January 7: 8.00 hours</span>
<ul>
<li>
<a href=""><span><i class="icon-time"></i> 8.00</span> – Changed CSS to accomodate...</a>
</li>
</ul>
</li>
<li>
<span class="badge badge-success"><i class="icon-minus-sign"></i> Tuesday, January 8: 8.00 hours</span>
<ul>
<li>
<span><i class="icon-time"></i> 6.00</span> – <a href="">Altered code...</a>
</li>
<li>
<span><i class="icon-time"></i> 2.00</span> – <a href="">Simplified our approach to...</a>
</li>
</ul>
</li>
<li>
<span class="badge badge-warning"><i class="icon-minus-sign"></i> Wednesday, January 9: 6.00 hours</span>
<ul>
<li>
<a href=""><span><i class="icon-time"></i> 3.00</span> – Fixed bug caused by...</a>
</li>
<li>
<a href=""><span><i class="icon-time"></i> 3.00</span> – Comitting latest code to Git...</a>
</li>
</ul>
</li>
<li>
<span class="badge badge-important"><i class="icon-minus-sign"></i> Wednesday, January 9: 4.00 hours</span>
<ul>
<li>
<a href=""><span><i class="icon-time"></i> 2.00</span> – Create component that...</a>
</li>
</ul>
</li>
</ul>
</li>
<li>
<span><i class="icon-calendar"></i> 2013, Week 3</span>
<ul>
<li>
<span class="badge badge-success"><i class="icon-minus-sign"></i> Monday, January 14: 8.00 hours</span>
<ul>
<li>
<span><i class="icon-time"></i> 7.75</span> – <a href="">Writing documentation...</a>
</li>
<li>
<span><i class="icon-time"></i> 0.25</span> – <a href="">Reverting code back to...</a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</body>
<script>
$(function () {
$('.tree li:has(ul)').addClass('parent_li').find(' > span').attr('title', 'Collapse this branch');
$('.tree li.parent_li > span').on('click', function (e) {
var children = $(this).parent('li.parent_li').find(' > ul > li');
if (children.is(":visible")) {
children.hide('fast');
$(this).attr('title', 'Expand this branch').find(' > i').addClass('icon-plus-sign').removeClass('icon-minus-sign');
} else {
children.show('fast');
$(this).attr('title', 'Collapse this branch').find(' > i').addClass('icon-minus-sign').removeClass('icon-plus-sign');
}
e.stopPropagation();
});
});
</script>
</html>
猜你喜欢
- bootstrap风格的ztree实例源代码下载
- 不错的基于bootstrap的JS评分插件
- jquery+bootstrap多功能自定义选项卡插件
- html5中bootstrap表单样式文件html，兼容多种UA终端
- 从第一眼你就会爱上的bootstrap UI资源(下载)。
- 一款完整的bootstrap前端网站模板bcore admin，包括登录，注册，登陆，主页面等N个页面和插件
- 一款很亮丽bootstrap3.3.4开发前端网站模板
- 一个基于bootstrap的菜单
- bootstrap多个文本输入样式
- Bootstrap+Html5实现的多个漂亮注册页面模板
- Bootstrap后台管理系统的登录模板
- Bootstrap后台管理系统模板Core Admin
相关代码
- 证 不错的基于bootstrap的JS评分插件
- 原证 html5中bootstrap表单样式文件html，兼容多种UA终端
- 从第一眼你就会爱上的bootstrap UI资源(下载)。
- 证 一款完整的bootstrap前端网站模板bcore admin，包括登录，注册，登陆，主页面等N个页面和插件
- 证 一款很亮丽bootstrap3.3.4开发前端网站模板
- 证 一个基于bootstrap的菜单
- bootstrap多个文本输入样式
- Bootstrap+Html5实现的多个漂亮注册页面模板
- 证 Bootstrap后台管理系统的登录模板
- Bootstrap后台管理系统模板Core Admin
- 证精 基于Bootstrap3的网站UI源码funky-tunes及使用说明
- 原证精 bootstrap+dhtmlxSchedule实现的预约模块前端源代码
最近下载
最近浏览
9323249323 LV13
7月25日
lightg LV3
6月28日
东北虎啸 LV3
4月23日
qhdjod LV7
4月10日
406503223 LV5
3月10日
anbangchen89 LV2
2月2日
longtaolee LV8
2022年11月28日
zhanghaiboeee LV3
2022年11月27日
1938077010
2022年7月10日
暂无贡献等级
sufengdsadadas LV1
2022年6月7日
