Bandeau

Site de démonstration du jeu de squelettes ESCAL fonctionnant sous SPIP3 et mis à la disposition des Etablissements SColaires de l’Académie de Lyon... et de qui veut.

Utilisé à ce jour dans 510 sites
logo article ou rubrique
Proposer aux visiteurs de choisir leur layout
Article mis en ligne le 6 septembre 2016
dernière modification le 7 septembre 2016

par Jean Christophe Villeneuve

Envie de proposer à vos visiteurs de changer de layout à leur convenance, comme sur ce site ?
Voilà comment faire

  • copie de inc-bandeau.html de /escal/inclusions vers /squelettes/inclusions (dossier à créer si pas existant)
  •  
  • dans ce fichier, on ajoute
    1. <div id=choixlayout>
    2. <INCLURE {fond=modeles/layout-switcher}{env} />
    3. </div>

    Télécharger

    juste avant

    1. <div id="titrepage">

  • création d’un fichier layout-switcher.html dans /squelettes/modeles (dossier à créer si pas existant) avec ce code
    1. [(#REM) <!-- Layout Switcher
    2.  
    3. Debug:
    4. Cookie : #SESSION{cookie} <br>
    5. CONFIG : [(#CONFIG{escal/config/layout})]
    6. ENV : #ENV{layout}
    7. SESSION : #SESSION{layout}
    8.  
    9. -->]
    10.  
    11. #SET{layouts, #EVAL{_DIR_PLUGIN_ESCAL}layout*.html}
    12.  
    13. <form id="layout-switcher" action="#SELF" method="POST">
    14.   <select name="layout" id="layout">
    15.       <option value="">Choisissez un Layout</option>
    16.       <option value="#CONFIG{escal/config/layout,PMP}">Réinitialiser</option>
    17.       <BOUCLE_layouts(DATA){source glob,#GET{layouts}}{par valeur}>
    18.           #SET{layout,#VALEUR|replace{#EVAL{_DIR_PLUGIN_ESCAL}layout,''}|replace{'.css.html',''}}
    19.           <option
    20.          style="background:url('#CHEMIN{images/layout#GET{layout}.gif}') no-repeat;  height:30px; padding-left:50px; vertical-align:middle;"
    21.          value="#GET{layout}"[ (#SESSION{layout}|=={#GET{layout}}|oui)selected]>
    22.           #GET{layout}
    23.           </option>
    24.       </BOUCLE_layouts>
    25.   </select>
    26. </form>
    27.  
    28. <script type="text/javascript">
    29. jQuery(document).ready(function($){
    30.     var layout = $.cookie('layout');
    31.     if (!layout) {
    32.       var layout = '[(#CONFIG{escal/config/layout})]';
    33.     }
    34.     $("#layout").change(function(){
    35.         var layout = $(this).val();
    36.         $.cookie('layout',$(this).val());
    37.         document.forms['layout-switcher'].submit();
    38.     });
    39. });

    Télécharger

Et pour afficher le menu déroulant à gauche, il faut ajouter le code suivant dans /squelettes/styles/perso.css (dossier et fichier à créer si pas existant)

  1. #choixlayout{
  2. float: left;
  3. }

Télécharger

Ou on mettra float: right; si on le veut à droite

Voilà !

qrcode:http://escal.ac-lyon.fr/spip/spip.php?article282

Plan du site Contact Mentions légales Espace rédacteurs squelette RSS

2009-2019 © Escal V4 - Tous droits réservés
Haut de page
Réalisé sous SPIP
Habillage ESCAL 4.2.97