Skip to content

Instantly share code, notes, and snippets.


NOEinteractive/index.html Secret

Last active Feb 18, 2016
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>
<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
<a class="noe-tabs-switcher-rpwd">Onglet 2</a>
<div class="noe-tabs-item">
Contenu onglet 2
<a class="noe-tabs-switcher-rpwd">Onglet 3</a>
<div class="noe-tabs-item">
Contenu onglet 3
* 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($'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[$'index')]) : $t.parent(),
index = $parent.index(),
$tab = $($tabs[index]);
if($t.hasClass(tabsClassPrefix+'-switcher-rpwd')) {
return false;
$'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 {
.noe-tabs-wrapper .noe-tabs-item.noe-tabs-item-active {
.noe-tabs-wrapper .noe-tabs-switcher-select {
.noe-tabs-switcher-rpwd {
/* changer la largeur à laquelle vous voulez que ca passe en accordeon */
@media screen and (max-width: 300px) {
.noe-tabs-switcher-rpwd {
.noe-tabs-switcher {
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment