KoolTabs - Powerful PHP Tab MenuFullVersion 1.8.0.0 released on 04/16/2012

KoolTabs supports rich client-side event handling. With the use of registerEvent() , you can bind your function to an event.

• "OnBeforeSelect" - Before the tab changes to selection state.
• "OnSelect" - After the tab changes to selection state.
• "OnBeforeUnselect" - Before the tab changes to unselection state.
• "OnUselect" - After the tab changes to unselection state.
• "OnBeforeSelect" - Before the tab changes to selection state.
• "OnSelect" - After the tab changes to selection state.
• "OnMouseOver" - When the mouse is over a tab.
• "OnMouseOut" - When the mouse is moving out of a tab.

*Note: Returning false in "OnBefore..." handle function will result in cancelling user action.

<?php
	require $KoolControlsFolder."/KoolTabs/kooltabs.php";
 
	$kts = new KoolTabs("kts");
	$kts->scriptFolder = $KoolControlsFolder."/KoolTabs";
	$kts->styleFolder="outlook";
 
	$kts->addTab("root","home","Home");	
	$kts->addTab("root","products","Products");
	$kts->addTab("root","services","Services");
	$kts->addTab("root","contactus","Contact us");	
 
 
?>
 
<form id="form1" method="post">
	<style type="text/css">
		.box
		{
			float:right;
			width:280px;
			height:180px;
			margin:10px;
			padding:10px;
		}		
		.focus
		{
			background:#DFF3FF;
			border:solid 1px #C6E1F2;			
		}
		.clear
		{
			clear:both;
		}
		#eventlog
		{
			overflow:auto;
			overflow-x:hidden;
			height : 150px;
			width : 280px;
		}	
 
	</style>
 
 
	<div style="width:650px;">
 
		<div class="box focus">
			<b>Client-side events:  </b><hr/>
			<div id="eventlog"></div>		
		</div>
 
		<div style="padding-top:15px;">
			<?php echo $kts->Render();?>
		</div>
 
		<div class="clear"></div>		
	</div>
 
	<script type="text/javascript">
		kts.registerEvent("OnBeforeSelect",function(sender,arg){
			if(confirm("Select ["+arg.TabId+"] tab?"))
			{
				writelog("Selecting " + arg.TabId + " was approved");				
				return true; //Approve selecting.
			}
			else
			{
				writelog("Selecting " + arg.TabId + " was cancelled");	
				return false;//Disapprove selecting.
			}
		});
 
		kts.registerEvent("OnSelect",function(sender,arg){
			writelog("The <b>"+arg.TabId+"</b> tab is selected!");
		});
 
 
		function writelog(_text)
		{
			var _eventlog = document.getElementById("eventlog");
			_eventlog.innerHTML +="<div style='white-space:nowrap;'>"+_text+"</div>";
			_eventlog.scrollTop = 9999;
		}		
 
	</script>
 
</form>

• • Javascript :: KoolTabs :: registerEvent