-
Notifications
You must be signed in to change notification settings - Fork 3
/
demo.html
132 lines (119 loc) · 4.86 KB
/
demo.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="jQuery plugin for tree selection controls">
<meta name="author" content="Alex Meub">
<title>Simple Tree Picker</title>
<link rel='stylesheet' href='jquery.simple-tree-picker.css'>
<link rel='stylesheet' href='http://fonts.googleapis.com/css?family=Lato:400,700' type='text/css'>
<style type="text/css">
/* Demo Styles */
html {
margin: 0;
padding: 0;
width: 100%;
min-height: 100%;
position: relative;
}
body {
margin: 0;
padding: 0;
min-height: 100%;
background-color: #eee;
position: relative;
font-family: 'Lato', sans-serif;
}
footer {
text-align: center;
margin-top: 50px;
}
h1 {
text-align: center;
margin-top: 0;
}
h3 { margin: 20px 0 5px 0 }
a,
a:visited,
a:hover {
color: inherit;
text-decoration: underline;
}
.container {
text-align: left;
margin: 0 auto;
max-width: 700px;
color: #2d3a3f;
padding-top: 30px;
}
.box {
display: block;
background: #fff;
padding: 40px;
border-radius: 3px;
margin: 10px 5px;
box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.4);
}
.subtitle { text-align: center }
.tree {
overflow-y: scroll;
height: 265px;
font-family: Arial, Helvetica, sans-serif;
margin-bottom: 40px;
}
#selected {
display: table-row;
font-weight: bold;
}
p { margin-bottom: 10px }
p.sel { margin-bottom: 30px }
</style>
</head>
<body>
<!-- Obligatory github ribbon -->
<a href="https://github.com/meub"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://camo.githubusercontent.com/38ef81f8aca64bb9a64448d0d70f1308ef5341ab/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f6461726b626c75655f3132313632312e706e67" alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png"></a>
<div class="container">
<div class="box">
<h1>Simple Tree Picker</h1>
<p class="subtitle" >A lightweight jQuery plugin for creating tree selection controls</p>
<h3>Features</h3>
<ul >
<li>No images or dependencies other than jQuery</li>
<li>Clickable arrows for showing/hiding subtrees</li>
<li>Use of indeterminate state for semi-selected subtrees</li>
<li>Smart hierarchy logic</li>
</ul>
<h3>Demo</h3>
<div class="tree"></div>
<p class="sel">Selected areas: <span id="selected">Nothing selected</span> </p>
<h3>More information</h3>
<p>Check out the <a href="https://github.com/meub/simpleTreePicker">GitHub repository</a> for more information.</p>
</div>
</div>
<footer>
<p>Made by <a href="http://alexmeub.com/">Alex Meub</a></p>
</footer>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="jquery.simple-tree-picker.js"></script>
<script>
// Create tree object
var demoTreeData = JSON.parse('{"Number":"KI-125-25","Name":"All","Children":[{"Number":"WA-775-99","Name":"Main House","Children":[{"Number":"JI-105-09","Name":"Downstairs","Children":[]},{"Number":"TR-883-66","Name":"Upstairs","Children":[{"Number":"SS-002-99","Name":"Bedrooms","Children":[{"Number":"JI-656-09","Name":"Master Bedroom","Children":[]},{"Number":"ZZ-654-66","Name":"Guest Bedroom","Children":[]}]},{"Number":"SS-001-99","Name":"Other Rooms","Children":[{"Number":"JI-898-09","Name":"Great Room","Children":[]},{"Number":"ZZ-493-66","Name":"Bonus Room","Children":[]}]}]}]},{"Number":"QQ-542-10","Name":"Garage","Children":[]}]}');
// Initialize Simple Tree Picker
// Pass it an onclick function to update the view
// Pass it an initial selected state
$('.tree').simpleTreePicker( {
"tree": demoTreeData,
"onclick": function(){
var selected = $(".tree").simpleTreePicker("display");
$("#selected").html( !!selected.length ? selected.toString().replace(/,/g,', ') : "Nothing Selected" );
},
"selected" : [ "ZZ-654-66","SS-001-99" ],
"name" : "room-selection-tree"
});
// Update view with initial state (onclick isn't called for initial selection)
$("#selected").html( $(".tree").simpleTreePicker("display").toString().replace(/,/g,', ') );
</script>
</body>
</html>