cercando di implementare un pulsante 'successivo' usando twitter bootstrap-tabs.js

Question

Sto usando il bootstrap di Twitter e ho implementato le schede di base per alcune schermate di aiuto usando bootstrap-tabs.js. Sono stato sorpreso di non aver trovato alcuna documentazione su come creare un pulsante 'successivo'. Mi piacerebbe creare un pulsante 'successivo' separato per scorrere tutte le schede (ad es. $ ('# Next_tour'), ​​sotto). Qualche idea su come implementare il javascript per questo?

da parte/commento: ho notato anche che gli identificatori di frammenti non sono stati aggiunti all'URL con la soluzione di bootstrap, il che potrebbe anche essere piacevole. (Per questa funzione è mi fa considerare questo:. http://flowplayer.org/tools/demos/tabs/ajax-history.html invece, ma sono indeciso in questo momento)

<div class="span11 columns"> 
    <div class="row"> 
      <div id="my-tab-content" class="tab-content"> 
      <div class="active tab-pane" id="home"> 
       <p>Raw denim</p> 
      </div> 
      <div class="tab-pane" id="sensors"> 
       <p>Food truck.</p> 
      </div> 
      <div class="tab-pane" id="encouragment"> 
       <p>Banksy.</p> 
      </div> 
      <div class="tab-pane" id="teammates"> 
       <p>biodiesel.</p> 
      </div> 
      <div class="tab-pane" id="privacy"> 
       <p>mollit.</p> 
      </div> 
      </div> 
</div> 
</div>  
<div class="span1 columns offset11"> 
    <div class="row"> 
     <a id="next_tour" class="button_blue" href="">Next</a> 
    </div> 
</div> 

Answer 1

la risposta è qui http://twitter.github.com/bootstrap/javascript.html#tabs ma cercare il codice qui sotto

<ul id="myTab" class="nav nav-tabs"> 
    <li class="active"><a href="#tab1" data-toggle="tab">Tab 1</a></li> 
    <li><a href="#tab2" data-toggle="tab">Tab 2</a></li> 
    <li><a href="#tab3" data-toggle="tab">Tab 3</a></li> 
    <li><a href="#tab4" data-toggle="tab">Tab 4</a></li> 
</ul> 
<div id="myTabContent" class="tab-content"> 
    <div class="tab-pane fade in active" id="tab1"> 
     <p>This is content of Tab 1</p> 
    </div> 
    <div class="tab-pane fade" id="tab2"> 
     <p>This is content of Tab 2</p> 
    </div> 
    <div class="tab-pane fade" id="tab3"> 
     <p>This is content of Tab 3</p> 
    </div> 
    <div class="tab-pane fade" id="tab4"> 
     <p>This is content of Tab 4</p> 
    </div> 
</div> 
<div> 
    <a href="javascript:tabPrev();" class="btn">&lsaquo; Prev</a> 
    <a href="javascript:tabNext();" class="btn">Next &rsaquo;</a> 
</div> 
<script> 
var myTab, myTabsActive, tabNext, tabPrev; 
$(function() { 
    myTabs = $('#myTab li').length; 
    myTabsActive = 0; //or yours active tab 

    tabNext = function() { 
     var index = myTabsActive + 1; 
     index = index >= myTabs ? 0 : index; 

     $('#myTab li:eq(' + index + ') a').tab('show'); 
     myTabsActive = index; 
    } 

    tabPrev = function() { 
     var index = myTabsActive - 1; 
     index = index < 0 ? myTabs - 1 : index; 

     $('#myTab li:eq(' + index + ') a').tab('show'); 
     myTabsActive = index; 
    } 
}); 
</script> 

Answer 2

Ecco cosa Sono arrivato, è possibile modificare gli unici due selettori (a[data-toggle="tab"], ._tabs_navigation) per specificare quali pulsanti cambiano le schede se si dispone di più di un set:

$(document).ready(function() { 
    var tabIndex; 
    var tabs = $('a[data-toggle="tab"]'); 

    tabs.on('shown', function(e) { 
     tabIndex = $(e.target).closest('li').index(); 
    }).eq(0).trigger('shown'); 

    $('._tabs_navigation').on('click', 'a', function() { 
     var index = tabIndex + ($(this).index() ? 1 : -1); 
     if (index >= 0 && index < tabs.length) { 
      tabs.eq(index).tab('show'); 
     } 
     return false; 
    }); 
})​ 

Markup per i pulsanti, solo la classe _tabs_navigation è importante:

<div class="btn-toolbar clearfix"> 
    <div class="btn-group pull-left _tabs_navigation" data-toggle="buttons-radio"> 
     <a class="btn btn-small btn-info" href="#"> 
      <i class="icon-arrow-left icon-white"></i> 
     </a> 
     <a class="btn btn-small btn-info" href="#"> 
      <i class="icon-arrow-right icon-white"></i> 
     </a> 
    </div> 
</div> 

esempio di lavoro: http://jsfiddle.net/gEn8f/2/

Answer 3

mio variante per Bootstrap 3.0 (solo Avanti):

<ul class="nav nav-tabs" id="myTab"> 
    <li class="active"><a href="#base" data-toggle="tab">Base tab</a></li> 
    <li><a href="#step2" data-toggle="tab">tab2</a></li> 
    <li><a href="#step3" data-toggle="tab">tab3</a></li> 
</ul> 
<div class="tab-content"> 
    <div class="tab-pane fade in active" id="base"> 
     <p>This is content of Tab 1</p> 
     <a href="#step2" onclick="javascript:tabNext(this);">Next &rarr;</a> 
    </div> 
    <div class="tab-pane fade" id="tab2"> 
     <p>This is content of Tab 2</p> 
     <a href="#step3" onclick="javascript:tabNext(this);">Next &rarr;</a> 
    </div> 
    <div class="tab-pane fade" id="tab3"> 
     <p>This is content of Tab 3</p> 
    </div> 
</div> 
<script> 
$(document).ready(function() { 
    $('#myTab a').click(function (e) { 
     e.preventDefault(); 
     $(this).tab('show'); 
    }) 
    tabNext = function(e) { 
     var nextTab = $(e).attr('href'); 
     $('#myTab a[href="' + nextTab + '"]').tab('show'); 
    } 
}) 
</script>