Onglets RPWD
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!-- si vous voulez des onglets qui deviennent des ancres sans JS, ajouter des href="#id de l'onglet" aux liens --> | |
<!-- pour un chargement du contenu de l'onglet en ajax, ajouter l'attribut data-ajax-url="url-a-charger" sur la div noe-tabs-item, et pour afficher une partie du html retourné : data-ajax-selector=".ton .selecteur .css" --> | |
<div class="noe-tabs-wrapper"> | |
<ul class="noe-tabs-switcher"> | |
<li class="noe-tabs-switcher-select"><a href="">Onglet par défaut</a></li> | |
<li><a href="">Onglet 2</a></li> | |
<li><a href="">Onglet 3</a></li> | |
</ul> | |
<a class="noe-tabs-switcher-rpwd noe-tabs-switcher-select">Onglet par défaut</a> | |
<div class="noe-tabs-item noe-tabs-item-active"> | |
Contenu onglet 1 | |
</div> | |
<a class="noe-tabs-switcher-rpwd">Onglet 2</a> | |
<div class="noe-tabs-item"> | |
Contenu onglet 2 | |
</div> | |
<a class="noe-tabs-switcher-rpwd">Onglet 3</a> | |
<div class="noe-tabs-item"> | |
Contenu onglet 3 | |
</div> | |
</div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/** | |
* Noe tabs | |
* Copy this function to your noewp.js object and then add | |
* this.registerOnglets(); | |
* to the init function; | |
*/ | |
registerOnglets: function(){ | |
var tabsClassPrefix = 'noe-tabs'; | |
$('.'+tabsClassPrefix+'-wrapper').each(function() { | |
var $wrapper = $(this); | |
if($wrapper.data('noe-tabs')) return; | |
var $lis = $wrapper.find('ul.'+tabsClassPrefix+'-switcher li'), | |
$as = $wrapper.find('a.'+tabsClassPrefix+'-switcher-rpwd').on('click.noe-tabs', c), | |
$tabs = $wrapper.find('.'+tabsClassPrefix+'-item'); | |
var i = $as.length; while(i--) $($as[i]).data('index', i); //because we can't use index() with an object, only string selector | |
function c() { | |
var $t = $(this), | |
$parent = $t.hasClass(tabsClassPrefix+'-switcher-rpwd') ? $($lis[$t.data('index')]) : $t.parent(), | |
index = $parent.index(), | |
$tab = $($tabs[index]); | |
$lis.not($parent.addClass(tabsClassPrefix+'-switcher-select')).removeClass(tabsClassPrefix+'-switcher-select'); | |
$as.not($($as[index]).addClass(tabsClassPrefix+'-switcher-select')).removeClass(tabsClassPrefix+'-switcher-select'); | |
$tabs.not($tab.addClass(tabsClassPrefix+'-item-active')).removeClass(tabsClassPrefix+'-item-active'); | |
if($t.hasClass(tabsClassPrefix+'-switcher-rpwd')) { | |
$w.scrollTop($t.offset().top); | |
} | |
return false; | |
} | |
$wrapper.data('noe-tabs', 1).find('ul.'+tabsClassPrefix+'-switcher li a').on('click.noe-tabs', c); | |
}); | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
.js .noe-tabs-wrapper .noe-tabs-item, | |
.no-js .noe-tabs-wrapper .noe-tabs-switcher, | |
.no-js .noe-tabs-switcher-rpwd { | |
display:none; | |
} | |
.noe-tabs-wrapper .noe-tabs-item.noe-tabs-item-active { | |
display:block; | |
} | |
.noe-tabs-wrapper .noe-tabs-switcher-select { | |
cursor:default; | |
} | |
.noe-tabs-switcher-rpwd { | |
display:none; | |
width:100%; | |
clear:both; | |
} | |
/* changer la largeur à laquelle vous voulez que ca passe en accordeon */ | |
@media screen and (max-width: 300px) { | |
.noe-tabs-switcher-rpwd { | |
display:block; | |
} | |
.noe-tabs-switcher { | |
display:none; | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment