Tab Control

@@adsense
.tabcontrol
.tabcontrol2
.tabcontrol & .tabs-bottom
.tabcontrol2 & .tabs-bottom
HTML, tabs on top

                <div class="tabcontrol">
                    <ul class="tabs">
                        <li><a href="#frame_id">Caption</a></li>
                        ...
                        <li><a href="#frame_id">Caption</a></li>
                    </ul>

                    <div class="frames">
                        <div class="frame" id="frame_id">1</div>
                        ...
                        <div class="frame" id="frame_id">4</div>
                    </div>
                </div>
            
HTML, tabs on bottom

                <div class="tabcontrol tabs-bottom">
                    <div class="frames">
                        <div class="frame" id="frame_id">1</div>
                        ...
                        <div class="frame" id="frame_id">4</div>
                    </div>

                    <ul class="tabs">
                        <li><a href="#frame_id">Caption</a></li>
                        ...
                        <li><a href="#frame_id">Caption</a></li>
                    </ul>
                </div>
            
Declarative style

                <div class="tabcontrol" data-role="tabControl">
                ...
                </div>
            
Javascript style

                <div class="tabcontrol" id="tab-control">
                ...
                </div>

                <script>
                    $(function(){
                        $("#tab-control").tabControl();
                    });
                </script>
            

Options

Parameter Data-* Type Default value Description
openTarget data-open-target string false ID of frame to can be opened on tabControl init
saveState data-save-state boolean false if true active tab saved in localStorage
openTarget
1
2
3

Tab control initialized with active tab 2. Tab can not be disabled.

saveSate
1
2
3

Tab control initialized with saved tab. Select tab and reload page. This future required ID attribute for tabcontrol

Events

Event Data-* Params Description
onTabClick data-on-step (tab) The event fired when tab click. This function can return true or false. If returned value is false, tab no switched
onTabChanged data-on-step-click (tab) The event fired when the tab is changed

Additional

If tab has class disabled, then tab not be clicked.

@@hit