?
Solved

jQuery ui - tabs - show option

Posted on 2009-07-11
7
Medium Priority
?
1,634 Views
Last Modified: 2012-05-07
Hi,

I am using the jQuery ui, tabs widget. I want to to be able to create an effect (eg sliding) when the pane is shown upon clicking on a tab item.

The standard js for a tab would be:

      $(function() {
            $("#tabs").tabs({
                  event: 'click'
            });
      });

There is an option called "show" but the documentation is really unclear as to how to use it....

For example, I'd like to be able to use the slide effect (also in the UI) and call this for the option.

The documentation says you do this:

Supply a callback function to handle the show event as an init option.

    $('.selector').tabs({
       show: function(event, ui) { ... }
    });

Bind to the show event by type: tabsshow.

    $('.selector').bind('tabsshow', function(event, ui) {
      ...
    });

But this isn't terribly helpful!

Any help much appreciated!

Daisy
0
Comment
Question by:daisydoos
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 4
  • 3
7 Comments
 
LVL 4

Expert Comment

by:Xemorph
ID: 24830854
Have you tried someing like the code below?  

Where ".Effect" is any of the jQuery effects (example: hide(), fadein(), slideDown()).

Try using the jQuereySelector as your tab id. (div id for your tab).

Hope that works, or at least points you in the right direction.
$('.selector').tabs({
       show: function(event, ui) { $('jQuerySelector').Effect(...); }
    });

Open in new window

0
 

Author Comment

by:daisydoos
ID: 24837919
Hi,

Thanks for getting back to me.

Still not working I am afraid.

I am trying to use the slide effect ui.effects.slide.js such that you click on a tab, the content for that tab has this effect (slide) applied to it.

Mark up is like this:

<div id="tabs">
<ul>
      <li><a href="#tabs-1">1</a></li>      
      <li><a href="#tabs-2">2</a></li>
</ul>
<div class="tabstest" id="tabs-1">
<p>some content</p>
</div>
<div class="tabstest" id="tabs-2">
<p>some content</p>
</div>
</div>

and the jquery is like this:

$(function() {
            $("#tabs").tabs({
                  event: 'click'
            });
      });

or with the attempted effect applied:

$(function() {
            $("#tabs").tabs({
                  event: 'click',
                  
                  
                  show:function(event,ui)
                  {
                        $('.tabstest').effect('slide',options,3500);
                  };
                  
                  
            });
      });

this not working at all....

Any ideas?

Cheers,

Daisy

0
 

Author Comment

by:daisydoos
ID: 24838076
Hi,

This is working ...

$(function() {
             var options = {};
            
            $("#tabs").tabs({
                  event: 'click',
                  show:function(event,ui)
                  {
                        $(ui.panel).effect("slide",options,1500);
                  }
                  
            });
      });

The only problem now is that when you load the page the first pane slides into view..

Cheers,

Daisy
0
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 4

Expert Comment

by:Xemorph
ID: 24846376
If you add the selected option and set the value as -1, it will not select any tab.  I hope that is the functionailty you need
// Replace your function with this.
$(function() {
    $('#tabs').tabs({
	selected: -1,
	show: function(event, ui) {
		$('.tabstest').effect( 'slide', 'options', 1500); 
	}
    });
});

Open in new window

0
 

Author Comment

by:daisydoos
ID: 24846731
Hi,

Thanks for getting back to me.

What this does is not show the pane content for the first time when the page is loaded. What I ideally want is to show this - rather than have it slide it on page load.

This actually works:

$(function() {
             var options = {};
            
            $("#tabs").tabs({
                  event: 'click',
                  show:function(event,ui)
                  {
                        $(ui.panel).effect("slide",options,500);
      
                  }
                  
            });
      });

WIth this when you load the page, the first tab in the list is selected, but the content slides in - it's ok, but it would be great to know how to just present the pane of the first tab without the slide. Thereafter, all pane content slides in.

Cheers,

Daisy
0
 
LVL 4

Accepted Solution

by:
Xemorph earned 2000 total points
ID: 24856266
Sorry it took we a while, but I think I got it.  

So, we initalize the tabs and have a function bound to the select event.  This fires whenever you click on a tab.  So, at first, we don't have the slide event bound, but after the first select, we bind the effect to the tabs.
 
I know I did this my way rather then yours, but it works.    To make it work with yours, I be
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
	<link rel="stylesheet" href="css/smoothness/jquery-ui-1.7.2.custom.css" type="text/css">
	
	<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
	<script type="text/javascript" src="js/jquery-ui-1.7.2.custom.min.js"></script>
 
	<script>
		
//  My way
		$(function() {
			$('#tabs').tabs({
				select: function(event, ui) {
					$('#tabs').unbind('tabsshow');
					$('#tabs').bind('tabsshow',  function (event, ui){
								$('.tabstest').effect( 'slide', 'options', 1500);
							});
				}
			});
		});
 
// Your way /*
         $(function() {
             var options = {};
            
            $("#tabs").tabs({
                  event: 'click',
                  select:function(event,ui)
                  {
						$("#tabs").unbind('tabsshow');
						$("#tabs").bind('tabsshow', function (event, ui){
							$(ui.panel).effect("slide",options,500);
						})
                  }
                  
            });
      });
 
 
 
*/
	</script>
</head>
 
<body>
	<div id="tabs">
		<ul>
			  <li><a href="#tabs-1">1</a></li>      
			  <li><a href="#tabs-2">2</a></li>
		</ul>
		<div class="tabstest" id="tabs-1">
			<p>some content 2</p>
		</div>
		<div class="tabstest" id="tabs-2">
			<p>some content</p>
		</div>
	</div>
</body>
</html>

Open in new window

0
 

Author Closing Comment

by:daisydoos
ID: 31602415
Many thanks for your help!
0

Featured Post

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

I found this questions asking how to do this in many different forums, so I will describe here how to implement a solution using PHP and AJAX. The logical flow for the problem should be: Write an event handler for the first drop down box to get …
Introduction JSON is an acronym for JavaScript Object Notation.  It is a text-string data transport mechanism, capable of representing simple or complex data structures in a consistent and easy-to-read manner.  Similar in concept to XML, but more e…
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

771 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question