LIDOR SYSTEMS

Advanced User Interface Controls and Components

IntegralUI Web

Documentation and API Reference


showIcons

Determines whether icons are visible or not in tab headers.

Property Value

A Boolean value. The default is true, stating that icons inside tab headers are visible.

Remarks

Each tab can have its own icon. The tab object has icon variable which accepts as value a CSS class with settings for a custom image.

Version Information

Supported in: v1.0.

Example

In this example we are showing how to show/hide icons in TabStrip. By clicking on 'Show Icons' check box, icons will be displayed before tab text. In right-to-left layout, icons are shown after tab text.

var $tab = null;

$(document).ready(function() {

$tab = $('#tabstrip').tabstrip({

selectedIndex: 1

});

});

 

function toggleIcons(elem){

$tab.tabstrip("option", "showIcons", elem.checked);

}

<!DOCTYPE html>

<html>

<head>

<link rel="stylesheet" href="css/integralui.tabstrip.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.tabstrip.min.js"></script>

</head>

<body>

<div class="block">

<div id="tabstrip" class="widget">

    <span class="icons health" data-element="icon"></span><li><span>Tab 1</span></li>

    <span class="icons music" data-element="icon"></span><li><span>Tab 2</span></li>

    <span class="icons science" data-element="icon"></span><li><span>Tab 3</span></li>

<div></div>

<div></div>

<div></div>

</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

{

background-image: url(../resources/icons.png);

background-repeat: no-repeat;

display: inline-block;

overflow: hidden;

padding: 0;

margin: 2px;

width: 16px;

height: 16px;

}

.empty

{

background-position: 0px 0px;

}

.health

{

background-position: -128px -48px;

}

.science

{

background-position: 0 -64px;

}

.music

{

background-position: -32px -64px;

}

Samples

See Also