|
En onglets dans le texte de spip, ou ailleurs...
Lundi 18 décembre 2006
Modifié le samedi 24 mai 2008
Ce script permet de découper votre page en différentes sections superposées comme dans le contenu de cet article. Très efficace pour des articles techniques !
Fonctionne avec javascript mais se comporte bien en cas de désactivation, plaçant les paragraphes les uns en dessous des autres.
Particularité, il place un cookie pour garder en mémoire l’onglet que vous avez quitté  (désactivable dans le fichier js)
Peut contenir texte, image, vidéo...
INSTALLATION :
Décompressez l’archive ci dessous et placez le dossier obtenu dans le dossier plugins à la racine de votre site (créez le s’il n’existe pas).
 - onglets_texte_1.9
Activez le plugin dans la partie privée.
UTILISATION :
A la rédaction du texte de votre article procédez comme suit :
Un autre tableau dans le texte ? Précisez juste une id dans le premier onglet :
PERSONNALISATION
Copiez le dossier css dans votre dossier squelettes et modifiez le fichier tab.css ainsi que les images à votre goût.
QUESTIONS FREQUENTES :
J’ai bien tout installé mais rien ne se passe :
Vérifiez que la balise #INSERT_HEAD est bien présente dans vos squelettes. Elle est indispensable au fonctionnement des plugins. A partir de la version 1.9 de Spip, cette balise est en standard dans le fichier inc-head.html appelé dans le header de tous les squelettes.
Reproduisez ce principe sur votre site, placez vos css et vos javascripts dans ce fichier vous gagnerez du temps...
Vous devriez plutôt actualiser votre version spip, m’enfin...
Cette version 1.9 n’utilisant pas les modèles, l’installation du plugin est la même, la différence se situe à l’utilisation
INSTALLATION :
Décompressez l’archive onglets_texte_1.9xx.zip et placez le dossier obtenu dans le dossier plugins à la racine de votre site (créez le s’il n’existe pas).
- onglets_texte_1.9
Activez le plugin dans la partie privée.
UTILISATION :
A la rédaction du texte de votre article procédez comme suit :
Un autre tableau dans le texte ? Précisez juste une id dans le premier onglet :
PERSONNALISATION
Copiez le dossier css dans votre dossier squelettes et modifiez le fichier tab.css ainsi que les images à votre goût.
QUESTIONS FREQUENTES :
J’ai bien tout installé mais rien ne se passe :
Vérifiez que la balise #INSERT_HEAD est bien présente dans vos squelettes. Elle est indispensable au fonctionnement des plugins. A partir de la version 1.9 de Spip, cette balise est en standard dans le fichier inc-head.html appelé dans le header de tous les squelettes.
Reproduisez ce principe sur votre site, placez vos css et vos javascripts dans ce fichier vous gagnerez du temps...
Ces versions n’utilisant ni les plugins ni les modèles, procédez comme suit :
INSTALLATION :
Décompressez l’archive onglets_texte_1.8xx.zip
- onglets_texte_1.8xx.zip
Copiez les deux répertoires javascript et css à la racine de votre site
 Placez l’appel suivant entre les balises <head></head> de votre fichier article.html
