Étiquette : tabs

[Magento 2] Etendre un composant JS natif

07/12/2020 / admin

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

define([
        'jquery',
        'jquery-ui-modules/widget',
        'jquery-ui-modules/core',
        'mage/mage',
        'mage/collapsible'],
    function($){
        $.widget('custom.tabs', $.mage.tabs, {
            options: {
                indicator: false
            },
            _create: function () {
                // IF NO options ARE POSSIBLE:
                // if ( $(".items.has-indicator").length > 0 ){
                //     this._addIndicator();
                // }
                if (this.options.indicator) {
                    this._addIndicator();
                }
            },
            _addIndicator: function () {
                var $menu = $(".items.has-indicator"),
                    indicator = $('<span class="indicator"></span>');

                $menu.append(indicator);

                position_indicator($menu.find("li.current"));

                setTimeout(function(){indicator.css("opacity", 1);}, 500);
                $menu.find("li").mouseenter(function(){
                    position_indicator($(this));
                });
                $menu.find("li").mouseleave(function(){
                    position_indicator($menu.find("li.current"));
                });

                $(window).on('resize', function(){
                    position_indicator($menu.find("li.current"));
                });

                function position_indicator(ele){
                    var left   = ele.position().left,
                        width  = ele.outerWidth(),
                        top    = ele.position().top,
                        height = ele.outerHeight();

                    if(window.matchMedia("(max-width:890px)").matches){
                        indicator.stop().animate({
                            top: top,
                            height: height,
                            width: 3,
                            left: 0
                        });
                    }
                    else{
                        indicator.stop().animate({
                            left: left,
                            width: width,
                            height: 3,
                            top: "100%"
                        });
                    }
                }
            }
        });
        return $.custom.tabs;
    });

