web-dev-qa-db-fra.com

Comment faire avec Twitter des onglets de bootstrap au survol au lieu de cliquer?

J'ai enfin réussi à utiliser les onglets Bootstrap. Je me demandais s'il y avait un moyen de changer le comportement afin qu'au lieu de cliquer simplement sur le curseur de la souris, le contenu masqué serait affiché.

tabshovertwitter-bootstrap
16
Pablo Olmos de Aguilera C.

Dans votre $(document).ready ou ailleurs ...

mettre quelque chose comme ça:

$('.nav-tabs > li > a').hover(function() {
  $(this).tab('show');
});

Vous ne devrez pas modifier le code d'amorçage principal.

De plus, vous pouvez faire ceci:

$('.nav-tabs > li ').hover(function() {
  if ($(this).hasClass('hoverblock'))
    return;
  else
    $(this).find('a').tab('show');
});

$('.nav-tabs > li').find('a').click(function() {
  $(this).parent()
    .siblings().addClass('hoverblock');
});

Ce qui empêchera la sélection du survol après le premier clic d'un utilisateur sur un onglet.

26
Neuralrank

Il est préférable de lier un gestionnaire sur l'objet document afin qu'il fonctionne également avec les onglets générés de manière dynamique:

$(document).on('mouseenter', '[data-toggle="tab"]', function () {
  $(this).tab('show');
});

Il existe également un petit plugin Bootstrap qui automatiquement active les onglets en survol: https://github.com/tonystar/bootstrap-hover-tabs .

Le code HTML complet utilisant ce plugin est:

body { padding: 2rem; }
.tab-content { margin-top: 1.5rem; }
<link href="//cdnjs.cloudflare.com/ajax/libs/Twitter-bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>

<!-- Nav pills -->
<ul class="nav nav-pills">
  <li class="active"><a href="#tab-1" data-toggle="tab">Tab 1</a></li>
  <li><a href="#tab-2" data-toggle="tab">Tab 2</a></li>
  <li><a href="#tab-3" data-toggle="tab">Tab 3</a></li>
  <li><a href="#tab-4" data-toggle="tab">Tab 4</a></li>
</ul>

<!-- Tab panes -->
<div class="tab-content well">
  <div class="tab-pane active" id="tab-1">Content 1</div>
  <div class="tab-pane" id="tab-2">Content 2</div>
  <div class="tab-pane" id="tab-3">Content 3</div>
  <div class="tab-pane" id="tab-4">Content 4</div>
</div>

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/Twitter-bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="//cdn.rawgit.com/tonystar/bootstrap-hover-tabs/v3.1.1/bootstrap-hover-tabs.js"></script>

10
tonystar

JavaScript:

Dans votre $ (document) .ready ou ailleurs ...
a mis quelque chose comme ceci:

$('.nav-tabs[data-toggle="tab-hover"] > li > a').hover( function(){
    $(this).tab('show');
});

HTML: 

<ul class="nav nav-tabs" data-toggle="tab-hover">
    ....
</ul>
2
miclle

Modifiez bootstrap.js (ou boostrap-tab.js si vous n'utilisez pas le fichier complet bootstrap.js)

Où tu vois:

 /* TAB DATA-API
  * ============ */

  $(function () {
    $('body').on('click.tab.data-api', '[data-toggle="tab"], [data-toggle="pill"]', function (e) {
      e.preventDefault()
      $(this).tab('show')
    })
  })

changer le 'click.tab.data-api' en 'hover.tab.data-api'

Note: J'ai testé cela avec Bootstrap v2.0.2

1
kendaleiv

j'espère que c'est une bonne solution

(function ($) {
  $(function () {
    $(document).off('click.bs.tab.data-api', '[data-hover="tab"]');
    $(document).on('mouseenter.bs.tab.data-api', '[data-toggle="tab"], [data-hover="tab"]', function () {
      $(this).tab('show');
    });
  });
})(jQuery);
0
Naved Khan

Droit de mon code de production. Orthogonal, discret, peut "décocher" n'importe quelle interface utilisateur. Le sélecteur peut être modifié pour correspondre à de nombreux types de cliquables.

$(document).on('mouseover','.js-mouseover-to-click',function (event) {
    $(event.target).trigger('click');
});
0
Sergey Nagaytsev