UTILISATION :
A la rédaction du texte de votre article procédez comme suit :
Un autre tableau dans le texte ? Précisez juste une id différente dans le premier onglet :
PERSONNALISATION
Copiez le dossier css dans votre dossier squelettes et modifiez le fichier tab.css ainsi que les images à votre goût.
Have fun
23 Commentaires
-
Bonjour
ceci m’intéresse enormement mais je ne sait pas comment l utiliser , je suis début , j ai bien telecharger le fichier zip decompresser et uploader dans un dossier plugins et après je ne comprend pas..
pourriez vous m’expliquer rapidement l utilisation .
en avance merci
Répondre à ce message
-
Bonjour,
Tout fonctionne parfaitement ; dommage qu’Internet Explorer 7 n’ouvre pas la page directement ; en effet, il affiche "Pour vous aider à protéger votre ordinateur, Internet Explorer a restreint l’exécution des scripts ou des contrôles ActiveX de cette page Web qui pourraient accéder à votre ordinateur. Cliquez ici pour afficher plus d’options..."
Avez-vous une solution pour empêcher l’affichage de ce message.
Merci d’avance.
Gerard
Répondre à ce message
-
-
S’il y a deux rangs d’onglets il y a une ouverture large entre les deux rangs. Comment est-ce qu’on peut la diminuer ?
Quand on fait un click sur l’un des onglets des le troisiém onglet il apparait un troisiém rang d’onglets qui a un comportement étrange.
Voir : http://python.free-h.net/spip.php?a...
Répondre à ce message
-
-
en approfondissant les tests : on arrive à supprimer l’espace mais l’alignement bizarre demeure lorsque l’on séléctionne le dernier onglet de la première ligne. J’ai envoyé un mail à l’auteur à ce sujet, je posterai en cas de réponse. 6u
Répondre à ce message
-
-
je suis allé sur le lien et je n’ai rien vu d’anormal. Sans doute le problème css est résolu. Je ne connais pas d’incompatibilité avec un autre plugin.
Répondre à ce message
-
Bonjour, non le probleme n’est pas resolu, toute ma barre latérale se retrouve sous l’article, alors qu’elle devrait être à droite.
Si vous ne connaissez pas d’incompatibilité avec d’autres plugins, je vais verifier les css.
Si vous avez une autre idée ?????
Laëta
Répondre à ce message
-
Bonjour,
le temps me manque pour resoudre le probleme, j’ai déactivé le plugin (on ne peut plus voir l’article en question sur le site temporaire).
Je reprendrai contact ultérieurement.
A bientôt.
Laëta
Répondre à ce message
-
Bonsoir,
tout d’abord félicitation pour ce plugin qui m’est très utile. Je m’en sers pour l’afficher en page accueil. Cependant je l’ai ai inséré dans 2 div pour avoir côte à côte 2 bloc de taille diffèrents. Voici mon problème : Sous firefox mac pas de problème en revanche sous safari la largeur des blocs avec ascenseur et complètement bizarre. Tout part en vrille 
Mes connaisances en css sont juste correctes.
Avez-vous connaissance d’un bug par rapport à Safari ?
Je n’ai pas encore testé sur PC IE et FF mais je pense qu’il va y avoir des décalages ou bugs divers. Sic...
Merci pour vos réponses
voici l’adresse pour visualiser le bug. Au passage si certains remarques une coquille sur PC merci de m’avertir ce serait super de votre part 
www.rene-bui.info
Répondre à ce message
-
bonjour,
votre plugin m’interesse.
Il fonctionne très bien lorsque je l’utilise dans le texte d’un article, mais je ne vois pas comment l’utiliser dans un squelette pour qu’il soit présent sur tous les articles...
Auriez -vous une piste ?
Merci
Voir en ligne : Scenaristeur
Répondre à ce message
-
il suffit de placer le code suivant dans votre squelette, titre et contenu pouvant être des balises à l’intérieur de boucles SPIP
<div class="tab-pane" id="xx">
<div class="tab-page">
<h2 class="tab">Mon titre 1</h2>
contenu du premier onglet
etc...
</div>
<div class="tab-page">
<h2 class="tab">Mon titre 2</h2>
contenu du deuxième onglet
etc...
</div>
<div class="tab-page">
<h2 class="tab">Mon titre 3</h2>
contenu du troisième onglet
etc...
</div>
</div>
Répondre à ce message
-
-
celà se passe dans les fichiers css avec la propriété d’empilement z-index, celle des onglets doit être inférieure à celle du menu déroulant.
Répondre à ce message
-
C’est une super idée et une excellente réalisation. J’ai changé la feuille de style, non seulement par goût mais à cause de divers problèmes.
Il m’en reste un à régler : le sytème de Z-index pour cacher la ligne de base de l’onglet en cours ne fonctionne pas chez moi, j’ai patché tant bien que mal (plutôt mal que bien) en enlevant le bord haut du tableau de base.
Une demande, en plus < : pourrais-tu intégrer un <a name=nom donc classe de l'onglet></a> pour faciliter ensuite les appels de liens sélectifs à cet onglet ?
En tout cas, merci encore !
Voir en ligne : Exemple d’utilisation des onglets
Répondre à ce message
-
Ça a carrément l’air aussi élégant qu’utile.
Vais l’essayer.
Merci pour ce travail.
Répondre à ce message
-
-
|
Dans la même rubrique
par Pierre Troller (1)
En onglets dans le texte de spip, ou ailleurs...
Pas d'autre auteur dans la rubrique Ressources spip
|
voir en ligne l’exemple de mon propos :
Un commentaire?
299 publications (portfolio)
RSS 2.0
