Solved

jQuery ui - tabs - show option

Posted on 2009-07-11
7
1,582 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
  • 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
Maximize Your Threat Intelligence Reporting

Reporting is one of the most important and least talked about aspects of a world-class threat intelligence program. Here’s how to do it right.

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

Highfive + Dolby Voice = No More Audio Complaints!

Poor audio quality is one of the top reasons people don’t use video conferencing. Get the crispest, clearest audio powered by Dolby Voice in every meeting. Highfive and Dolby Voice deliver the best video conferencing and audio experience for every meeting and every room.

Join & Write a Comment

by Julian Matz As of jQuery (http://jquery.com/) 1.4 the .live() method (http://api.jquery.com/live/) supports custom events as well as some standard JavaScript events that it previously didn't support. Among these is the submit event. Unlike …
Introduction If you're like most people, you have occasionally made a typographical error when you're entering information into an online form.  And to your consternation, the browser remembers the error, and offers to autocomplete your future entr…
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)
The viewer will learn the basics of jQuery including how to code hide show and toggles. 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…

759 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

Need Help in Real-Time?

Connect with top rated Experts

21 Experts available now in Live!

Get 1:1 Help Now