I have this bootstrap nav tab.
<div ng-app="myApp" ng-controller="myCtrl">
<div class="breadcrumb">
<ul class="nav nav-tabs">
<li class="active">Submitted</li>
<li>Pending Approval</li>
<li>Work In Progress</li>
<li>Complete</li>
</ul>
</div>
<div class="tab-content" style="margin:5%;">
<div class="tab-pane active" id="submitted" ng-class="{'active':dataStatus=='submitted'}">
Submitted data will be displayed here....
</div>
<div class="tab-pane" id="pendingApproval" ng-class="{'active':dataStatus=='pending'}">
Pending Approvals will be displayed here....
</div>
<div class="tab-pane" id="workInProgress" ng-class="{'active':dataStatus=='inprogress'}">
In Progress data will be displayed here....
</div>
<div class="tab-pane" id="complete" ng-class="{'active':dataStatus=='completed'}">
Completed data will be displayed here....
</div>
</div>
</div>
here I am getting different status in dataStatus variable,based on that am adding active class to a tab.
My Query is If I get pending in dataStatus ,tabs should be disabled after pending tab I can access submitted and pending tab.I should can access in progress and completed tab.
Same as all status. I should access only the previous tabs based on status.how can I do it?Any help?Thanks!!
fiddle : https://jsfiddle.net/70Luf7hu/76/
You can use a separate class for disabling the li element and add conditions/expressions as per your requirement in the ng-class. Below is the jsfiddle link
fiddle : https://jsfiddle.net/anilsarkar/9xf5neyz/17/
.disabled {
pointer-events:none;
opacity:0.6;
}
<ul class="nav nav-tabs">
<li class="active">Submitted</li>
<li ng-class="{'disabled':dataStatus=='submitted'}">Pending Approval</li>
<li ng-class="{'disabled':dataStatus=='submitted' || dataStatus=='pending'}">Work In Progress</li>
<li ng-class="{'disabled':dataStatus=='submitted' || dataStatus=='pending' || dataStatus=='inprogress'}">Complete</li>
</ul>
Note: I have added a disabled class to disable the li element
Related
I have a set of 4 tabs which display content under a main header. Currently i can only show the same header in all tabs as they sit below the header.
Each one is linked by a ID which displays the tabs content. How can i make the background on the header change with Jquery when the link is clicked?
my code is below.
<div class="my-header">
</div>
<div class="wrapper">
<ul class="tab-list">
<li class="tab-title"> Tab 1 </li>
<li class="tab-title">Tab 2 </li>
<li class="tab-title">Tab 3 </li>
<li class="tab-title">Tab 4 </li>
</ul>
<div class="content-1"></div>
<div class="content-2"></div>
<div class="content-3"></div>
<div class="content-4"></div>
</div>
you need something like this:
$('#clickMe').on('click', function() {
$('#changeMe').css('background-image', 'url(http://placehold.it/200x200/ff0000)');
})
There is a dynamic generate page using jquery like this:
var html = "tab...button..datatable...etc...";
And I generate the page when click on a button
$("btn").on("click",function(){
$("body").append(html);
});
The problem is , all element from generated html does not have event listener, so for the click button /change event I use
$('body').on('change', '.gui-file', function (event) {
However, for the bootstrap element how can I bind the event to the generated element ? e.g. Tab?
Or are there any better way other than binding after generate the html content? Thanks
The tab:
<div class="tab-block mb10">
<ul class="nav nav-tabs nav-tabs-left tabs-border">
<li class="active">
English
</li>
<li class="">
繁體
</li>
<li class="">
简体
</li>
</ul>
<div class="tab-content">
<div id="tab1_1" class="tab-pane active">
</div>
<div id="tab1_2" class="tab-pane">
</div>
<div id="tab1_3" class="tab-pane">
</div>
</div>
Can you please init newly added tab by calling:
$("btn").on("click",function(){
$("body").append(html);
$(".nav-tabs").tab();
});
Basically I'm trying to create a "wizard" via bootstrap where the active tab changes when the "continue" button is clicked. I've managed to come up with the following code:
<div id="rootwizard">
<div class="navbar">
<div class="navbar-inner">
<div class="container">
<ul class="nav nav-pills">
<li class="active">Step 1</li>
<li>Step 2</li>
<li>Step 3</li>
</ul>
</div>
</div>
</div>
<div class="tab-content">
<div class="tab-pane" id="step1">
<a class="btn" href="#step2" data-toggle="tab">Continue</a>
</div>
<div class="tab-pane" id="step2">
Step 2
<a class="btn" href="#step3" data-toggle="tab">Continue</a>
</div>
<div class="tab-pane" id="step3">
Step 3
</div>
</div>
</div>
Right now it works fine when I click the nav pills themselves (the content changes and the active pill changes too).
However when I click the individual continue button the content changes but the active nav pill does not change.
Why doesn't the active class change like when I click the pill itself?
Here's a jsFiddle with the code:
http://jsfiddle.net/MvY4x/5/
Just found this much more elegant solution...
$('ul.nav.nav-pills li a').click(function() {
$(this).parent().addClass('active').siblings().removeClass('active');
});
from: http://info.michael-simons.eu/2012/07/30/twitter-bootstrap-make-the-default-pills-more-usable/
You could use jQuery to activate the next tab and it's content. Give all of your continue buttons a class like 'continue' and then you can do something like this..
$('.continue').click(function(){
var nextId = $(this).parents('.tab-pane').next().attr("id");
$('[href=#'+nextId+']').tab('show');
})
Demo on Bootply: http://bootply.com/112163
you could add Ids to the pills (step1tab, etc) and then make a function a function like this:
function switchPill(a,b){
$("#step"+a+"tab").removeClass("active");
$("#step"+b+"tab").addClass("active");
}
and add this to the anchor tag of the text:
onClick="switchPill(2,3)"
I hacked this fiddle: http://jsfiddle.net/MvY4x/7/
$('div.tab-content a[data-toggle]').on('click', function ()
{
var that = $(this),
link = that.attr('href');
$('a[href="' + link + '"]').not(that).trigger('click');
});
Really a bad ass hack, needs improvement but may give an idea...
I am trying to use bootstrap to create a dropdown toggle that allows the user to hide/unhide certain div sections. The code is seen below:
<div class="tabbable">
<div class="btn-toolbar">
<div class="btn-group">
<a class="btn dropdown-toggle input-large" data-toggle="dropdown" href="#">
Select an Area by:
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li class="active"><a data-toggle="tab" href="#Parish">Parish</a></li>
<li><a data-toggle="tab" href="#Area">MLS Area</a></li>
<li><a data-toggle="tab" href="#City">City</a></li>
<li><a data-toggle="tab" href="#Zip">Zip</a></li>
</ul>
</div> <!-- /btn-group -->
</div> <!-- /btn-toolbar -->
<div class="tab-content">
<div class="tab-pane active" id="Parish">
Parish
</div>
<div class="tab-pane" id="Area">
Area
</div>
<div class="tab-pane" id="City">
City
</div>
<div class="tab-pane" id="Zip">
Zip
</div>
</div>
It works (kind of), except for the fact that after selecting an option the first time, it never toggles off after selecting a new item. It also does not allow me to go back to an item that has already been selected. I have searched everywhere and used the web console in Firefox to debug, but do not see what the problem is. This happens in Chrome and IE too.
I have created a Bootstrap snippet that demonstrates the behavior here: http://bootply.com/102355
I would appreciate any help. Am I trying to do something with bootstrap that just can't be done yet?
I don't know if you've solved this, but here it is how I would do it using jQuery (I don't know bootstrap):
$('.dropdown-menu li a').click(function(){
DeselectCurrent();
});
var DeselectCurrent = function() {
jQuery('.dropdown-menu li').each(function(){
var attr = jQuery(this).attr('class');
if (typeof attr !== 'undefined' && attr !== false) {
jQuery(this).removeClass("active");
}
});
};
Here it's a working example: http://bootply.com/102465
By the way, in my example I named my function DeselectCurrent... It would make more sense if you named it DeselectPrevious.
Just a side note, I don't see in your markup an id with a value of myTab (like you are referencing it here $('#myTab a').click(function (e)) but I am assuming that's how you target your tabs in twitter-bootstrap...
Hope this helps.
I have an Isotope filter menu and I'm using hash history so the filters are still set if a user comes back to the page. Because we are using .slideDown to expand sub-menu items, the sub-menu items are hidden when you come back to the page even though some filters within them are selected.
I'm trying to use:
if ($('#option1').hasClass('.selected')) {
$('.level-two').slideDown('fast');
}
However, since the class "selected" is being generated by the jQuery filter (Isotope), it's being ignored.
Fiddle: http://jsfiddle.net/RevConcept/swT84/
HTML:
<nav>
<div id="options" class="combo-filters">
<div class="option-combo location">
<ul class="filter option-set group level-one" data-filter-group="location">
<li class="hidden">any</li>
<li><a id="option1" href="#filter-location-exterior" data-filter-value=".exterior" class="trigger-two">exterior</a></li>
<li><a id="option2" href="#filter-location-interior" data-filter-value=".interior" class="trigger-two">interior</a></li>
</ul>
</div>
<div class="option-combo illumination">
<ul class="filter option-set group level-two" data-filter-group="illumination">
<li class="hidden">any</li>
<li>illuminated</li>
<li>non-illuminated</li>
</ul>
</div>
<div class="option-combo mount">
<ul class="filter option-set group level-three" data-filter-group="mount">
<li class="hidden">any</li>
<li>wall</li>
<li>ground</li>
</ul>
</div>
</div><!--end options-->
</nav>
CSS:
header nav ul.level-two, header nav ul.level-three {
display:none;
}
JavaScript:
$(function(){
$('.level-one').hide().fadeIn('fast');
});
$(".trigger-two").one('click', function(){
$(".level-two").slideDown('fast');
});
$(".trigger-three").one('click', function(){
$(".level-three").slideDown('fast');
});
if ($('#option1').is('selected')) {
$('.level-two').slideDown('fast');
}
I guess you are missing a '.'
if ($('#option1').is('.selected')) {
$('.level-two').slideDown('fast');
}
Rather than copy the same process of each click with a repeated function you could always programatically trigger the clicks on the .selected anchors.
$('.option-combo a.selected').trigger('click');
A fiddle: http://jsfiddle.net/jgkwd/