Exercice 20 : Utilisation de SuperFish.js (Menu)

Le 17 Février 2015

Introduction

Aujourd’hui je vais créer un menu Superfish.js pour gérer toutes les statistiques dans SuperCours.

Voici le rendu du menu, avec ses sous menus:

superf

Comment Faire ?

Le code est très bien expliqué sur la page de Super Fish .

Cependant, j’ai ajouté des icônes dans le menu.

De plus, le système est tel que, lorsqu’un menu est cliqué, cela active la fonction javascript ONCLICK(« chargePhp(fichierPhp) ») qui charge le fichier php de la statistique désirée dans la DIV située dans la partie inférieure de la fenêtre.

Autrement dit, la fonction chargePhp(fichierPhp) prends en argument le fichier PHP de statistiques qui sera exécuté dans la fenêtre .

Il existera aussi une 2ème fonction appelée chargeJs(libJS) qui elle, exécutera des appels ajax et des librairies de statistique de style D3.js

On aboutit donc à un système très simple, ou dans un premier temps, je programmerais les statistiques en PHP. Mais, ensuite, certaines stats seront en javascript, ou feront appel à des librairies de style D3.js

On pourrait même imaginer un menu qui s’autogénérerait en fonction de fichiers phps de stats, mais bon l’intérêt est limité.

Le Code :

PHASE 1 : CREATION DES ELEMENTS DU MENU

Tout d’abord, je crée le menu en HTML dans la page statsGen.html.

(statsGen.html sera chargée à l’aide d’un $.load() dans la fenêtre Jquery Dialog appropriée)


<div id="men1" > 
 
 
 <ul class="sf-menu" id="example">
 <li class="current">
 <a href="followed.html">Décomptes<span class="ui-icon ui-icon-person"></a>
 <ul>
 <li>
 <a href="#decompte">Généraux</a>
 </li>
 <li class="current">
 <a href="followed.html">Graphiques</a>
 <ul>
 <li class="current"><a href="followed.html">menu item</a></li>
 <li><a href="#decompte" onclick="phpCharge(decompte.php)" >Decompte</a></li>
 <li><a href="followed.html" >menu item</a></li>
 <li><a href="followed.html" >menu item</a></li>
 <li><a href="followed.html" >menu item</a></li>
 </ul>
 </li>

</ul>
 </li>
 <li>
 <a href="#moyenne">Moyennes<span class="ui-icon ui-icon-person"></a>
 </li>
 <li>
 <a href="followed.html">Pourcentages<span class="ui-icon ui-icon-person"></a>
 <ul>
 <li>
 <a href="followed.html"></a>
 <ul>
 <li><a href="followed.html">short</a></li>
 <li><a href="followed.html">short</a></li>
 <li><a href="followed.html">short</a></li>
 <li><a href="followed.html">short</a></li>
 <li><a href="followed.html">short</a></li>
 </ul>
 </li>
 <li>
 <a href="followed.html">menu item</a>
 <ul>
 <li><a href="followed.html">menu item</a></li>
 <li><a href="followed.html">menu item</a></li>
 <li><a href="followed.html">menu item</a></li>
 <li><a href="followed.html">menu item</a></li>
 <li><a href="followed.html">menu item</a></li>
 </ul>
 </li>
 <li>
 <a href="followed.html">menu item</a>
 <ul>
 <li><a href="followed.html">menu item</a></li>
 <li><a href="followed.html">menu item</a></li>
 <li><a href="followed.html">menu item</a></li>
 <li><a href="followed.html">menu item</a></li>
 <li><a href="followed.html">menu item</a></li>
 </ul>
 </li>
 
 </ul>
 </li>
 <li>
 <a href="followed.html">optimisations<span class="ui-icon ui-icon-person"></a>
 </li> 
 <li>
 <a href="followed.html">Stats Dynamiques<span class="ui-icon ui-icon-person"></a>
 </li> 
 </ul>
</div>



Pour l’instant, je n’ai activé onclick= »phpCharge(decompte.php) » que sur le sous-menu « decompte »

Donc, en cliquant sur decompte, on exécute la fonction Javascript phpCharge qui charge le fichier PHP.

PHASE 2 : ACTIVATION DE SUPERFISH AVEC JQUERY

Donc, j’active ensuite le menu Superfish à l’aide de la fonction Jquery Suivante :


var example = $('#example').superfish({
 //add options here if required
 });

PHASE 3 : TRAITEMENT DU CHOIX DE L’UTILISATEUR

Voici donc ma fonction JS qui va lancer le fichier PHP dans la DIV choisie. La fonction prends en argument le nom du fichier php à exécuter, c’est êxtremement simple. (j’ai pas encore fait la fonction, je la mettrais plus tard


function phpCharge(fichierphp){
$("#stats").empty();// Efface le contenu de la DIV stats qui est située dans la fenêtre des stats

//Le reste est à venir avec bien sur un appel ajax

}

Publicités