Jquery tabs control - how to select tab - javascript

I have following html to show tabs control of jquery:
<div id="tabs" class="news1">
<ul>
<li>Track</li>
<li>History</li>
</ul>
<div id="tabs-1">
</div>
<div id="tabs-2">
</div>
</div>
On page load, following script is written:
<script>
$(function() {
$( "#tabs" ).tabs();
});
</script>
On page load, tab-1 is selected by default. How can I Programmatically select tab-2 using JavaScript or jQuery?

You can specify the active option, which must be set to the zero-based index of the tab you want to activate:
$("#tabs").tabs({
active: 1
});

$("selector").tabs("option", {
"selected": 1,
"disabled": [0]
});​

Related

How to active/onfocus the dashboard UI tabs from clicking submenu of the main menubar

I have a menu "Tasks" with submenus name "Assigned", "UnAssigned" and "Summary" in the main menu bar.
In the below dashboard page of the menu, i have the UI tabs named "Assigned", "UnAssigned", Reports, Approved, Etc...
My question is, if i click the submenu "UnAssigned" the UI tab "UnAssigned" need to get active and shows its contents and if i click the submenu "Assigned" the UI tab "Assigned" get active and shows its contents.
My html code for main menu...
<ul>
<?php
if ($usergroup!='DigitizationArtist' && $usergroup!='GraphicArtist')
{ echo '<li><span onclick="UnAssigned()">UnAssigned</span></li>';}
?>
<li><span onclick="Assigned()">Assigned</span></li>
<li><span onclick="Completed()">Completed</span></li>
<li><span onclick="Approved()">Approved</span></li>
</ul>
my jquery for active assigned and unassigned..
<script>
$(function (Assigned)
{
$( "#tabs" ).tabs({ active: 1 });
});
</script>
<script>
$(function (UnAssigned)
{
$( "#tabs" ).tabs({ active: 0 });
});
</script>
my html coding for UI tabs...
<div id="tabs" class="uitabs">
<ul>
<li>Un Assigned</li>
<li>Assigned</li>
<li>Summary</li>
</ul>
<div id="tabs-1"></div>
<div id="tabs-2"></div>
<div id="tabs-3"></div>
Please advise... what is wrong in my jquery coding...(i am new to jquery)
Otherwise help me with other javascripts.
I uploaded in cloud.
Check this

how to show content using toggle in jQuery

I made a simple demo in JQM. In this demo there is a lot of space that is occupied by buttons and a textfield.
So I tried to hide the content with the idea to show it when a button is clicked.
I want that content only to show on button click and hide and again when the user clicks the button. Given picture I need to toggle. Here is the content I need to toggle on button click:
<div data-role="header" data-theme="b" class="header">
<nav>
<ul>
<li class="new_h"><i class="new"></i>New
</li>
<li class="export_h"><i class="export "></i>Export
</li>
<li class="import_h"><i class="import "></i>Import
</li>
<div class="cb"></div>
</ul>
</nav>
</div>
<div data-role="content">
<article class="testsuitbox">
<h1>TestSuite Name</h1>
<input name="" type="text" class="txtfield" id="testSuiteId"/>
</article>
</div>
Well, if you need to "toggle" the content, simply use .toggle().
Docs: http://api.jquery.com/toggle/
Docs example:
HTML
<div id="clickme">
Click here
</div>
<img id="book" src="book.png" alt="" width="100" height="123">
jQuery
$( "#clickme" ).click(function() {
$( "#book" ).toggle( "slow", function() {
// Animation complete.
});
});

How to change content of multiple divs on click

I am attempting to figure out how to change the content of two different, non-contiguous divs, when a link is clicked. I have some draft HTML and Javascript, and I suspect missing CSS might be the key to make this work.
Here is the HTML:
<ul id="tabs">
<li>Link 1
</li>
<li>Link 2
</li>
</ul>
<div id="tabs-container">
<div id="content1">Content for link 1. Should display only when Link 1 is clicked.</div>
<div id="content2">Content for link 2. Should display only when Link 2 is clicked.</div>
</div>
<p>Unrelated text is here. Text in this area is static and should display at all times.</p>
<div id="tabs-container-2">
<div id="content1-2">Additional content for link 1. Should display only when Link 1 is clicked.</div>
<div id="content2-2">Additional content for link 2. Should display only when Link 2 is clicked.</div>
</div>
Here is the Javascript:
$(function () {
$('#tabs-container .tabs').hide().eq(0).show();
$('#tabs-container-2 .tabs').hide().eq(0).show();
$('#tabs li').click(function () {
num = $('#tabs li').index(this);
$('#tabs-container .tabs').hide().eq(num).show();
$('#tabs-container-2 .tabs').hide().eq(num).show();
});
});
I am a novice at CSS and Javascript. In fact, I deleted my attempt at CSS because it was so poor. Here is the partial jsfiddle:
http://jsfiddle.net/Fbx_Steve/GbaMx/14/
Hope someone can help. Am I even on the right track?
Try,
$(function () {
$('#tabs-container div').hide().eq(0).show();
$('#tabs-container-2 div').hide().eq(0).show();
$('#tabs li').click(function () {
$('#tabs-container div').hide()
$('#tabs-container-2 div').hide()
num = $('#tabs li').index(this);
$('#tabs-container div').hide().eq(num).show();
$('#tabs-container-2 div').hide().eq(num).show();
});
});
DEMO
Is this what you're after?
http://jsfiddle.net/GbaMx/16/
I added an id to each link, and when the link is clicked the repective content is toggled.
I grouped them into 2 classes for .c1 .c2 for content 1 and content 2
Updates JSFiddle: http://jsfiddle.net/GbaMx/18/
Your Javascript was totally fine. However, you were trying to reference the tabs class, when there were no such classes defined. Thus, I had to update the HTML with ids of content-x to have a class of tabs.
Try this
JQUERY CODE:
$(function () {
$('#tabs-container div').hide();
$('#tabs-container-2 div').hide();
$('#tabs li a').on('click', function (event) {
event.preventDefault();
num = $(this).parent().index();
$('#tabs-container div').eq(num).slideToggle();
$('#tabs-container-2 div').eq(num).slideToggle();
});
});
LIVE DEMO:
http://jsfiddle.net/dreamweiver/GbaMx/22/
There were few things missing in your code, so i have just tuned it a bit.
Happy Coding :)
Try this:
html
<ul id="tabs">
<li><a id="link1" href="#">Link 1</a>
</li>
<li><a id="link2" href="#">Link 2</a>
</li>
</ul>
<div id="tabs-container">
<div id="content1" class="contents">Content for link 1. Should display only when Link 1 is clicked.</div>
<div id="content2" class="contents">Content for link 2. Should display only when Link 2 is clicked.</div>
</div>
<p>Unrelated text is here. Text in this area is static and should display at all times.</p>
<div id="tabs-container-2">
<div id="content1-2" class="contents">Additional content for link 1. Should display only when Link 1 is clicked.</div>
<div id="content2-2" class="contents">Additional content for link 2. Should display only when Link 2 is clicked.</div>
</div>
javascript
$( document ).ready(function() {
// hide tabs
$('.contents').hide();
$('#link1').click( function() {
$('#content1,#content1-2').show();
return false;
});
$('#link2').click( function() {
$('#content2,#content2-2').show();
return false;
});
});
see demo: http://jsfiddle.net/Magicianred/BV2kS/1/
Enjoy your code
It works you're only missing a class "tabs" in the content divs:
<ul id="tabs">
<li>Link 1
</li>
<li>Link 2
</li>
</ul>
<div id="tabs-container">
<div id="content1" class="tabs">Content for link 1. Should display only when Link 1 is clicked.</div>
<div id="content2" class="tabs">Content for link 2. Should display only when Link 2 is clicked.</div>
</div>
<p>Unrelated text is here. Text in this area is static and should display at all times.</p>
<div id="tabs-container-2">
<div id="content1-2" class="tabs">Additional content for link 1. Should display only when Link 1 is clicked.</div>
<div id="content2-2" class="tabs">Additional content for link 2. Should display only when Link 2 is clicked.</div>
</div>
DEMO

store the current tabs after postback

I am creating an application where i want to store the current value of tabs during postback. I want to store the current value of tab using hidden variable.
what i doing wrong?
This is my jquery code:
$(document).ready(function () {
$('ul.tabs').each(function () {
tab active.
$active.addClass('active');
$content.show();
e.preventDefault();
});
});
});
This my html Code:
<div class="container">
<ul class="tabs">
<li>Tab 1</li>
<li>Tab 2</li>
<li>Tab 3</li>
</ul>
<div id="tabs-1"> Content 1 </div>
<div id="tabs-2"> Content 2 </div>
<div id="tabs-3"> Content 3 </div>
</div>
I guess you are trying to append the tabs href to url, in that case use the following code rather than handling the click event on each tab.
$('.tabs').tabs({
activate: function(event, ui) {
window.location.href = window.location.href.toString().split('#')[0] + ui.newTab.find('a').attr('href');
}
});
If you postback from a control in one of the tabs, your server-side code will know what tab you came from, yes? If you want the postback to return to the same tab, set your hidden field's .Value to the appropriate index with the handler code, and have this in your jQuery ready function:
$("#tabs").tabs({ active: <%= hfLastTab.Value %> });

Adding a fadeOut to tabs

I'd like to add a fadeout to the tabs on my page here, if someone could help with the javascript side?
Here's the html:
<ul class="tabs clearfix">
<li class="aboutustab active" style="border-left:1px solid #ccc;"><div class="up"></div>About</li>
<li class="maptab"><div class="up"></div>Map</li>
<li class="featurestab"><div class="up"></div>Features</li>
<li class="voucherstab"><div class="up"></div>Offers</li>
</ul>
And the here's the javascript:
$(window).load(function(){
$('.tab:not(.aboutus)').hide();
$('.tabs li').click(function(){
var thisAd = $(this).parent().parent();
$(thisAd).children('.tab').hide();
$(thisAd).children('.'+$(this).attr('class').replace('tab','')).show();
$('.tabs li').removeClass('active');
$(this).addClass('active');
});
if(window.location.hash) {
if (window.location.hash == "#map") {
$(".Advert").children('.tab').hide();
$(".Advert").children('.map').show();
$('.tabs li').removeClass('active');
$('.maptab').addClass('active');
}
if (window.location.hash == "#voucher") {
$(".Advert").children('.tab').hide();
$(".Advert").children('.vouchers').show();
}
}
});
I have the bootstrap.js plugin from here and would like to use that, if anyone was familiar with that it'd be ideal.
Here's how I would like it to work.
Update: This is what I have now, but the fade effect is different for each tab almost - I like the transition back to the About Us tab which isn't as "heavy" as the transition of the others. The offers tab is leaving remnants of the 'Features' tab content too.
$(window).load(function(){
$('.tab:not(.aboutus)').fadeOut();
$('.tabs li').click(function(){
var thisAd = $(this).parent().parent();
$(thisAd).children('.tab').fadeOut();
$(thisAd).children('.'+$(this).attr('class').replace('tab','')).fadeIn();
$('.tabs li').removeClass('active');
$(this).addClass('active');
});
newContent.hide();
currentContent.fadeOut(750, function() {
newContent.fadeIn(500);
currentContent.removeClass('current-content');
newContent.addClass('current-content');
});
if(window.location.hash) {
if (window.location.hash == "#map") {
$(".Advert").children('.tab').fadeOut(750);
$(".Advert").children('.map').fadeIn(500);
$('.tabs li').removeClass('active');
$('.maptab').addClass('active');
}
if (window.location.hash == "#voucher") {
$(".Advert").children('.tab').fadeOut(750);
$(".Advert").children('.vouchers').fadeIn(500);
}
}
});
As you are already using jQuery its very simple... you need not go into that manipulation of code. JQuery UI has tabs widget.
http://jqueryui.com/tabs/#default
If you want to load content on Ajax
http://jqueryui.com/tabs/#ajax
Here is complete API..
http://api.jqueryui.com/tabs/#option-hide
DEMO
HTML Changes
<div id="tabs">
<ul>
<li>Nunc tincidunt</li>
<li>Proin dolor</li>
<li>Aenean lacinia</li>
</ul>
<div id="tabs-1">
<p>TAB 1</p>
</div>
<div id="tabs-2">
<p>TAB 2</p>
</div>
<div id="tabs-3">
<p>TAB 3</p>
</div>
</div>
Changed JavaScript
$(window).load(function () {
$("#tabs").tabs({
hide: {
effect: "fadeOut",
duration: 100
},
show: {
effect: "fadeIn",
duration: 100
}
});
});
In your code you can do following changes (assuming contents of all div available at page load time )
<div id="tabs">
<ul class="tabs clearfix">
<li class="aboutus tab active" style="border-left:1px solid #ccc;"><div class="up"></div>About</li>
<li class="map tab"><div class="up"></div>Map</li>
<li class="features tab"><div class="up"></div>Feature</li>
<li class="vouchers tab"><div class="up"></div><a href="#offers">Offers</li>
</ul>
<div id="about">
<p>about TAB 1</p>
</div>
<div id="map">
<p>MAP TAB 1</p>
</div>
<div id="features">
<p>features TAB 1</p>
</div>
<div id="offers">
<p>offers TAB 1</p>
</div>
</div>
And java script (remember you need to add jquery and jquery ui js and css)
$(window).load(function () {
$("#tabs").tabs({
hide: {
effect: "fadeOut",
duration: 100
},
show: {
effect: "fadeIn",
duration: 100
}
});
});
Try this:
$('.tabs li').click(function(){
var thisAd = $(this).parent().parent();
$('.tabs li').removeClass('active');
$(thisAd).children('.tab').fadeOut(250, function(){
$(thisAd).children('.'+$(this).attr('class').replace('tab','')).show();
$(this).addClass('active');
});
});
You can change the duration of 250 to whatever you want. All I'm doing is fading out the tab that is currently open before showing the new one in the fadeOut() callback.

Categories

Resources