Advanced User Interface Controls and Components
Determines whether status icons are visible or not.
A Boolean value. The default is false, stating that status icons for all items are hidden.
Each item can have its own status icon. The item objects has statusIcon variable which accepts as value a CSS class with settings for a custom image.
Supported in: v1.0.
In this example we are showing how to show/hide status icons in TreeView. By clicking on 'Show Status Icons' check box, status icons will be displayed to the far left side for items that have their statusIcon variable set. In right-to-left layout, status icons are shown to the far right.
var $tree = null;
$(document).ready(function() {
$tree = $('#treeview').treeview({
showStatusIcons: 'true'
});
});
function toggleStatusIcons(elem){
$tree.treeview("option", "showStatusIcons", elem.checked);
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="css/integralui.treeview.css" />
<link rel="stylesheet" href="css/themes/theme-blue.css" />
<script type="text/javascript" src="external/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="external/jquery.ui.core.min.js"></script>
<script type="text/javascript" src="external/jquery.ui.widget.min.js""></script>
<script type="text/javascript" src="js/jquery.integralui.widget.min.js"></script>
<script type="text/javascript" src="js/jquery.integralui.treeview.min.js"></script>
</head>
<body>
<div class="block">
<div id="treeview" class="widget">
<ul>
<li><span class="icons question" data-element="statusIcon"></span><span>Books</span>
<ul>
<li><span>Art</span></li>
<li><span>Business</span>
<ul>
<li><span class="icons exclamation" data-element="statusIcon"></span><span>Economics</span></li>
<li data-expanded=false><span>Investing</span>
<ul>
<li><span>Bonds</span></li>
<li><span>Options</span></li>
<li><span>Stocks</span></li>
</ul>
</li>
<li><span>Management</span></li>
<li><span>Small Business</span></li>
</ul>
</li>
<li><span>Health</span></li>
<li><span>Literature</span></li>
</ul>
</li>
<li data-expanded=false><span>Electronics</span>
<ul>
<li><span>Camera</span></li>
<li><span>Cell Phones</span></li>
<li><span>Video Game Consoles</span></li>
</ul>
</li>
<li><span>Software</span>
<ul>
<li><span>Operating Systems</span></li>
<li><span class="icons down" data-element="statusIcon"></span><span>Network & Servers</span></li>
<li><span>Security</span></li>
</ul>
</li>
<li data-expanded=false><span class="icons up" data-element="statusIcon"></span><span>Sports</span>
<ul>
<li><span>Baseball</span></li>
<li><span>Martial Arts</span></li>
<li><span>Running</span></li>
<li data-expanded=false><span>Tennis</span>
<ul>
<li><span>Accessories</span></li>
<li><span>Balls</span></li>
<li><span>Racquets</span></li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
<div class="control-panel">
<form name="frm">
<label><input type="checkbox" name="toggleStatusIcons" checked="checked" onclick="toggleIcons(this)" /> Show Icons</label><br />
</form>
</div>
<div style="clear: both; height: 1px;"></div>
</div>
</body>
</html>
.block
{
position: relative;
margin: 0 auto 0 0;
width: 550px;
}
.control-panel
{
float: right;
font-size: 0.8em;
white-space: nowrap;
width: 100px;
}
.widget
{
float: left;
font-size: 0.75em;
width: 400px;
height: 400px;
}
.icons
{
}
.empty
{
}
.health
{
}
.science
{
}
A sample which demonstrates how to use custom icons to show an item status in TreeView for jQuery.