CODEWITHSUNDEEP
jquerytwittertabstwitter-bootstrap
Confidence
Confidence

Reputation: 2303

twitter bootstrap tabs: loading a link

now form what i have seen in the documentary of twitter bootstrap tabs, the a href points to a specific ID with the tab content, like this

<ul class="nav nav-tabs" id="myTab">
        <li class="active"><a href="#info">Information</a>
        </li>
        <li ><a href="#friends">Friends</a>
        </li>
</ul>

But what if i want to load a link inside the tab, like this, how can i do this with jquery? 

<ul class="nav nav-tabs" id="myTab">
        <li class="active"><a href="http://www.mysite.com/info">Information</a>
        </li>
        <li ><a href="http://www.mysite.com/friends">Friends</a>
        </li>
</ul>

also i used search here but was not lucky to find what i needed...maybe if someone has a proper linke i would appreciate it to answer my question :)

Upvotes: 2

Views: 4515

Answers (3)

mesut
mesut

Reputation: 2177

For lazyloading content of extrenal link into the tab, when tab is clicked, use my plugin.

https://github.com/mesuttalebi/MT.BootstrapTabsLazyloader.js

https://www.nuget.org/packages/MT.BootstrapTabsLazyLoader.js/

This package adds lazyloading option to bootstrap tabs, so every tab's content will load when the user clicks it.

1- Add a reference to /Scripts/MT.BootstrapTabsLazyLoader.js to the scripts part of your code, after jquery.js and bootstrap.js

2- add class .lazyload to nav-tabs (bootstrap tabs ul tag)

3- add data-url to the anchor tag of every tab you want to lazyload. this attribute will contain the url of partial pages you want to load it into the tab. Example

<!-- Nav tabs -->
<ul class="nav nav-tabs lazyload">
    <li class="active"><a href="#fullDesc" data-toggle="tab">Description</a></li>
    <li><a href="#specificationDetails" data-toggle="tab">Specifications</a></li>
    <li><a href="#relatedProducts" data-toggle="tab" data-url="@Url.Action("relatedproducts", new { model.product.id})">Related Products</a></li>
    <li><a href="#files" data-toggle="tab" data-url="@Url.Action("getproductfiles", new { model.product.id })">Product Files</a></li>
    <li><a href="#videos" data-toggle="tab" data-url="@Url.Action("getproductvideos", new { model.product.id })">Product Videos</a></li>
</ul>

UPDATE: This package Updated, Use Current Links:

https://github.com/mesuttalebi/MT.BootstrapLazyloader.js

https://www.nuget.org/packages/MT.BootstrapLazyLoader.js/

Upvotes: 1

technoTarek
technoTarek

Reputation: 3218

You might be interested in my sample of how you can "lazy-load" content from an external source into a Twitter Boostrap tab.

The fiddle is here: http://jsfiddle.net/technotarek/YbT7r/

The code looks like this:

$('#myTabs').bind('show', function(e) {  
    paneID = $(e.target).attr('href');
    src = $(paneID).attr('data-src');
    // if the iframe hasn't already been loaded once
    if($(paneID+" iframe").attr("src")=="")
    {
        $(paneID+" iframe").attr("src",src);
    }
});

Upvotes: 0

jassinm
jassinm

Reputation: 7491

If you plan on loading a specific link and not have the full content embedded in the site, just do this on the server side and generate the appropriate html of each tab by setting the class to active. The rest is just css

have a look at this: https://github.com/twitter/bootstrap/issues/814

If you plan to tab to a different site (not server) then i would have the server generate a seamless iframe referencing that site

Upvotes: 1

Related Questions