spec/html/bootstrap-treeview.html in patternfly-sass-3.9.0 vs spec/html/bootstrap-treeview.html in patternfly-sass-3.10.0
- old
+ new
@@ -25,14 +25,13 @@
<link rel="apple-touch-icon-precomposed" sizes="57x57" href="../../dist/img/apple-touch-icon-precomposed-57.png">
<link rel="stylesheet" href="../../dist/css/patternfly.min.css" >
<link rel="stylesheet" href="../../dist/css/patternfly-additions.min.css" >
<script src="//code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
- <script src="//rawgit.com/patternfly/patternfly-bootstrap-treeview/v1.0.0/dist/bootstrap-treeview.min.js"></script>
+ <script src="//rawgit.com/patternfly/patternfly-bootstrap-treeview/patternfly/dist/bootstrap-treeview.min.js"></script>
<script src="../../dist/js/patternfly.min.js"></script>
</head>
- </div>
<body>
<div class="container">
<div class="page-header">
<h1>Bootstrap Tree View</h1>
@@ -74,30 +73,58 @@
<div class="col-sm-4">
<h2>JSON Data</h2>
<div id="treeview6"></div>
</div><!--/col-->
<div class="col-sm-4">
- <h2></h2>
- <div id="treeview13"></div>
+ <h2>Checkboxes</h2>
+ <div id="treeview7"></div>
</div><!--/col-->
<div class="col-sm-4">
- <h2></h2>
- <div id="treeview14"></div>
+ <h2>Hierarchal Checks</h2>
+ <div id="treeview8"></div>
</div><!--/col-->
</div><!--/row-->
+ <div class="row">
+ <div class="col-sm-4">
+ <h2>Highlight Select</h2>
+ <div id="treeview9"></div>
+ </div><!--/col-->
+ <div class="col-sm-4">
+ <h2>Lazy Load</h2>
+ <div id="treeview10"></div>
+ </div><!--/col-->
+ <div class="col-sm-4">
+ <h2>Prevent Unselection</h2>
+ <div id="treeview11"></div>
+ </div><!--/col-->
+ </div>
+ <div class="row">
+ <div class="col-sm-4">
+ <h2>Disabled Nodes</h2>
+ <div id="treeview12"></div>
+ </div><!--/col-->
+ </div><!--/row-->
<script>
$(function() {
+ //icon options
+ var collapseIcon = "fa fa-angle-down",
+ expandIcon = "fa fa-angle-right",
+ nodeIcon = "fa fa-folder",
+ checkedIcon = "fa fa-check-square-o",
+ uncheckedIcon = "fa fa-square-o",
+ partiallyCheckedIcon = "fa fa-check-square",
+ loadingIcon = "glyphicon glyphicon-hourglass";
+
var defaultData = [
{
text: 'Parent 1',
href: '#parent1',
tags: ['4'],
nodes: [
{
text: 'Child 1',
href: '#child1',
- icon: 'fa fa-file-o',
tags: ['2'],
nodes: [
{
text: 'Grandchild 1',
href: '#grandchild1',
@@ -142,23 +169,28 @@
}
];
var json = '[' +
'{' +
'"text": "Parent 1",' +
+ '"lazyLoad": true,' +
'"nodes": [' +
'{' +
'"text": "Child 1",' +
+ '"lazyLoad": true,' +
'"nodes": [' +
'{' +
+ '"icon": "fa fa-file-o",' +
'"text": "Grandchild 1"' +
'},' +
'{' +
+ '"icon": "fa fa-file-o",' +
'"text": "Grandchild 2"' +
'}' +
']' +
'},' +
'{' +
+ '"icon": "fa fa-file-o",' +
'"text": "Child 2"' +
'}' +
']' +
'},' +
'{' +
@@ -172,64 +204,164 @@
'},' +
'{' +
'"text": "Parent 5"' +
'}' +
']';
+
+ //Default
$('#treeview1').treeview({
- collapseIcon: "fa fa-angle-down",
+ collapseIcon: collapseIcon,
data: defaultData,
- expandIcon: "fa fa-angle-right",
- nodeIcon: "fa fa-folder",
+ expandIcon: expandIcon,
+ nodeIcon: nodeIcon,
showBorder: false
});
+ //Collapsed
$('#treeview2').treeview({
- collapseIcon: "fa fa-angle-down",
+ collapseIcon: collapseIcon,
data: defaultData,
- expandIcon: "fa fa-angle-right",
+ expandIcon: expandIcon,
levels: 1,
- nodeIcon: "fa fa-folder",
+ nodeIcon: nodeIcon,
showBorder: false
});
+ //Expanded
$('#treeview3').treeview({
- collapseIcon: "fa fa-angle-down",
+ collapseIcon: collapseIcon,
data: defaultData,
- expandIcon: "fa fa-angle-right",
+ expandIcon: expandIcon,
levels: 99,
- nodeIcon: "fa fa-folder",
+ nodeIcon: nodeIcon,
showBorder: false
});
+ //Link Enabled
$('#treeview4').treeview({
- collapseIcon: "fa fa-angle-down",
+ collapseIcon: collapseIcon,
data: defaultData,
enableLinks: true,
- expandIcon: "fa fa-angle-right",
+ expandIcon: expandIcon,
levels: 99,
- nodeIcon: "fa fa-folder",
+ nodeIcon: nodeIcon,
showBorder: false
});
+ //Events
$('#treeview5').treeview({
- collapseIcon: "fa fa-angle-down",
+ collapseIcon: collapseIcon,
data: defaultData,
- expandIcon: "fa fa-angle-right",
+ expandIcon: expandIcon,
levels: 99,
- nodeIcon: "fa fa-folder",
+ nodeIcon: nodeIcon,
showBorder: false,
onNodeSelected: function(event, node) {
$('#event_output').prepend('<p>You clicked ' + node.text + '</p>');
}
});
+
+ //JSON Data
$('#treeview6').treeview({
- collapseIcon: "fa fa-angle-down",
+ collapseIcon: collapseIcon,
data: json,
- expandIcon: "fa fa-angle-right",
+ expandIcon: expandIcon,
levels: 99,
- nodeIcon: "fa fa-folder",
+ nodeIcon: nodeIcon,
showBorder: false
});
+
+ //Checkboxes
+ $('#treeview7').treeview({
+ collapseIcon: collapseIcon,
+ data: json,
+ expandIcon: expandIcon,
+ levels: 99,
+ nodeIcon: nodeIcon,
+ checkedIcon: checkedIcon,
+ uncheckedIcon: uncheckedIcon,
+ partiallyCheckedIcon: partiallyCheckedIcon,
+ showBorder: false,
+ showCheckbox: true,
+ checkboxFirst: true,
+ wrapNodeText: true
+ });
+
+ //Hierarchal Checks
+ $('#treeview8').treeview({
+ collapseIcon: collapseIcon,
+ data: json,
+ expandIcon: expandIcon,
+ levels: 99,
+ nodeIcon: nodeIcon,
+ checkedIcon: checkedIcon,
+ uncheckedIcon: uncheckedIcon,
+ partiallyCheckedIcon: partiallyCheckedIcon,
+ showBorder: false,
+ showCheckbox: true,
+ hierarchicalCheck: true,
+ checkboxFirst: true,
+ wrapNodeText: true
+ });
+
+ //Highlight Select
+ $('#treeview9').treeview({
+ collapseIcon: collapseIcon,
+ data: json,
+ expandIcon: expandIcon,
+ levels: 99,
+ nodeIcon: nodeIcon,
+ checkedIcon: checkedIcon,
+ uncheckedIcon: uncheckedIcon,
+ partiallyCheckedIcon: partiallyCheckedIcon,
+ showBorder: false,
+ showCheckbox: true,
+ hierarchicalCheck: true,
+ checkboxFirst: true,
+ wrapNodeText: true,
+ highlightChanges: true,
+ changedNodeColor: $.pfPaletteColors.black900
+ });
+
+ //Lazy Load
+ $('#treeview10').treeview({
+ collapseIcon: collapseIcon,
+ data: json,
+ expandIcon: expandIcon,
+ levels: 1,
+ nodeIcon: nodeIcon,
+ showBorder: false,
+ wrapNodeText: true,
+ loadingIcon: loadingIcon,
+ lazyLoad: function(node, callback){
+ setTimeout(function() {
+ callback([]);
+ }, 2000);
+ }
+ });
+
+ //Prevent Unselection
+ $('#treeview11').treeview({
+ collapseIcon: collapseIcon,
+ data: json,
+ expandIcon: expandIcon,
+ levels: 99,
+ nodeIcon: nodeIcon,
+ showBorder: false,
+ preventUnselect: true
+ });
+
+ //Disabled Nodes
+ var tree12 = $('#treeview12').treeview({
+ collapseIcon: collapseIcon,
+ data: json,
+ expandIcon: expandIcon,
+ levels: 99,
+ nodeIcon: nodeIcon,
+ showBorder: false
+ });
+ tree12.treeview('disableAll');
+
});
</script>
</div><!-- /container -->
</body>