Using Tabs plug-in to realize multi-panel single content area

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>utilize Tabs Plug-in implements multi-panel single content area</title>

<script src="js/jquery.tabs.js"></script>
<link rel="stylesheet" href="css/tab.css" media="screen">
<script src="js/jquery-1.8.0.min.js"></script>
<script type="text/javascript">
$(function(){
    //Click the title to switch to the appropriate content
    $('.demo2').Tabs({
        event:'click'
    });       
}); 
</script>
</head>
<body>
	<div class="box demo2" style="width: 820px;">
		<ul class="tab_menu" style="margin-left: 30px;">
			<li class="current" style="margin-right: 30px;">Courses have been created</li>
			<li style="margin-right: 30px;">Creating Courses</li>
		</ul>
		<div></div>
		<div class="hide"></div>
	</div>
</body>
</html>

tabs.js file

/* =================================================
// jQuery Tabs Plugins 1.0
// author:chenyg@5173.com
// URL:http://stylechen.com/jquery-tabs.html
// 4th Dec 2010
// =================================================*/

;(function($){
	$.fn.extend({
		Tabs:function(options){
			// Processing parameters
			options = $.extend({
				event : 'mouseover',
				timeout : 0,
				auto : 0,
				callback : null
			}, options);
			
			var self = $(this),
				tabBox = self.children( 'div.tab_box' ).children( 'div' ),
				menu = self.children( 'ul.tab_menu' ),
				items = menu.find( 'li' ),
				timer;
				
			var tabHandle = function( elem ){
					elem.siblings( 'li' )
						.removeClass( 'current' )
						.end()
						.addClass( 'current' );
						
					tabBox.siblings( 'div' )
						.addClass( 'hide' )
						.end()
						.eq( elem.index() )
						.removeClass( 'hide' );
				},
					
				delay = function( elem, time ){
					time ? setTimeout(function(){ tabHandle( elem ); }, time) : tabHandle( elem );
				},
				
				start = function(){
					if( !options.auto ) return;
					timer = setInterval( autoRun, options.auto );
				},
				
				autoRun = function(){
					var current = menu.find( 'li.current' ),
						firstItem = items.eq(0),
						len = items.length,
						index = current.index() + 1,
						item = index === len ? firstItem : current.next( 'li' ),
						i = index === len ? 0 : index;
					
					current.removeClass( 'current' );
					item.addClass( 'current' );
					
					tabBox.siblings( 'div' )
						.addClass( 'hide' )
						.end()
						.eq(i)
						.removeClass( 'hide' );
				};
							
			items.bind( options.event, function(){
				delay( $(this), options.timeout );
				if( options.callback ){
					options.callback( self );
				}
			});
			
			if( options.auto ){
				start();
				self.hover(function(){
					clearInterval( timer );
					timer = undefined;
				},function(){
					start();
				});
			}
			
			return this;
		}
	});
})(jQuery);

tab.css file

.tab_menu{  
    list-style:none;  
    width:210px;  
    overflow:hidden;  
}  
.tab_menu li{  
    width:70px;height:30px;  
    line-height:30px;  
    float:left;  
    color:#fff;  
    background:#093;  
    text-align:center;  
    cursor:pointer;  
}  
.tab_menu li.current{  
    color:#333;  
    background:#fff;  
} /*TAB Menu Highlighting Style*/  
.tab_box{  
    padding:20px;  
    height:120px;  
}  
.tab_box .hide{  
    display:none;  
} /*Hide the TAB content section*/ 

Interpretation of key knowledge

 

  • First, you need to introduce jquery.tabs.js and tab.css files to use the Tabs plug-in.

  • It specifies that class=current is to display the current content and class=hide is to hide the current content.

  • Event objects represent the state of events, such as the elements in which events occur, the state of keyboard keys, the position of the mouse, and the state of mouse buttons.

    Events are usually used in conjunction with functions, which are not executed before events occur!

  • click events occur when an element is clicked.

The plug-in code is referenced from chenyg@5173.com.

Tags: Programming JQuery Javascript

Posted on Tue, 08 Oct 2019 08:11:35 -0700 by php-phan