<!doctype html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>基于bootstrup的jQuery多级列表树插件|jQuery、html5、css3的插件库</title>
<link rel="stylesheet" type="text/css" href="css/default.css">
<link href="https://cdn.bootcss.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
<style type="text/css">
.htmleaf-header{margin-bottom: 15px;font-family: "Segoe UI", "Lucida Grande", Helvetica, Arial, "Microsoft YaHei", FreeSans, Arimo, "Droid Sans", "wenquanyi micro hei", "Hiragino Sans GB", "Hiragino Sans GB W3", "FontAwesome", sans-serif;}
.htmleaf-icon{color: #fff;}
</style>
</head>
<body>
<div class="htmleaf-container">
<header class="htmleaf-header bgcolor-12">
<h1>基于bootstrup的jQuery多级列表树插件 <span>Bootstrap Tree View</span></h1>
<div class="htmleaf-links">
<a class="htmleaf-icon icon-htmleaf-home-outline" href="http://www.angelasp.com/" title="jQuery插件" target="_blank"><span> jQuery插件</span></a>
</div>
</header>
<div class="container">
<h1>Bootstrap Tree View</h1>
<br>
<div class="row">
<div class="col-sm-4">
<h2>Default</h2>
<div id="treeview1" class=""></div>
</div>
<div class="col-sm-4">
<h2>Collapsed</h2>
<div id="treeview2" class=""></div>
</div>
<div class="col-sm-4">
<h2>Expanded</h2>
<div id="treeview3" class=""></div>
</div>
</div>
<div class="row">
<div class="col-sm-4">
<h2>Blue Theme</h2>
<div id="treeview4" class=""></div>
</div>
<div class="col-sm-4">
<h2>Custom Icons</h2>
<div id="treeview5" class=""></div>
</div>
<div class="col-sm-4">
<h2>Tags as Badges</h2>
<div id="treeview6" class=""></div>
</div>
</div>
<div class="row">
<div class="col-sm-4">
<h2>No Border</h2>
<div id="treeview7" class=""></div>
</div>
<div class="col-sm-4">
<h2>Colourful</h2>
<div id="treeview8" class=""></div>
</div>
<div class="col-sm-4">
<h2>Node Overrides</h2>
<div id="treeview9" class=""></div>
</div>
</div>
<div class="row">
<div class="col-sm-4">
<h2>Link enabled, or</h2>
<div id="treeview10" class=""></div>
</div>
<div class="col-sm-4">
</div>
<div class="col-sm-4">
</div>
</div>
<div class="row">
<hr>
<h2>Searchable Tree</h2>
<div class="col-sm-4">
<h2>Input</h2>
<!-- <form> -->
<div class="form-group">
<label for="input-search" class="sr-only">Search Tree:</label>
<input type="input" class="form-control" id="input-search" placeholder="Type to search..." value="">
</div>
<div class="checkbox">
<label>
<input type="checkbox" class="checkbox" id="chk-ignore-case" value="false">
Ignore Case
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" class="checkbox" id="chk-exact-match" value="false">
Exact Match
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" class="checkbox" id="chk-reveal-results" value="false">
Reveal Results
</label>
</div>
<button type="button" class="btn btn-success" id="btn-search">Search</button>
<button type="button" class="btn btn-default" id="btn-clear-search">Clear</button>
<!-- </form> -->
</div>
<div class="col-sm-4">
<h2>Tree</h2>
<div id="treeview-searchable" class=""></div>
</div>
<div class="col-sm-4">
<h2>Results</h2>
<div id="search-output"></div>
</div>
</div>
<div class="row">
<hr>
<h2>Selectable Tree</h2>
<div class="col-sm-4">
<h2>Input</h2>
<div class="form-group">
<label for="input-select-node" class="sr-only">Search Tree:</label>
<input type="input" class="form-control" id="input-select-node" placeholder="Identify node..." value="Parent 1">
</div>
<div class="checkbox">
<label>
<input type="checkbox" class="checkbox" id="chk-select-multi" value="false">
Multi Select
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" class="checkbox" id="chk-select-silent" value="false">
Silent (No events)
</label>
</div>
<div class="form-group">
<button type="button" class="btn btn-success select-node" id="btn-select-node">Select Node</button>
</div>
<div class="form-group">
<button type="button" class="btn btn-danger select-node" id="btn-unselect-node">Unselect Node</button>
</div>
<div class="form-group">
<button type="button" class="btn btn-primary select-node" id="btn-toggle-selected">Toggle Node</button>
</div>
</div>
<div class="col-sm-4">
<h2>Tree</h2>
<div id="treeview-selectable" class=""></div>
</div>
<div class="col-sm-4">
<h2>Events</h2>
<div id="selectable-output"></div>
</div>
</div>
<div class="row">
<hr>
<h2>Expandible Tree</h2>
<div class="col-sm-4">
<h2>Input</h2>
<div class="form-group">
<label for="input-expand-node" class="sr-only">Search Tree:</label>
<input type="input" class="form-control" id="input-expand-node" placeholder="Identify node..." value="Parent 1">
</div>
<div class="checkbox">
<label>
<input type="checkbox" class="checkbox" id="chk-expand-silent" value="false">
Silent (No events)
</label>
</div>
<div class="form-group row">
<div class="col-sm-6">
<button type="button" class="btn btn-success expand-node" id="btn-expand-node">Expand Node</button>
</div>
<div class="col-sm-6">
<select class="form-control" id="select-expand-node-levels">
<option>1</option>
<option>2</option>
</select>
</div>
</div>
<div class="form-group">
<button type="button" class="btn btn-danger expand-node" id="btn-collapse-node">Collapse Node</button>
</div>
<div class="form-group">
<button type="button" class="btn btn-primary expand-node" id="btn-toggle-expanded">Toggle Node</button>
</div>
<hr>
<div class="form-group row">
<div class="col-sm-6">
<button type="button" class="btn btn-success" id="btn-expand-all">Expand All</button>
</div>
<div class="col-sm-6">
<select class="form-control" id="select-expand-all-levels">
<option>1</option>
<option>2</option>
</select>
</div>
</div>
<button type="button" class="btn btn-danger" id="btn-collapse-all">Collapse All</button>
</div>
<div class="col-sm-4">