Saturday, July 25, 2009

[jQuery] Re: Modify tabbed interface

theme is using jQuery UI tabs that have effects options built in, perhaps they would make it easier for you. There is a google group for UI support also if you have difficulty

http://jqueryui.com/demos/tabs/

Aleksey wrote:
Hello, everyone)  I've read a tutorial describing creating simple tabs: http://www.sohtanaka.com/web-design/simple-tabs-w-css-jquery/ But I want to modify it, and cannot achieve the desired result, and that result can be seen at one template: http://themeforest.net/item/maven-portfolio-wordpress/49522?no_login=true (Just click on 'Live Preview')  So, I want a content: 1. slideUp() and fadeOut() simultaneously 2. slideDown() and fadeIn() simultaneously  I found an interesting article about a subject: http://www.learningjquery.com/2008/02/simple-effects-plugins But still, as I said, I don't know how to do that.  The code I use now: (function($) { 	$.fn.slideFadeToggle = function(speed, easing, callback) { 		return this.animate({                      opacity: 'toggle', 		     height: 'toggle', 		}, speed, easing, callback); 	} })(jQuery)  			$(function() { 				$('.tab-content').hide(); 				$('ul.tabs li:first').addClass('active'); 				$('.tab-content:first').show();  				$('ul.tabs li a').click(function() { 					$("ul.tabs li").removeClass("active"); 					$(this).parent().addClass('active'); 					$('.tab-content').hide(); 					var href = $(this).attr('href'); 					$(href).slideFadeToggle('slow'); 					return false; 				}); 			});  Thank you very much, if you can help me))    

No comments: