I am working on tabs, every tab here points to the same <div>
<div id="tabs" ng-controller="tabsController">
<ul>
<li ng-repeat="tab in tabsList">
{{tab.title}}
</li>
</ul>
<div id="tabs-1" ng-controller="someController">
<div ng-controller="childOfSomeController">
</div>
On Selection of every tab, i want all the controllers to reload again, Is it possible in angularjs?
Related
I need to completely destroy Bootstrap tabs. The original markup from Bootstrap docs:
<div>
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active">Home</li>
<li role="presentation">Profile</li>
<li role="presentation">Messages</li>
<li role="presentation">Settings</li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="home">...</div>
<div role="tabpanel" class="tab-pane" id="profile">...</div>
<div role="tabpanel" class="tab-pane" id="messages">...</div>
<div role="tabpanel" class="tab-pane" id="settings">...</div>
</div>
</div>
Desired markup after complete destroy is something like this:
<div>
<ul>
<li class="active">Home</li>
<li>Profile</li>
<li>Messages</li>
<li>Settings</li>
</ul>
<div>
<div class="active" id="home">...</div>
<div id="profile">...</div>
<div id="messages">...</div>
<div id="settings">...</div>
</div>
</div>
So the goal is to remove all the Bootstrap classes, listeners, etc. Is there a function/method in Bootstrap 3 for that?
Btw, please I am not looking for "solution" like $.removeClass('.nav, .nav-tabs, .tab-pane','#bla'); & $.removeAttr('role','#bla'); etc.
There is no JS function in Bootstrap 3 that does what you want. Checkout their docs http://getbootstrap.com/javascript/. Are you just trying to remove the attributes from the DOM with client-side JavaScript, or permanently change the HTML on the server?
Either way, it sounds like you will need to write some custom code to accomplish your goal, since it is not something commonly done.
I use KendoTabStrip and KendoGrid to create my page. There're several tabs in my TabStrip, each tab's content is a grid. I put each grids in a separate html file and use contentUrl to load them, like this
http://demos.telerik.com/kendo-ui/tabstrip/ajax
But it looks like if I bind angular controller in each files doesn't work. The code for tab content looks like this:
<div class="k-content" ng-controller="testCtrl">
<div class="data-grid" id="testGrid">
</div>
</div>
The controller seems doesn't been binded. Anyone can help?
Try this
<div ng-controller="MyCtrl">
<div kendo-tab-strip k-content-urls="[ null, null]">
<!-- tab list -->
<ul>
<li class="k-state-active">First tab</li>
<li>Second tab</li>
</ul>
<div style="padding: 1em">
This is the first tab
</div>
<div style="padding: 1em">
This is the second tab
</div>
</div>
</div>
I want bootstrap to show several elements inside tab header button, currently it breaks into multiple buttons...
Consider example jsFiddle:
<ul class="nav nav-tabs">
<li class="allmembers">
The first
tab
</li>
<li class="additional">
The second
tab
</li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div class="tab-pane active" id="allmembers">
Content
<p> next</p>
</div>
<div class="tab-pane" id="additional">
Content 2
</div>
</div>
In example above it would show four tabs instead of two, but I need bootstrap to be able to render complex html, something like:
<ul class="nav nav-tabs">
<li class="all members">
<div>
Any type of content displayed inline here
The first
tab
</div>
</li>
<li class="additional">
<div>
Any type of content displayed inline here
The second
tab
</div>
</li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div class="tab-pane active" id="allmembers">
Content
<p> next</p>
</div>
<div class="tab-pane" id="additional">
Content 2
</div>
</div>
How can
You can use all inline elements inside a tab header, you just need to wrap them inside an anchor, like this:
<a href="#additional" data-toggle="tab">
The second <br/>
Any type of content displayed inline here <br/>
<span>Span</span>
</a>
The reason is that bootstrap style for panel header is placed on anchor, if you need more complex structures you might need to change bootstrap and place the styles on li instead.
your demo: http://jsfiddle.net/zd1368yu/3/
i have 3 tabs place on my website
tab 1| tab 2 | tab 3
i am using jquery for the functionality of these tabs, however it is not working, the page shows only tab 1 details when i click on any other tab it doesn't get loaded
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<script>
$(function() {
$( ".tabs" ).tabs();
});
</script>
<div class="tabs" ">
<ul>
<li data-tab="tab 1" class="active" ga-action="tab 1 Tab" ga-label="">tab 1</li>
<li data-tab="tab 2" class="" ga-action="tab 2 Tab" ga-label="">tab 2</li>
<li data-tab='tab 3' class=''>tab 3</li>
</ul>
<div id="tab 1" class="tab active">
<p> Written Material one </p>
</div>
<div id="tab 2" class="tab">
<p> Written Material two </p>
</div>
<div id="tab 3" class="tab">
<p> Written Material three </p>
</div>
</div>
Can anyone tell me how can i make the tabs work
There are several errors in the code you've posted:
There's an orphaned double quote " in the top-level div. That's invalid HTML
Your <li>s don't include any buttons/links. The tabs widget expects to have an <a> element within the li, with which to take the user to the corresponding tab
Your content div's id attributes contain spaces. That's invalid HTML.
To fix these change:
<div class="tabs">
...
<li data-tab="tab-1" class="active" ga-action="tab 1 Tab" ga-label="">
tab 1
</li>
...
<div id="tab-1" class="tab active">
...
Here's a working fiddle example: http://jsfiddle.net/9uvmktb8/
That's all the apparent problems, if it's still not working I'd look for the problem in omitted code. Let me know if this isn't the functionality wanted (as the question is a little unclear)
Currently your are not telling your li elements where to go when clicked.
You can try the below code
<div class="tabs">
<ul>
<li class="active">tab 1</li>
<li class="">tab 2</li>
<li class=''>tab 3</li>
</ul>
<div id="tabs-1" class="tab active">
<p> Written Material one </p>
</div>
<div id="tabs-2" class="tab">
<p> Written Material two </p>
</div>
<div id="tabs-3" class="tab">
<p> Written Material three </p>
</div>
</div>
In the above code, with the help of a link we can tell that on click which tab to display.
how can I make the tabs responsive by using foundation framework?
I am getting the output like this in the responsive window:
<ul class="tabs" data-tab role="tablist">
<li class="tab-title active" role="presentational" >Tab 1</li>
<li class="tab-title" role="presentational" >Tab 2</li>
<li class="tab-title" role="presentational">Tab 3</li>
<li class="tab-title" role="presentational" >Tab 4</li>
</ul>
<div class="tabs-content">
<section role="tabpanel" aria-hidden="false" class="content active" id="panel2-1">
<h2>First panel content goes here...</h2>
</section>
<section role="tabpanel" aria-hidden="true" class="content" id="panel2-2">
<h2>Second panel content goes here...</h2>
</section>
<section role="tabpanel" aria-hidden="true" class="content" id="panel2-3">
<h2>Third panel content goes here...</h2>
</section>
<section role="tabpanel" aria-hidden="true" class="content" id="panel2-4">
<h2>Fourth panel content goes here...</h2>
</section>
</div>
If you may, please provide a link (or publish your work online) for a better response.
Have you read the docs yet?
Zurb Accordion
Zurb Tabs
If you look closer, there is an example on both pages. According to your screenshot, the responsive foundation 5 tabs look exactly how they should. Also, consider doing a web search for "responsive bookmarklet tools" for results that can help a-bit more than Chrome's inspector or FF's Firebug.
Replace your code with this snippet, and along the way, replace with the content you need - one tab at-a-time:
<dl class="tabs" data-tab>
<dd class="active">Tab 1</dd>
<dd>Tab 2</dd>
<dd>Tab 3</dd>
</dl>
<div class="tabs-content">
<div class="content active" id="panel1">
<p>This is the first panel of the basic tab example. This is the first panel of the basic tab example.</p>
</div>
<div class="content" id="panel2">
<p>This is the second panel of the basic tab example. This is the second panel of the basic tab example.</p>
</div>
<div class="content" id="panel3">
<p>This is the third panel of the basic tab example. This is the third panel of the basic tab example.</p>
</div>
</div>