Advanced User Interface Controls and Components
Determines whether icons are visible or not.
A Boolean value. The default is true, stating that icons for all items are visible.
Each item can have its own icon. The item objects has icon 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 icons in Menu. By clicking on 'Show Icons' check box, icons will be displayed before item text. In right-to-left layout, icons are shown after item text.
var $bar = null;
$(document).ready(function() {
$bar = $('#menu').menu({
showIcons: 'true'
});
});
function toggleIcons(elem){
$bar.menu("option", "showIcons", elem.checked);
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="css/integralui.menu.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.menu.min.js"></script>
</head>
<body>
<div class="block">
<div id="menu" class="widget">
class="icons books" data-element="icon"></span><span>Books</span>
class="icons business" data-element="icon"></span><span>Business</span>
data-expanded=false><span class="icons chart" data-element="icon"></span><span>Investing</span>
class="icons health" data-element="icon"></span><span>Health</span></li>
data-expanded=false><span class="icons science" data-element="icon"></span><span>Science</span>
data-expanded=false><span class="icons music" data-element="icon"></span><span>Music</span>
class="icons app" data-element="icon"></span><span>Software</span>
data-expanded=false><span>Sports</span>
data-expanded=false><span>Tennis</span>
class="icons time" data-element="icon"></span><span>Watches</span></li>
</div>
<div class="control-panel">
<form name="frm">
<label><input type="checkbox" name="checkIcons" 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 apply custom icons to each item in Menu for jQuery.