Developed by Wallace Rio <wallrio@gmail.com>
Tested on Firefox 45 / IE 8 / Opera 12 / Chrome 38 / Safari 5
Insert script tag and link tag into your head document html
<link rel="stylesheet" href="itabs.css"> <script type="text/javascript" src="itabs.js"></script>
Is recommend include other file css for changes
Insert markup above:
<div class="itabs tabFlat"> <div data-rel="tabs" > <a data-rel="tab" data-for="view1" data-status="active">view1</a> <a data-rel="tab" data-for="view2" disabled="disabled">view2</a> <a data-rel="tab" data-for="view3" >view3</a> </div> <div data-rel="slides"> <div data-rel="slide" data-id="view1" > view 1 </div> <div data-rel="slide" data-id="view2"> view 2 </div> <div data-rel="slide" data-id="view3" > view 3 </div> </div> </div>
click on second tab for visualize the action
<div class="itabs tabFlat" id="ajax" > <div data-rel="tabs" > <a data-rel="tab" data-for="view1a" data-status="active">view 1 a</a> <a data-rel="tab" data-for="view2a" disabled="disabled">view 2 a</a> <a data-rel="tab" data-for="view3a" >view3 </a> </div> <div data-rel="slides"> <div data-rel="slide" data-id="view1a" > view 1 a </div> <div data-rel="slide" data-id="view2a"> view 2 a </div> <div data-rel="slide" data-id="view3a" > view 3 a </div> </div> </div>
Using on script
<script type="text/javascript"> itabs('ajax').event('click').tab('view2a',function(e){ e.action.tab().content('tab new'); e.action.slide().content('content new'); }); </script>
Insert tag of tab inside other tab changing the attributes, 'id' if exist, 'data-for' and 'data-id'
<div class="itabs tabFlat" > <div data-rel="tabs" > <a data-rel="tab" data-for="view1b" data-status="active">view 1 b</a> <a data-rel="tab" data-for="view2b" >view 2 b</a> <a data-rel="tab" data-for="view3b" >view 3 b</a> </div> <div data-rel="slides"> <div data-rel="slide" data-id="view1b" > <div class="itabs tabFlat" > <div data-rel="tabs" > <a data-rel="tab" data-for="view1c" >view 1 c</a> <a data-rel="tab" data-for="view2c" data-status="active">view 2 c</a> <a data-rel="tab" data-for="view3c" >view 3 c</a> </div> <div data-rel="slides"> <div data-rel="slide" data-id="view1c" > view 1 c </div> <div data-rel="slide" data-id="view2c"> view 2 c </div> <div data-rel="slide" data-id="view3c" > view 3 c </div> </div> </div> </div> <div data-rel="slide" data-id="view2b"> view 2 b </div> <div data-rel="slide" data-id="view3b" > view 3 b </div> </div> </div>
itabs('ajax').event('click').tab('view2b',function(e){ // insert you action here });Change title of tab
e.action.tab('data-for_of_tab').content('content'); or e.action.tab().content('content'); // this command get tab fron function clousure event or itabs('id_of_tabWrapper').action.tab('data-for_of_tab').content('content'); or itabs('id_of_tabWrapper').action.tab('data-for_of_tab').content('content');Change title of slide
e.action.slide('data-id_of_slide').content('content'); or e.action.slide().content('content'); // this command get tab fron function clousure event or itabs('id_of_tabWrapper').action.slide('data-id_of_slide').content('content'); or itabs('id_of_tabWrapper').action.slide('data-id_of_slide').content('content');