Étiquette : tabs

[Magento 2] Etendre un composant JS natif

Testé fonctionnel Magento 2.4. Source: Extending Magento 2 default JS components. Version PDF – inchoo.net-Extending Magento 2 default JS components.

Etendre le composant UI Tabs pour ajouter un effet de bordure animée sous les onglets:

app/design/frontend/MyVendor/mytheme/web/js/tabs-custom.js

app/design/frontend/MyVendor/mytheme/requirejs-config.js

app/design/frontend/MyVendor/mytheme/Magento_Theme/templates/html/sections.phtml

app/design/frontend/MyVendor/mytheme/web/css/source/tabs.less

app/design/frontend/MyVendor/mytheme/Magento_Sales/layout/sales_order_info_links.xml et app/design/frontend/MyVendor/mytheme/Magento_Sales/layout/sales_order_guest_info_links.xml

[Foundation 6] Erreur « Error: Syntax error, unrecognized expression: ##panel2 » avec le composant Tabs

Si vous avez cette erreur en utilisant le code de base du composant Tabs de Foundation 6 for Sites :

…il faut retirer l’attribut data-tabs-target="#panel2" du code qui est donné en exemple. C’est lui qui fout la m*&$e.

[Foundation 6] Un habillage Custom pour le composant Tabs

Le markup standard du composant Tabs de Foundation 6 est conservé. On adapte juste les styles.

Ou sous forme de composant supplémentaire en rajoutant la classe tabs-table au <ul class="tabs"> standard :

[jQuery] Rendre une partie seulement d’un élément HTML cliquable

J’ai le cas d’un menu à onglets (tabs) centré dans la page via la classe .container du composant Grille de Bootstrap 3. Je souhaite qu’au clic à l’extérieur de mon menu, la sous-partie ouverte se referme.

Base du menu en Demo sur jsFiddle

refermer-au-clic

Problème : lorsque je détermine à l’aide de jQuery que la zone du sous-menu ne doit pas se refermer au clic, les marges extérieures gauche/droite (en rose dans ma capture) sont également prises en compte.

Solution : on attribue une propriété CSS bidon à l’élément incriminé (ici ‘min-height’) et on vérifie sa présence dans le DOM au clic sur ce dernier avant d’exécuter une fonction destinée à refermer le menu.

facet-nav-code

[CSS][Foundation 3.2.5] Reset CSS des styles du composant Tabs de Foundation v3.2.5

Attention : n’inclut pas la version pills. Source originale obtenue ici : Download Foundation v3.2.5.

[jQuery UI 1.8.18][tabs] Reset CSS

Source : http://jqueryui.com/tabs/

Un reset complet des styles pour le widget « tabs » (« onglets ») peut être opéré avec les styles suivants :

On oublie pas le petit HTML de base qui va bien :

[jQuery] Ajouter une classe ‘before-active’ sur l’élément frère qui précède celui qui possède la classe ‘active’

Au clic sur un onglet, la classe ‘before-active’ viendra se positionner sur l’élément frère le plus proche qui précède celui qui possède la classe ‘active’. Très utile pour styler des menus avec séparateurs.

before-active


<script type="text/javascript">
  jQuery(function(){
    jQuery('.nav-tabs li a').click(function (e) {
      // Adding .before-active for CSS purpose
      jQuery('.nav-tabs li').removeClass('before-active');
      jQuery('.nav-tabs .active').prev('li').addClass('before-active');
    });
  });
</script>


<ul id="productTab" class="nav nav-tabs tab-list">
  <li class="active"><a href="#avis" data-toggle="tab">${trans:m.catalog.frontoffice.tab-avis,ucf}</a></li>
  <li><a href="#donnezavis" data-toggle="tab">${trans:m.catalog.frontoffice.tab-donnezavis,ucf}</a></li>
  <li><a href="#plusinfos" data-toggle="tab">${trans:m.catalog.frontoffice.tab-plusinfos,ucf}</a></li>
  <li><a href="#demos" data-toggle="tab">${trans:m.catalog.frontoffice.tab-demos,ucf}</a></li>
</ul>


.tab-list li {
  background-image: url();
  background-position: right 22px;
  background-repeat: no-repeat;
}

.tab-list li:last-child,
.tab-list li.before-active{
  background-image: none;
}

[Bootstrap Tabs] [jScrollPane] Utiliser jScrollPane sur un élément invisible (initialement en « display:none; »)

Il est normal que ce soit uniquement l’onglet visible qui soit en mesure d’afficher une scroll-bar.
C’est parce que les autres onglet sont invisibles (masqués par « display: none; ») et que le plug-in jScrollPane ne peut par conséquent pas calculer la hauteur de leurs contenus respectifs. Le résultat retourne zéro, donc le script décide de ne pas afficher de scRoll-bar.

Utiliser jScrollPane avec le système d’onglets (tabs) de Twitter Bootstrap

Source : jScrollPane.

Source : Twitter Bootstrap 3 | Tabs

Correction du bug : http://stackoverflow.com/questions/10548617/twitter-bootstrap-tabs-href-anchor-tag-jumping.


<script type="text/javascript">
  jQuery(function(){
    // http://stackoverflow.com/questions/10548617/twitter-bootstrap-tabs-href-anchor-tag-jumping
    jQuery('.nav-tabs li a').click(function (e) {
      e.preventDefault();
      jQuery(this).tab('show');
      jQuery('.tab-content > .tab-pane.active .scroll-pane').jScrollPane({
        // http://jscrollpane.kelvinluck.com/arrows.html
        showArrows: true,
        // http://jscrollpane.kelvinluck.com/drag_size.html
        verticalDragMinHeight: 17,
        verticalDragMaxHeight: 17
      });
    });
  });
</script>


<ul id="productTab" class="nav nav-tabs tab-list">
  <li class="active"><a href="#avis" data-toggle="tab">${trans:m.catalog.frontoffice.tab-avis,ucf}</a></li>
  <li><a href="#donnezavis" data-toggle="tab">${trans:m.catalog.frontoffice.tab-donnezavis,ucf}</a></li>
  <li><a href="#plusinfos" data-toggle="tab">${trans:m.catalog.frontoffice.tab-plusinfos,ucf}</a></li>
  <li><a href="#demos" data-toggle="tab">${trans:m.catalog.frontoffice.tab-demos,ucf}</a></li>
</ul>

<!-- Tab panes -->
<div id="productTabContent" class="tab-content">

  <!-- Début : Avis -->
  <div class="tab-pane active" id="avis">
    <div class="scroll-pane">

    </div>
  </div>
  <!-- Fin : Avis -->

  <!-- Début : Donnez votre avis -->
  <div class="tab-pane" id="donnezavis">
    <div class="scroll-pane">
      <h2>Donnez votre avis</h2>
    </div>
  </div>
  <!-- Fin : Donnez votre avis -->

  <!-- Début : Plus d'infos -->
  <div class="tab-pane" id="plusinfos">
    <div class="scroll-pane">
      <h2>Plus d'infos</h2>
    </div>
  </div>
  <!-- Fin : Plus d'infos -->

  <!-- Début : Demos -->
  <div class="tab-pane" id="demos">
    <div class="scroll-pane">
      <h2>Demos</h2>
    </div>
  </div>
  <!-- Fin : Demos -->
</div>


.tab-content .scroll-pane{
  width: 100%;
  height: 420px;
  overflow: auto;
}

.tab-content .horizontal-only{
  height: auto;
  max-height: 420px;
}