Solved

jQuery ui - tabs - show option

Posted on 2009-07-11
7
1,585 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
3 Use Cases for Connected Systems

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, testing some more, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us.

 
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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

PROBLEM: The other day I was working on adding an ajax request to a webpage that already had a dialog box on the page.  The dialog box was using relative positioning to be positioned next to a form field I had on the page.  Everything was working…
Introduction Chart.js, used properly, can visually add a difference to your charting applications. It engages your visitors and allows them to interact with data they otherwise wouldn't be able to without expensive and complicated systems. For this…
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…

895 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

14 Experts available now in Live!

Get 1:1 Help Now