Skip to content

Commit 4c65215

Browse files
committedDec 30, 2013
Initial commit
1 parent 0aa161b commit 4c65215

26 files changed

+13263
-1
lines changed
 

‎.bowerrc

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{
2+
"directory": "public/bower_components"
3+
}

‎.gitattributes

+22
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
# Auto detect text files and perform LF normalization
2+
* text=auto
3+
4+
# Custom for Visual Studio
5+
*.cs diff=csharp
6+
*.sln merge=union
7+
*.csproj merge=union
8+
*.vbproj merge=union
9+
*.fsproj merge=union
10+
*.dbproj merge=union
11+
12+
# Standard to msysgit
13+
*.doc diff=astextplain
14+
*.DOC diff=astextplain
15+
*.docx diff=astextplain
16+
*.DOCX diff=astextplain
17+
*.dot diff=astextplain
18+
*.DOT diff=astextplain
19+
*.pdf diff=astextplain
20+
*.PDF diff=astextplain
21+
*.rtf diff=astextplain
22+
*.RTF diff=astextplain

‎.gitignore

+2
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
node_modules/
2+
public/bower_components/

‎.jshintrc

+14
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
{
2+
// Details: https://github.com/victorporof/Sublime-JSHint#using-your-own-jshintrc-options
3+
// Example: https://github.com/jshint/jshint/blob/master/examples/.jshintrc
4+
// Documentation: http://www.jshint.com/docs/
5+
"browser": true,
6+
"esnext": true,
7+
"globals": { $: false, jQuery: false, "console": false},
8+
"globalstrict": true,
9+
"quotmark": "single",
10+
"smarttabs": true,
11+
"trailing": true,
12+
"undef": true,
13+
"unused": true
14+
}

‎Gruntfile.js

+60
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
module.exports = function(grunt) {
2+
grunt.initConfig({
3+
pkg: grunt.file.readJSON('package.json'), // the package file to use
4+
5+
uglify: {
6+
files: {
7+
expand: true,
8+
flatten: true,
9+
src: 'src/js/*.js',
10+
dest: 'dist',
11+
ext: '.min.js'
12+
}
13+
},
14+
15+
cssmin: {
16+
minify: {
17+
expand: true,
18+
cwd: 'src/css',
19+
src: ['*.css', '!*.min.css'],
20+
dest: 'dist',
21+
ext: '.min.css'
22+
}
23+
},
24+
25+
qunit: {
26+
all: ['tests/*.html']
27+
},
28+
29+
watch: {
30+
files: ['tests/*.js', 'tests/*.html', 'src/**'],
31+
tasks: ['default']
32+
},
33+
34+
copy: {
35+
main: {
36+
files: [
37+
// copy dist to tests
38+
{ expand: true, cwd: 'dist', src: '*', dest: 'tests/lib/' },
39+
// copy latest libs to tests
40+
{ expand: true, cwd: 'public/bower_components/jquery', src: 'jquery.js', dest: 'tests/lib/' },
41+
{ expand: true, cwd: 'public/bower_components/bootstrap-datepicker/js', src: 'bootstrap-datepicker.js', dest: 'tests/lib/' },
42+
// copy src to example
43+
{ expand: true, cwd: 'src/css', src: '*', dest: 'public/css/' },
44+
{ expand: true, cwd: 'src/js', src: '*', dest: 'public/js/' }
45+
]
46+
}
47+
}
48+
});
49+
50+
// load up your plugins
51+
grunt.loadNpmTasks('grunt-contrib-uglify');
52+
grunt.loadNpmTasks('grunt-contrib-cssmin');
53+
grunt.loadNpmTasks('grunt-contrib-qunit');
54+
grunt.loadNpmTasks('grunt-contrib-watch');
55+
grunt.loadNpmTasks('grunt-contrib-copy');
56+
57+
// register one or more task lists (you should ALWAYS have a "default" task list)
58+
grunt.registerTask('default', ['uglify', 'copy', 'qunit']);
59+
grunt.registerTask('build', ['uglify', 'cssmin', 'copy', 'qunit']);
60+
};

‎README.md

+273-1
Original file line numberDiff line numberDiff line change
@@ -2,4 +2,276 @@
22

33
---
44

