xl-infinite-tree
Version:
A browser-ready tree library that can efficiently display a large amount of data using infinite scrolling.
252 lines (251 loc) • 11.2 kB
HTML
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>infinite-tree</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="bs-docs.css">
<link rel="stylesheet" href="common.css">
<style>
#sidebar {
position: fixed;
top: 60px;
bottom: 0;
left: 0;
}
#main {
position: absolute;
top: 0;
bottom: 0;
right: 0;
width: 80%;
}
#main .loading {
margin-top: 20px;
background: url("loading.gif") no-repeat 0 0;
width: 60px;
height: 60px;
}
#main section {
display: none;
}
#main section.active {
display: block;
}
</style>
<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/es5-shim/4.5.7/es5-shim.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/es5-shim/4.5.7/es5-sham.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/json3/3.3.2/json3.min.js"></script>
<![endif]-->
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="https://infinite-tree.js.org">Infinite Tree</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li><a href="index.html">Home</a></li>
<li><a href="https://github.com/cheton/infinite-tree/wiki">Documentation</a></li>
<li class="active"><a href="examples.html">Examples</a></li>
</ul>
</div>
</div>
</nav>
<div class="container-fluid top-space">
<div class="row">
<div class="col-md-2 bs-docs-sidebar-holder" id="sidebar">
<nav class="bs-docs-sidebar">
<ul class="nav bs-docs-sidenav">
<li><a href="#/default" data-section-id="default">Default</a></li>
<li><a href="#/classic" data-section-id="classic">Classic</a></li>
<li><a href="#/filebrowser" data-section-id="filebrowser">File Browser</a></li>
</ul>
</nav>
</div>
<div class="col-md-10" id="main">
<div class="loading"></div>
<!-- Default -->
<section class="bs-docs-section" id="default">
<h2 class="page-header">Default</h2>
<div class="container-fluid">
<h4>Drag and Drop</h4>
<div class="row" style="margin-bottom: 20px">
<div class="col-xs-6">
<button
type="button"
class="btn btn-default"
draggable="true"
data-id="draggable-element"
style="margin-right: 10px; vertical-align: top"
>
Drag me!
</button>
<span class="dropped-result" data-id="dropped-result"></span>
</div>
</div>
<h4>Filter</h4>
<div class="row">
<div class="col-xs-6">
<input
type="text"
class="form-control"
name="text-filter"
placeholder="Type to filter by text"
/>
</div>
</div>
<div class="row">
<div class="col-xs-3">
<div class="checkbox" style="margin: 5px 0">
<label><input type="checkbox" name="case-sensitive" value=""> Case-sensitive</label>
</div>
</div>
<div class="col-xs-3">
<div class="checkbox" style="margin: 5px 0">
<label><input type="checkbox" name="exact-match" value=""> Exact match</label>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-3">
<div class="checkbox" style="margin: 5px 0">
<label><input type="checkbox" name="include-ancestors" value="" checked> Include ancestors</label>
</div>
</div>
<div class="col-xs-3">
<div class="checkbox" style="margin: 5px 0">
<label><input type="checkbox" name="include-descendants" value="" checked> Include descendants</label>
</div>
</div>
</div>
<div class="row" style="margin-top: 10px; margin-bottom: 5px">
<div class="col-xs-6">
<div class="tree" data-id="tree"></div>
</div>
<div class="col-xs-6">
<div class="preview" data-id="preview"></div>
</div>
</div>
<div class="row">
<div class="col-xs-6">
<div class="progress">
<div class="progress-bar" role="progressbar" data-id="scrolling-progress" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
</div>
</div>
</section>
<!-- Classic -->
<section class="bs-docs-section" id="classic">
<h2 class="page-header">Classic</h2>
<div class="container-fluid">
<h4>Drag and Drop</h4>
<div class="row" style="margin-bottom: 20px">
<div class="col-xs-6">
<button
type="button"
class="btn btn-default"
draggable="true"
data-id="draggable-element"
style="margin-right: 10px; vertical-align: top"
>
Drag me!
</button>
<span class="dropped-result" data-id="dropped-result"></span>
</div>
</div>
<h4>Filter</h4>
<div class="row">
<div class="col-xs-6">
<input
type="text"
class="form-control"
name="text-filter"
placeholder="Type to filter by text"
/>
</div>
</div>
<div class="row">
<div class="col-xs-3">
<div class="checkbox" style="margin: 5px 0">
<label><input type="checkbox" name="case-sensitive" value=""> Case-sensitive</label>
</div>
</div>
<div class="col-xs-3">
<div class="checkbox" style="margin: 5px 0">
<label><input type="checkbox" name="exact-match" value=""> Exact match</label>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-3">
<div class="checkbox" style="margin: 5px 0">
<label><input type="checkbox" name="include-ancestors" value="" checked> Include ancestors</label>
</div>
</div>
<div class="col-xs-3">
<div class="checkbox" style="margin: 5px 0">
<label><input type="checkbox" name="include-descendants" value="" checked> Include descendants</label>
</div>
</div>
</div>
<div class="row" style="margin-top: 10px; margin-bottom: 5px">
<div class="col-xs-6">
<div class="tree" data-id="tree"></div>
</div>
<div class="col-xs-6">
<div class="preview" data-id="preview"></div>
</div>
</div>
<div class="row">
<div class="col-xs-6">
<div class="progress">
<div class="progress-bar" role="progressbar" data-id="scrolling-progress" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
</div>
</div>
</section>
<!-- File Browser -->
<section class="bs-docs-section" id="filebrowser">
<h2 class="page-header">File Browser</h2>
<div class="container-fluid">
<div class="row">
<div class="col-xs-12">
<table class="filebrowser-header" width="100%">
<thead>
<tr>
<th>Name</th>
<th>Size</th>
<th>Type</th>
<th>Modified Date</th>
</tr>
</thead>
</table>
<div class="tree" data-id="tree"></div>
</div>
</div>
</div>
</section>
</div>
</div>
</div>
<script src="common.js"></script>
<script src="navbar.js"></script>
<script src="examples.js"></script>
</body>
</html>