Create a gist now

Instantly share code, notes, and snippets.

@NOEinteractive /index.html Secret
Last active Feb 18, 2016

Embed
What would you like to do?
Onglets RPWD
<!-- 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>
/**
* 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);
});
}
.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