5-
Coming soon... watch this space!!!
5+
A simple and elegant solution to displaying hierarchical tree structures (i.e. a Tree View) while levering the best that Twitter Bootstrap has to offer.
6+
7+
![Bootstrap Tree View Default](https://raw.github.com/jondmiles/bootstrap-treeview/master/screenshot/default.PNG)
8+
9+
<!--For full documentation and examples, please visit [Bootstrap Tree View Website](http://www.jondmiles.com/bootstrap-treeview/ "Click to visit Bootstrap Tree View")-->
10+
11+
## Requirements
12+
13+
14+
Where provided these are the actual versions bootstrap-treeview has been tested against. Other versions should work but you use them as your own risk.
15+
16+
- [Bootstrap v3.0.3](http://getbootstrap.com/)
17+
- [jQuery v2.0.3](http://jquery.com/)
18+
19+
Sorry no support for Bootstrap 2.
20+
21+
## Usage
22+
23+
A full list of dependencies required for the bootstrap-treeview to function correctly.
24+
25+
<!-- Required Stylesheets -->
26+
<link href="./css/bootstrap.css" rel="stylesheet">
27+
28+
<!-- Required Javascript -->
29+
<script src="./js/jquery.js"></script>
30+
<script src="./js/bootstrap-treeview.js"></script>
31+
32+
33+
The component will bind to any existing DOM element.
34+
35+
<div id="tree"></div>
36+
37+
38+
The most basic usage may look something like this.
39+
40+
function getTree() {
41+
// Some logic to retrieve, or generate tree data
42+
return data;
43+
}
44+
45+
$('#tree').treeview({data: getTree()});
46+
47+
48+
49+
## Data Structure
50+
51+
In order to define the hierarchical structure of the tree it's necessary to provide a nested array of JavaScript objects.
52+
53+
Example
54+
55+
var tree = [
56+
{
57+
text: "Parent 1"
58+
nodes: [
59+
{
60+
text: "Child 1"
61+
nodes: [
62+
{
63+
text: "Grandchild 1"
64+
},
65+
{
66+
text: "Grandchild 2"
67+
}
68+
]
69+
},
70+
{
71+
text: "Child 2"
72+
}
73+
]
74+
},
75+
{
76+
text: "Parent 2"
77+
},
78+
{
79+
text: "Parent 3"
80+
},
81+
{
82+
text: "Parent 4"
83+
},
84+
{
85+
text: "Parent 5"
86+
}
87+
];
88+
89+
At the lowest level a tree node is a represented as a simple JavaScript object. Just one required property `text` will build you a tree.
90+
91+
{
92+
text: "Node 1"
93+
}
94+
95+
Here's the full node specification
96+
97+
{
98+
text: "Node 1",
99+
icon: "glyphicon glyphicon-stop",
100+
color: "#000000",
101+
backColor: "#FFFFFF",
102+
href: "#node-1",
103+
tags: ['available'],
104+
nodes: [
105+
{},
106+
...
107+
]
108+
}
109+
110+
111+
112+
## Node Properties
113+
114+
### text
115+
String. Mandatory
116+
117+
The text value displayed for a given tree node, typically to the right of the nodes icon.
118+
119+
### icon
120+
String. Optional
121+
122+
The icon displayed on a given node, typically to the left of the text.
123+
124+
For simplicity we directly leverage [Bootstraps Glyphicons support](http://getbootstrap.com/components/#glyphicons) and as such you should provide both the base class and individual icon class separated by a space.
125+
126+
By providing the base class you retain full control over the icons used. If you want to use your own then just add your class to this icon field.
127+
128+
### color
129+
String. Optional
130+
131+
The foreground color used on a given node, overrides global color option.
132+
133+
### backColor
134+
String. Optional
135+
136+
The background color used on a given node, overrides global color option.
137+
138+
### href
139+
String. Optional
140+
141+
Used in conjunction with global enableLinks option to specify anchor tag URL on a given node.
142+
143+
### tags
144+
Array of Strings. Optional
145+
146+
Used in conjunction with global showTags option to add additional information to the right of each node; using [Bootstrap Badges](http://getbootstrap.com/components/#badges)
147+
148+
### Extendible
149+
150+
You can extend the node object by adding any number of additional key value pairs that you require for your application. Remember this is the object which will be passed around during selection events.
151+
152+
153+
154+
## Options
155+
156+
### data
157+
JSON Array of Objects. No default, expects data
158+
159+
This is the core data to be displayed by the tree view.
160+
161+
### backColor
162+
String, [any legal color value](http://www.w3schools.com/cssref/css_colors_legal.asp). Default: inherits from Bootstrap.css.
163+
164+
Sets the default background color used by all nodes, except when overridden on a per node basis in data.
165+
166+
### borderColor
167+
String, [any legal color value](http://www.w3schools.com/cssref/css_colors_legal.asp). Default: inherits from Bootstrap.css.
168+
169+
Sets the border color for the component; set showBorder to false if you don't want a visible border.
170+
171+
### collapseIcon
172+
String, class name(s). Default: "glyphicon glyphicon-minus" as defined by [Bootstrap Glyphicons](http://getbootstrap.com/components/#glyphicons)
173+
174+
Sets the icon to be used on a collapsible tree node.
175+
176+
### color
177+
String, [any legal color value](http://www.w3schools.com/cssref/css_colors_legal.asp). Default: inherits from Bootstrap.css.
178+
179+
Sets the default foreground color used by all nodes, except when overridden on a per node basis in data.
180+
181+
### enableLinks
182+
Boolean. Default: false
183+
184+
Whether or not to present node text as a hyperlink. The href value of which must be provided in the data structure on a per node basis.
185+
186+
### expandIcon
187+
String, class name(s). Default: "glyphicon glyphicon-plus" as defined by [Bootstrap Glyphicons](http://getbootstrap.com/components/#glyphicons)
188+
189+
Sets the icon to be used on an expandable tree node.
190+
191+
### highlightSelected
192+
Boolean. Default: true
193+
194+
Whether or not to highlight the selected node.
195+
196+
### onhoverColor
197+
String, [any legal color value](http://www.w3schools.com/cssref/css_colors_legal.asp). Default: '#F5F5F5'.
198+
199+
Sets the default background color activated when the users cursor hovers over a node.
200+
201+
### levels
202+
Integer. Default: 2
203+
204+
Sets the number of hierarchical levels deep the tree will be expanded to by default.
205+
206+
### nodeIcon
207+
String, class name(s). Default: "glyphicon glyphicon-stop" as defined by [Bootstrap Glyphicons](http://getbootstrap.com/components/#glyphicons)
208+
209+
Sets the default icon to be used on all nodes, except when overridden on a per node basis in data.
210+
211+
### selectedColor
212+
String, [any legal color value](http://www.w3schools.com/cssref/css_colors_legal.asp). Default: '#FFFFFF'.
213+
214+
Sets the foreground color of the selected node.
215+
216+
### selectedBackColor
217+
String, [any legal color value](http://www.w3schools.com/cssref/css_colors_legal.asp). Default: '#FFFFFF'.
218+
219+
Sets the background color of the selected node.
220+
221+
### showBorder
222+
Boolean. Default: true
223+
224+
Whether or not to display a border around nodes.
225+
226+
### showTags
227+
Boolean. Default: false
228+
229+
Whether or not to display tags to the right of each node. The values of which must be provided in the data structure on a per node basis.
230+
231+
232+
233+
## Methods
234+
235+
### remove
236+
237+
Removes the tree view component. Removing attached events, internal attached objects, and added HTML elements.
238+
239+
$('#tree').treeview('remove');
240+
241+
242+
243+
## Events
244+
245+
### nodeSelected
246+
Fired when a user selects a node. You can bind to it using either the callback handler or the standard jQuery .on method
247+
248+
Example using options callback handler:
249+
250+
var options = {
251+
onNodeSelected: function(event, node) {
252+
// Your logic goes here
253+
}
254+
}
255+
$('#tree').treeview(options);
256+
257+
and using jQuery .on method
258+
259+
$('#tree').on('nodeSelected', function(event, node) {
260+
// Your logic goes here
261+
});
262+
263+
264+
265+
266+
## Copyright and Licensing
267+
Copyright 2013 Jonathan Miles
268+
269+
Licensed under the Apache License, Version 2.0 (the "License");
270+
you may not use this file except in compliance with the License.
271+
You may obtain a copy of the License at <http://www.apache.org/licenses/LICENSE-2.0>
272+
273+
Unless required by applicable law or agreed to in writing, software
274+
distributed under the License is distributed on an "AS IS" BASIS,
275+
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
276+
See the License for the specific language governing permissions and
277+
limitations under the License.

0 commit comments

Comments
 (0)
Please sign in to comment.