The official home of the Python Programming Language: Bootstrap Tab Plugin

Bootstrap Tab Plugin

Tabs were introduced in the chapter Bootstrap Navigation Elements. By combining a few data attributes, you can easily create a tabbed interface. With this plugin you can transition through panes of local content in tabs or pills, even via dropdown menus.

If you want to include this plugin functionality individually, then you will need tab.js. Else, as mentioned in the chapter Bootstrap Plugins Overview, you can include bootstrap.js or the minified bootstrap.min.js.

Usage

You can enable tabbable tabs in the following two ways:

Via data attributes: you need to adddata-toggle="tab" or data-toggle="pill"to the anchors.

Adding the nav and nav-tabs classes to the tab ul will apply the Bootstrap tab styling, while adding thenav and nav-pills classes will apply pill styling.

...

</ul>

Via JavaScript: you can enable tabs usingJavscript as below :

$('#myTab a').click(function (e) {

e.preventDefault()

$(this).tab('show')

})

Here’s an example of different ways to activate individual tabs:

// Select tab by name

$('#myTaba[href="#profile"]').tab('show')

// Select first tab

$('#myTab a:first').tab('show')

// Select last tab

$('#myTab a:last').tab('show')

// Select third tab (0-indexed)

$('#myTab li:eq(2) a').tab('show')

Fade effect

To get a fade effect for tabs, add .fade to each.tab-pane. The first tab pane must also have .into properly fade in initial content:

</div>

Example

An example of tab plugin using data attributes and fade effect is as shown in the following example:

Tutorial Point Home

</a>

</li>

<a href="#" id="myTabDrop1" class="dropdown-toggle"

data-toggle="dropdown">Java

</a>

<li><a href="#jmeter"tabindex="-1" data-toggle="tab">jmeter</a></li>

</ul>

</li>

</ul>

<p>Tutorials Point is a place for beginners in all technical areas.

This website covers most of the latest technoligies and explains

each of the technology with simple examples. You also have a

<b>tryit</b> editor, wherein you can edit your code and

try out different possibilities of the examples.</p>

</div>

<p>iOS is a mobile operating system developed and distributed by Apple

Inc. Originally released in 2007 for the iPhone, iPod Touch, and

Apple TV. iOS is derived from OS X, with which it shares the

Darwin foundation. iOS is Apple's mobile version of the

OS X operating system used on Apple computers.</p>

</div>

<p>jMeter is an Open Source testing software. It is 100% pure

Java application for load and performance testing.</p>

</div>

<p>Enterprise Java Beans (EJB) is a development architecture

for building highly scalable and robust enterprise level

applications to be deployed on J2EE compliant

Application Server such as JBOSS, Web Logic etc.

</p>

</div>

Methods

.$().tab: This method activates a tab element and content container. Tab should have either adata-target or an href targeting a container node in the DOM.

.....

</ul>

.....

</div>

$(function () {

$('#myTab a:last').tab('show')

})

</script>

Example

The following example shows use of tab plugin method .tab. Here in the example the second tabiOS is activated:

Tutorial Point Home</a>

</li>

<a href="#" id="myTabDrop1" class="dropdown-toggle"

data-toggle="dropdown">Java <b class="caret"></b>

</a>

jmeter</a>

</li>

ejb</a>

</li>

</ul>

</li>

</ul>

<p>Tutorials Point is a place for beginners in all technical areas.

This website covers most of the latest technoligies and explains

each of the technology with simple examples. You also have a

<b>tryit</b> editor, wherein you can edit your code and

try out different possibilities of the examples.</p>

</div>

<p>iOS is a mobile operating system developed and distributed by Apple

Inc. Originally released in 2007 for the iPhone, iPod Touch, and

Apple TV. iOS is derived from OS X, with which it shares the

Darwin foundation. iOS is Apple's mobile version of the

OS X operating system used on Apple computers.</p>

</div>

<p>jMeter is an Open Source testing software. It is 100% pure

Java application for load and performance testing.</p>

</div>

<p>Enterprise Java Beans (EJB) is a development architecture

for building highly scalable and robust enterprise level

applications to be deployed on J2EE compliant

Application Server such as JBOSS, Web Logic etc.

</p>

</div>

$(function () {

$('#myTab li:eq(1) a').tab('show');

});

</script>

Events

Following table lists the events to work with tab plugin. This event may be used to hook into the function.

Event

Description

Example

show.bs.tab

This event fires on tab show, but before the new tab has been shown. Useevent.target andevent.relatedTargetto target the active tab and the previous active tab (if available) respectively.

$('a[data-toggle="tab"]').on('show.bs.tab', function (e) {

e.target // activated tab

e.relatedTarget // previous tab

})

shown.bs.tab

This event fires on tab show after a tab has been shown. Useevent.target andevent.relatedTargetto target the active tab and the previous active tab (if available) respectively.

$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {

e.target // activated tab

e.relatedTarget // previous tab

})

Example

The following example shows use of tab plugin events. Here in the example we will display the current and previous visited tabs:

<hr>

<p class="active-tab"><strong>Active Tab</strong>: <span></span></p>

<p class="previous-tab"><strong>Previous Tab</strong>: <span></span></p>

<hr>

Tutorial Point Home</a></li>

<a href="#" id="myTabDrop1" class="dropdown-toggle"

data-toggle="dropdown">

Java <b class="caret"></b></a>

<li><a href="#jmeter"tabindex="-1" data-toggle="tab">jmeter</a></li>

</ul>

</li>

</ul>

<p>Tutorials Point is a place for beginners in all technical areas.

This website covers most of the latest technoligies and explains

each of the technology with simple examples. You also have a

<b>tryit</b> editor, wherein you can edit your code and

try out different possibilities of the examples.</p>

</div>

<p>iOS is a mobile operating system developed and distributed by Apple

Inc. Originally released in 2007 for the iPhone, iPod Touch, and

Apple TV. iOS is derived from OS X, with which it shares the

Darwin foundation. iOS is Apple's mobile version of the

OS X operating system used on Apple computers.</p>

</div>

<p>jMeter is an Open Source testing software. It is 100% pure

Java application for load and performance testing.</p>

</div>

<p>Enterprise Java Beans (EJB) is a development architecture

for building highly scalable and robust enterprise level

applications to be deployed on J2EE compliant

Application Server such as JBOSS, Web Logic etc.

</p>

</div>

$(function(){

$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {

// Get the name of active tab

var activeTab = $(e.target).text();

// Get the name of previous tab

var previousTab = $(e.relatedTarget).text();

$(".active-tab span").html(activeTab);

$(".previous-tab span").html(previousTab);

});

</script>

The official home of the Python Programming Language

Bootstrap Tab Plugin

ليست هناك تعليقات:

إرسال تعليق