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");
});
}
})
} |
