Tab Control

@@adsense

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

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

saveSate

Tab 1
Tab 2
Tab 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-tab-click	(tab)	The event fired when tab click. This function can return true or false. If returned value is false, tab no switched
onTabChange	data-on-tab-change	(tab)	The event fired when the tab is changed


                <div class="tabcontrol"
                     data-role="tabcontrol"
                     data-on-tab-click="tab_click"
                     data-on-tab-change="tab_change">
                    ...
                </div>

                <script>
                    function tab_click(tab){
                        console.log(tab);
                        return true;
                    }

                    function tab_change(tab){
                        console.log(tab);
                    }
                </script>


                <div class="tabcontrol" id="tabcontrol">
                    ...
                </div>

                <script>
                    $(function(){
                        $("#tabcontrol).tabcontrol({
                            onTabClick: function(tab){...},
                            onTabChange: function(tab){...}
                        });
                    })
                </script>

Additional

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