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 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148
|
//Pluginf qui va associer le drag and drop et le deploiement des menus
(function($){
$.fn.shoppingList = function(options) {
// Options par defaut
var defaults = {};
var options = $.extend(defaults, options);
this.each(function(){
var obj = $(this);
// Empêcher la sélection des éléments à la sourirs (meilleure gestion du drag & drop)
var _preventDefault = function(evt) { evt.preventDefault(); };
$(".rs-Sub-Menu").bind("dragstart", _preventDefault).bind("selectstart", _preventDefault);
// Initialisation du composant "sortable"
$(obj).sortable({
axis: "y", /* Le sortable ne s'applique que sur l'axe vertical
containment: ".shoppingList", // Le drag ne peut sortir de l'élément qui contient la liste*/
handle: ".item", /* Le drag ne peut se faire que sur l'élément .item (le texte)*/
distance: 10, /* Le drag ne commence qu'à partir de 10px de distance de l'élément*/
// Evenement appelé lorsque l'élément est relaché
stop: function(event, ui){
// Pour chaque item de liste
$(obj).find(".rs-Sub-Menu").each(function(){
//$(this).find(".item").unbind('click');
// On actualise sa position
index = parseInt($(this).index()+1);
// On la met à jour dans la page
$(this).find(".count").text(index);
//Je désactive le click sur l'élément
$(this).find(".item").unbind("click");
txt = $(this).text().replace(/^\s+|\s+$/g,'');
console.log(txt);
});
}
});
// Initialisation du composant Droppable
$(obj).droppable({
// Lorsque l'on relache un élément sur la poubelle
drop: function(event, ui){
/*Je lance ma fonction click au bout d'un temps donné après avoir lacher l'élément*/
setTimeout("click($(this))",1000);
}
})
// Pour chaque élément trouvé dans la liste de départ
$(obj).find(".rs-Sub-Menu").each(function(){
// On ajoute les contrôles
addControls($(this));
});
});
/*
* Fonction qui ajoute les contrôles aux items
* @Paramètres
* - elt: élément courant (liste courante)
*
* @Return void
*/
function addControls(elt)
{
//On récupère tout les éléments contenu dans la classe html, cela comprend la bare de slid et l'oeil
var elem_subM=$(elt).children(".subMenu");
//On récupère l'id des onglets
var id_onglet=$(elt).children().attr("id");
// On ajoute un par un les block d'éléments
$(elt).html("<span class='item' id='"+id_onglet+"'>"+$(elt).text()+"</span><div class=subMenu>"+elem_subM.html()+"</div>");
//Au clic sur lélément je le réactive
$(elt).find(".item").bind('click',function f(){
var img_oeil=$(this).next("div.subMenu").children().first();
// Si le sous-menu etait deja ouvert, on le referme :
if ($(this).next(".subMenu:visible").length != 0) {
$(img_oeil).css("display","none");
$(this).next(".subMenu").slideUp("normal");
}
// Si le sous-menu est cache, on ferme les autres et on l'affiche :
else {
$(".subMenu").slideUp("normal");
$(this).next(".subMenu").slideDown("normal",
function(){
$(img_oeil).css("display","inline-block");
});
}
})
//On masque la les éléments des couches
$(".subMenu").hide();
}
// On continue le chainage JQuery
return this;
};
})(jQuery);
//fonction appeller pour réactiver le clic de l'élément
function click(elem){
$(".item").bind('click',function f(){
var img_oeil=$(this).next(".subMenu").children().first();
// Si le sous-menu etait deja ouvert, on le referme :
if ($(this).next(".subMenu:visible").length != 0) {
$(img_oeil).css("display","none");
$(this).next(".subMenu").slideUp("normal");
}
// Si le sous-menu est cache, on ferme les autres et on l'affiche :
else {
$(".subMenu").slideUp("normal");
$(this).next(".subMenu").slideDown("normal",
function(){
$(img_oeil).css("display","inline-block");
});
}
})
} |
Partager