Tabs Responsible - iTabs - v1.1

Developed by Wallace Rio <wallrio@gmail.com>


Download files

itabs.css
itabs.js


Cross-Browser

Tested on Firefox 45 / IE 8 / Opera 12 / Chrome 38 / Safari 5



Using

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>


Change the style on css file (itabs.css)

Is recommend include other file css for changes




Example

Tabs default

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>
view 1 view 2 view 3
view 1
view 2
view 3





Example 2 - Action run-time

click on second tab for visualize the action


view 1 a view 2 a view 3 a
view 1 a
view 2 a
view 3 a




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





Example 3 - tab inside on tab

Insert tag of tab inside other tab changing the attributes, 'id' if exist, 'data-for' and 'data-id'


view 1 b view 2 b view 3 b
view 1 c view 2 c view 3 c
view 1 c
view 2 c
view 3 c
view 2 b
view 3 b



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



API - javascript

Action on click of tab
		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');