1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107
| var dataset = {
"menu" : [
{
"icon" : "fa fa-home",
"name" : "accueil",
"url" : "/index1.dws",
"classe" : "ajaxify"
},
{
"icon" : "fa fa-user",
"name" : "accueil2",
"url" : "/index2.dws",
"classe" : "ajaxify"
},
{
"icon" : "fa fa-user",
"name" : "Sous Accueil",
"url" : "#",
"classe" : "rien", // pas "" mais une nom quelconque
"sousMenu" : [
{
"name" : "Sous accueil 1",
"url" : "/sousA1.dws",
"classe" : "ajaxify"
},
{
"name" : "Sous accueil 2",
"url" : "/sousA2.dws",
"classe" : "ajaxify"
}
]
}
]
};
/*
var jqXHR = $.getJSON( "fichier.php" );
jqXHR.done( function( data, textStatus, jqXHR ){
// succès de la transaction, on doit traiter le contenu de data
console.log( data, textStatus, jqXHR );
// data = dataset ci-dessus
// ci-dessous pour l'exploitation de data
});
jqXHR.fail( function( jqXHR, textStatus, errorThrown ){
// échec de la transaction, gérer la catastrophe
console.log( jqXHR, textStatus, errorThrown );
});
jqXHR.always( function( jqXHR, textStatus ){
// la transaction est terminée
console.log( jqXHR, textStatus );
});
*/
var jObjMenu = $( "#monMenuExistant" ),
jObjModel = $( "<li/>", {
"html" : '<a class="maClasse" href="#">Menu</a>'
}),
jObjLi = null,
jObjA = null,
jObjSLi = null,
jObjSA = null;
$.each( dataset[ "menu" ], function( i, item ){
jObjLi = jObjModel.clone();
jObjA = jObjLi.find( "a" );
jObjA.text( item[ "name" ] );
jObjA.attr( "class", item[ "classe" ] );
jObjA.attr( "href", item[ "url" ] );
if ( item[ "sousMenu" ] ){
jObjLi.append( '<ul></ul>' );
$.each( item[ "sousMenu" ], function( j, jtem ){
jObjSLi = jObjModel.clone(),
jObjSA = jObjSLi.find( "a" );
jObjSA.text( jtem[ "name" ] );
jObjSA.attr( "class", jtem[ "classe" ] );
jObjSA.attr( "href", jtem[ "url" ] );
jObjLi.find( "ul" ).append( jObjSLi );
});
}
jObjMenu.append( jObjLi );
});
/*
* Résultat dans Chrome :
* <ul id="monMenuExistant">
<li><a href="#">Menu 1</a></li>
<li><a class="ajaxify" href="/index1.dws">accueil</a></li>
<li><a class="ajaxify" href="/index2.dws">accueil2</a></li>
<li><a class="rien" href="#">Sous Accueil</a>
<ul>
<li><a class="ajaxify" href="/sousA1.dws">Sous accueil 1</a></li>
<li><a class="ajaxify" href="/sousA2.dws">Sous accueil 2</a></li>
</ul>
</li>
</ul>
*/ |
Partager