define([

'jquery',

'jquery-ui-modules/widget',

'jquery-ui-modules/core',

'mage/mage',

'mage/collapsible'],

function($){

$.widget('custom.tabs', $.mage.tabs, {

options: {

indicator: false

_create: function () {

// IF NO options ARE POSSIBLE:

// if ( $(".items.has-indicator").length > 0 ){

// this._addIndicator();

// }

if (this.options.indicator) {

this._addIndicator();

}

_addIndicator: function () {

var $menu = $(".items.has-indicator"),

indicator = $('<span class="indicator"></span>');

$menu.append(indicator);

position_indicator($menu.find("li.current"));

setTimeout(function(){indicator.css("opacity", 1);}, 500);

$menu.find("li").mouseenter(function(){

position_indicator($(this));

});

$menu.find("li").mouseleave(function(){

position_indicator($menu.find("li.current"));

});

$(window).on('resize', function(){

position_indicator($menu.find("li.current"));

});

function position_indicator(ele){

var left = ele.position().left,

width = ele.outerWidth(),

top = ele.position().top,

height = ele.outerHeight();

if(window.matchMedia("(max-width:890px)").matches){

indicator.stop().animate({

top: top,

height: height,

width: 3,

left: 0

});

}

else{

indicator.stop().animate({

left: left,

width: width,

height: 3,

top: "100%"

});

}

});

return $.custom.tabs;

});

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

var config = {
    map: {
        '*' : {
            'tabs': 'js/tabs-custom'
        }
    }
};

var config = {

map: {

'*' : {

'tabs': 'js/tabs-custom'

}

};

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

<div class="section-items <?= $block->escapeHtmlAttr($groupCss) ?>-items"
     data-mage-init='{"tabs":{"openedState":"active","indicator":"true"}}'>

1 2	<div class="section-items <?= $block->escapeHtmlAttr($groupCss) ?>-items" data-mage-init='{"tabs":{"openedState":"active","indicator":"true"}}'>

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

@tab-item-height: 50px;
@tab-item-border-width: 3px;

.items:not(.nav) {
    border-bottom: none 0;
    display: flex;
    .nav.item {
        margin: 0;
        display: flex;
        > a,
        &.current > strong {
            padding: 0 @tab-item-height / 2.25;
            position: relative;
            display: flex;
            align-items: center;
        }
        &.current > strong {
            font-weight: 500;
            &:hover {
                color: @red;
            }
        }
    }
    &.has-indicator {
        position: relative;
        .indicator{
            left: 0;
            height: 3px;
            position: absolute;
            bottom: 0;
            width: 0;
            opacity: 0;
            background: @red;
            overflow: visible !important;

            &:before{
                content:"";
                position: absolute;
                bottom: 0;
                background-color: @red;
            }
        }
    }
}



//
//  Mobile
//  _____________________________________________

.media-width(@extremum, @break) when (@extremum = 'max') and (@break = @screen__m) {
    .items:not(.nav) {
        flex-direction: column;
        background: linear-gradient(90deg, @greyLight 0%, @greyLight @tab-item-border-width, transparent @tab-item-border-width, transparent 100%);
        .nav.item {
            height: @tab-item-height;
        }
        &.has-indicator {
            .indicator {
                &:before{
                    width: 13px;
                    height: 2px;
                    left: 0;
                    top: 50%;
                    transform: translateY(-50%) translateX(0);
                }
            }
        }
    }
}



//
//  Desktop
//  _____________________________________________

.media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__m) {
    .items:not(.nav) {
        flex-direction: row;
        background: linear-gradient(180deg, transparent 0%, transparent @tab-item-height, @greyLight @tab-item-height, @greyLight 100%);
        .nav.item {
            // total height: @tab-item-height + @tab-item-border-width;
            height: @tab-item-height + @tab-item-border-width;
        }
        &.has-indicator {
            .indicator {
                transform: translateY(-3px);
                &:before{
                    width: 2px;
                    height: 13px;
                    left: 50%;
                    transform: translateX(-50%);
                }
            }
        }
    }
}

@tab-item-height: 50px;

@tab-item-border-width: 3px;

.items:not(.nav) {

border-bottom: none 0;

display: flex;

.nav.item {

margin: 0;

display: flex;

> a,

&.current > strong {

padding: 0 @tab-item-height / 2.25;

position: relative;

display: flex;

align-items: center;

}

&.current > strong {

font-weight: 500;

&:hover {

color: @red;

}

&.has-indicator {

position: relative;

.indicator{

left: 0;

height: 3px;

position: absolute;

bottom: 0;

width: 0;

opacity: 0;

background: @red;

overflow: visible !important;

&:before{

content:"";

position: absolute;

bottom: 0;

background-color: @red;

}

// Mobile

// _____________________________________________

.media-width(@extremum, @break) when (@extremum = 'max') and (@break = @screen__m) {

.items:not(.nav) {

flex-direction: column;

background: linear-gradient(90deg, @greyLight 0%, @greyLight @tab-item-border-width, transparent @tab-item-border-width, transparent 100%);

.nav.item {

height: @tab-item-height;

}

&.has-indicator {

.indicator {

&:before{

width: 13px;

height: 2px;

left: 0;

top: 50%;

transform: translateY(-50%) translateX(0);

}

// Desktop

// _____________________________________________

.media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__m) {

.items:not(.nav) {

flex-direction: row;

background: linear-gradient(180deg, transparent 0%, transparent @tab-item-height, @greyLight @tab-item-height, @greyLight 100%);

.nav.item {

// total height: @tab-item-height + @tab-item-border-width;

height: @tab-item-height + @tab-item-border-width;

}

&.has-indicator {

.indicator {

transform: translateY(-3px);

&:before{

width: 2px;

height: 13px;

left: 50%;

transform: translateX(-50%);

}

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

<body>
    <referenceContainer name="content">
        <block class="Magento\Framework\View\Element\Html\Links" as="links" name="sales.order.info.links" before="-">
            <arguments>
                <argument name="css_class" xsi:type="string">items order-links has-indicator</argument>
            </arguments>

<body>

<argument name="css_class" xsi:type="string">items order-links has-indicator</argument>

</arguments>

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

18/09/2017 / admin

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

app.js:15667 Error: Syntax error, unrecognized expression: ##panel2
    at Function.Sizzle.error (app.js:1597)
    at Sizzle.tokenize (app.js:2226)
    at Sizzle.select (app.js:2644)
    at Function.Sizzle [as find] (app.js:941)
    at jQuery.fn.init.find (app.js:2882)
    at jQuery.fn.init (app.js:2979)
    at jQuery (app.js:170)
    at HTMLLIElement.<anonymous> (app.js:13916)
    at Function.each (app.js:439)
    at jQuery.fn.init.each (app.js:232)

app.js:15667 Error: Syntax error, unrecognized expression: ##panel2

at Function.Sizzle.error (app.js:1597)

at Sizzle.tokenize (app.js:2226)

at Sizzle.select (app.js:2644)

at Function.Sizzle [as find] (app.js:941)

at jQuery.fn.init.find (app.js:2882)

at jQuery.fn.init (app.js:2979)

at jQuery (app.js:170)

at HTMLLIElement.<anonymous> (app.js:13916)

at Function.each (app.js:439)

at jQuery.fn.init.each (app.js:232)

…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

16/06/2017 / admin

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

.tabs {
  &-title {
    text-transform: uppercase;
    font-weight: bold;
    > a {
      border-left: 2px solid #fff;
      border-right: 2px solid #fff;
    }
    &:first-child {
      > a {
        border-left: 2px solid $tab-background;
        border-right: 2px solid #fff;
        &:hover,
        &[aria-selected="true"] {
          border-left: 2px solid $tab-background-active;
          border-right: 2px solid #fff;
        }
      }
    }
    &:last-child {
      > a {
        border-left: 2px solid #fff;
        border-right: 2px solid $tab-background;
        &:hover,
        &[aria-selected="true"] {
          border-left: 2px solid #fff;
          border-right: 2px solid $tab-background-active;
        }
      }
    }
  }
}

.tabs {

&-title {

text-transform: uppercase;

font-weight: bold;

> a {

border-left: 2px solid #fff;

border-right: 2px solid #fff;

}

&:first-child {

> a {

border-left: 2px solid $tab-background;

border-right: 2px solid #fff;

&:hover,

&[aria-selected="true"] {

border-left: 2px solid $tab-background-active;

border-right: 2px solid #fff;

}

&:last-child {

> a {

border-left: 2px solid #fff;

border-right: 2px solid $tab-background;

&:hover,

&[aria-selected="true"] {

border-left: 2px solid #fff;

border-right: 2px solid $tab-background-active;

}

  .tabs {
    width: 100%;
    display: table;
    table-layout: fixed;
    &::after, &::before {
      content: none; // F6 Tabs component core styles reset
    }
    &-title {
      float: none; // F6 Tabs component core styles reset
      
      display: table-cell;
      text-align: center;
    }
  }

.tabs {

width: 100%;

display: table;

table-layout: fixed;

&::after, &::before {

content: none; // F6 Tabs component core styles reset

}

&-title {

float: none; // F6 Tabs component core styles reset

display: table-cell;

text-align: center;

}

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

.tabs {
  // table mode custom component
  &-table {
    width: 100%;
    display: table;
    table-layout: fixed;
    &.tabs::after, &.tabs::before {
      content: none;
    }
    .tabs-title {
      float: none;
      
      display: table-cell;
      text-align: center;
    }
  }
}

.tabs {

// table mode custom component

&-table {

width: 100%;

display: table;

table-layout: fixed;

&.tabs::after, &.tabs::before {

content: none;

}

.tabs-title {

float: none;

display: table-cell;

text-align: center;

}

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

01/09/2016 / admin

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

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.

// On commence par déterminer sur quels éléments la navigation ne doit PAS se fermer au clic
var facetNavTargetElements = $('ul.facet-nav, .facet-nav-subitem-content');

// On crée un fonction 'DOMreset' qui agit sur le menu pour le refermer
function DOMreset(){
    ulFacetNav.removeAttr('style');
    aFacetNavItemLevel0Link.each(function(){
    	$(this).removeClass('is-active');
    });
    $('ul.facet-nav-sublevel').each(function(){
    	$(this).addClass('is-closed');
    });  
}
 
// On exécute la fonction 'DOMreset' au clic sur n'importe quel élément de la page
$(document).on('click', function(){
	DOMreset();
});

// Pour l'élément auquel nous avons attribué la classe [[code]]czoxMDpcIi5jb250YWluZXJcIjt7WyYqJl19[[/code]] de Bootstrap pour le centrer,
// on attribue une propriété CSS bidon (ici 'min-height') et on vérifie sa présence dans le DOM au clic avant d'exécuter la fonction 'DOMreset'.
$('ul.facet-nav-sublevel').css('min-height', '1px').on('click', function(){
  if( $(this).css('min-height') != null )  { 
    DOMreset(); 
  } 
});

// Pour finir, on annule les effets du clic sur les éléments pour lesquels nous avons déterminé que
// la navigation ne doit PAS se refermer au clic
facetNavTargetElements.on('click', function(e){
	e.stopPropagation();
});

// On commence par déterminer sur quels éléments la navigation ne doit PAS se fermer au clic

var facetNavTargetElements = $('ul.facet-nav, .facet-nav-subitem-content');

// On crée un fonction 'DOMreset' qui agit sur le menu pour le refermer

function DOMreset(){

ulFacetNav.removeAttr('style');

aFacetNavItemLevel0Link.each(function(){

$(this).removeClass('is-active');

});

$('ul.facet-nav-sublevel').each(function(){

$(this).addClass('is-closed');

});

}

// On exécute la fonction 'DOMreset' au clic sur n'importe quel élément de la page

$(document).on('click', function(){

DOMreset();

});

// Pour l'élément auquel nous avons attribué la classe [[code]]czoxMDpcIi5jb250YWluZXJcIjt7WyYqJl19[[/code]] de Bootstrap pour le centrer,

// on attribue une propriété CSS bidon (ici 'min-height') et on vérifie sa présence dans le DOM au clic avant d'exécuter la fonction 'DOMreset'.

$('ul.facet-nav-sublevel').css('min-height', '1px').on('click', function(){

if( $(this).css('min-height') != null ) {

DOMreset();

}

});

// Pour finir, on annule les effets du clic sur les éléments pour lesquels nous avons déterminé que

// la navigation ne doit PAS se refermer au clic

facetNavTargetElements.on('click', function(e){

e.stopPropagation();

});

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

18/06/2015 / admin

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

/* [CSS reset] Foundation Tabs component */
.tabs { border-bottom: 0; height: auto; margin-bottom: 0; }
.tabs dt, .tabs li.section-title { font-size: inherit; height: auto; line-height: auto; padding-right: 0; padding-left: 0; text-transform: none; }
.tabs dt:first-child, .tabs li.section-title:first-child { padding-right: 0; }
.tabs dd a, .tabs li a { font-size: inherit; height: auto; line-height: auto; padding: 0; }
.tabs dd a:focus, .tabs li a:focus { font-weight: normal; }
.tabs dd.active, .tabs li.active { border-top: 0; margin-top: 0; }
.tabs dd.active a, .tabs li.active a { border-left: 0; border-right: 0; font-weight: normal; }
.tabs.vertical { border-bottom: 0; }
.tabs.vertical dd, .tabs.vertical li { border-left: 0; }
.tabs.vertical dd a, .tabs.vertical li a { border: 0; border-width: 0; font-size: inherit; padding: 0; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; }
.tabs.vertical dd.active, .tabs.vertical li.active { border-top: 0; border-left: 0; }
.tabs.two-up dt a, .tabs.two-up dd a, .tabs.two-up li a, .tabs.three-up dt a, .tabs.three-up dd a, .tabs.three-up li a, .tabs.four-up dt a, .tabs.four-up dd a, .tabs.four-up li a, .tabs.five-up dt a, .tabs.five-up dd a, .tabs.five-up li a { padding: 0; text-align: left; }

ul.tabs-content { margin: 0; }
ul.tabs-content.contained > li { border: 0; border-width: 0; padding: 0; }
ul.tabs-content.contained.vertical > li { border-width: 0; }

/* [CSS reset] Foundation Tabs component */

.tabs { border-bottom: 0; height: auto; margin-bottom: 0; }

.tabs dt, .tabs li.section-title { font-size: inherit; height: auto; line-height: auto; padding-right: 0; padding-left: 0; text-transform: none; }

.tabs dt:first-child, .tabs li.section-title:first-child { padding-right: 0; }

.tabs dd a, .tabs li a { font-size: inherit; height: auto; line-height: auto; padding: 0; }

.tabs dd a:focus, .tabs li a:focus { font-weight: normal; }

.tabs dd.active, .tabs li.active { border-top: 0; margin-top: 0; }

.tabs dd.active a, .tabs li.active a { border-left: 0; border-right: 0; font-weight: normal; }

.tabs.vertical { border-bottom: 0; }

.tabs.vertical dd, .tabs.vertical li { border-left: 0; }

.tabs.vertical dd a, .tabs.vertical li a { border: 0; border-width: 0; font-size: inherit; padding: 0; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; }

.tabs.vertical dd.active, .tabs.vertical li.active { border-top: 0; border-left: 0; }

.tabs.two-up dt a, .tabs.two-up dd a, .tabs.two-up li a, .tabs.three-up dt a, .tabs.three-up dd a, .tabs.three-up li a, .tabs.four-up dt a, .tabs.four-up dd a, .tabs.four-up li a, .tabs.five-up dt a, .tabs.five-up dd a, .tabs.five-up li a { padding: 0; text-align: left; }

ul.tabs-content { margin: 0; }

ul.tabs-content.contained > li { border: 0; border-width: 0; padding: 0; }

ul.tabs-content.contained.vertical > li { border-width: 0; }

[jQuery UI 1.8.18][tabs] Reset CSS

27/10/2014 / admin

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

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

/* .ui-core reset */
.ui-corner-all,
.ui-corner-top,
.ui-corner-right,
.ui-corner-tr {
  -webkit-border-radius: 0px;
  -moz-border-radius: 0px;
  -o-border-radius: 0px;
  -ms-border-radius: 0px;
  border-radius: 0px;
  -webkit-border-top-left-radius: 0px;
  -moz-border-top-left-radius: 0px;
  -o-border-top-left-radius: 0px;
  -ms-border-top-left-radius: 0px;
  border-top-left-radius: 0px;
  -webkit-border-top-right-radius: 0px;
  -moz-border-top-right-radius: 0px;
  -o-border-top-right-radius: 0px;
  -ms-border-top-right-radius: 0px;
  border-top-right-radius: 0px;
}
.ui-widget-header,
.ui-widget-content,
.ui-state-default,
.ui-widget-content .ui-state-default,
.ui-widget-header .ui-state-default,
.ui-state-active,
.ui-widget-content .ui-state-active,
.ui-widget-header .ui-state-active {
  border: none;
  background: none;
  font-weight: normal;
  color: #000;
}
.ui-state-active a,
.ui-state-active a:link,
.ui-state-active a:visited,
.ui-state-default a,
.ui-state-default a:link,
.ui-state-default a:visited {
  color: #000;
}

/* .ui-tabs reset */
.ui-tabs,
.ui-tabs .ui-tabs-nav,
.ui-tabs .ui-tabs-nav li a,
.ui-tabs .ui-tabs-panel { padding: 0; }
.ui-tabs .ui-tabs-nav li { margin: 0; }
.ui-tabs .ui-tabs-nav li { top: 0; }
.ui-tabs .ui-tabs-nav li.ui-tabs-selected { padding-bottom: 0; }

.ui-tabs .ui-tabs-panel { font-size: 1em !important; }

/* end: .ui-core + .ui-tabs reset */

/* .ui-core reset */

.ui-corner-all,

.ui-corner-top,

.ui-corner-right,

.ui-corner-tr {

-webkit-border-radius: 0px;

-moz-border-radius: 0px;

-o-border-radius: 0px;

-ms-border-radius: 0px;

border-radius: 0px;

-webkit-border-top-left-radius: 0px;

-moz-border-top-left-radius: 0px;

-o-border-top-left-radius: 0px;

-ms-border-top-left-radius: 0px;

border-top-left-radius: 0px;

-webkit-border-top-right-radius: 0px;

-moz-border-top-right-radius: 0px;

-o-border-top-right-radius: 0px;

-ms-border-top-right-radius: 0px;

border-top-right-radius: 0px;

}

.ui-widget-header,

.ui-widget-content,

.ui-state-default,

.ui-widget-content .ui-state-default,

.ui-widget-header .ui-state-default,

.ui-state-active,

.ui-widget-content .ui-state-active,

.ui-widget-header .ui-state-active {

border: none;

background: none;

font-weight: normal;

color: #000;

}

.ui-state-active a,

.ui-state-active a:link,

.ui-state-active a:visited,

.ui-state-default a,

.ui-state-default a:link,

.ui-state-default a:visited {

color: #000;

}

/* .ui-tabs reset */

.ui-tabs,

.ui-tabs .ui-tabs-nav,

.ui-tabs .ui-tabs-nav li a,

.ui-tabs .ui-tabs-panel { padding: 0; }

.ui-tabs .ui-tabs-nav li { margin: 0; }

.ui-tabs .ui-tabs-nav li { top: 0; }

.ui-tabs .ui-tabs-nav li.ui-tabs-selected { padding-bottom: 0; }

.ui-tabs .ui-tabs-panel { font-size: 1em !important; }

/* end: .ui-core + .ui-tabs reset */

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

<script type="text/javascript">
jQuery(document).ready(function() {
    jQuery( "#tabs" ).tabs();
});
</script>

<div id="tabs">
    <ul>
        <li><a href="#tabs-1">onglet 01</a></li>
        <li><a href="#tabs-2">onglet 02</a></li>
        <li><a href="#tabs-3">onglet 03</a></li>
    </ul>
    <div id="tabs-1">
        <p>Contenu onglet 01: Lorem ipsum dolor sit amet...</p>
    </div>
    <div id="tabs-2">
        <p>Contenu onglet 02: Lorem ipsum dolor sit amet...</p>
    </div>
    <div id="tabs-3">
        <p>Contenu onglet 03: Lorem ipsum dolor sit amet...</p>
    </div>
</div>

jQuery(document).ready(function() {

jQuery( "#tabs" ).tabs();

});

</script>

<ul>

<li><a href="#tabs-1">onglet 01</a></li>

<li><a href="#tabs-2">onglet 02</a></li>

<li><a href="#tabs-3">onglet 03</a></li>

</ul>

<p>Contenu onglet 01: Lorem ipsum dolor sit amet...</p>

</div>

<p>Contenu onglet 02: Lorem ipsum dolor sit amet...</p>

</div>

<p>Contenu onglet 03: Lorem ipsum dolor sit amet...</p>

</div>

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

22/04/2014 / admin

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.


<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; »)

22/04/2014 / admin

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;
}

Articles récents

Catégories

Archives

Méta

Étiquette : tabs

[Magento 2] Etendre un composant JS natif

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

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

[Foundation 6] Un habillage Custom pour le composant Tabs

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

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

[jQuery UI 1.8.18][tabs] Reset CSS

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

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

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