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
149
150
151
152
153
154
|
<?php
while ($products = tep_db_fetch_array($products_query)) {
$rows++;
if (strlen($rows) < 2) {
$rows = '0' . $rows;
}
// exemple de ligne du tableau
// la première ligne concerne les checkbox que je souhaite mettre en place
?>
<td class="check"><input id="check_<?php echo $products['products_id']; ?>" name="<?php echo $products['products_id']; ?>" type="checkbox" value="1" AUTOCOMPLETE=OFF /></td>
<td class="dataTableContent"><?php echo '<a href="' . tep_href_link(FILENAME_PRODUCTS_PREVIEW, '&pID=' . $products['products_id'] . '&origin=' . FILENAME_STATS_PRODUCTS_VIEWED . '?page=' . $_GET['page'], 'NONSSL') . '">' . tep_image(DIR_WS_ICONS . 'preview.gif', TEXT_IMAGE_PREVIEW) .'</a>'; ?></td>
<?php
} // end while
?>
...
<!-- Déclencheur du menu -->
<div id="actionsBox" class="actionsBox">
<div id="actionsBoxMenu" class="menu">
<span id="cntBoxMenu"></span>
<a class="button box_action">Archive</a>
<?php echo '<a class="button box_action" href="' . tep_href_link(FILENAME_STATS_PRODUCTS_VIEWED, '&resetViewed=1&products_id=' . $products['products_id'] . '&action=delete_all&page=' . $page) . '">'. IMAGE_DELETE . '</a>'; ?>
<a id="closeBoxMenu" class="button">X</a>
</div>
</div>
<script type="text/javascript">
$(function() {
/* tells us if we dragged the box */
var dragged = false;
/* timeout for moving the mox when scrolling the window */
var moveBoxTimeout;
/* make the actionsBox draggable */
$('#actionsBox').draggable({
start: function(event, ui) {
dragged = true;
},
stop: function(event, ui) {
var $actionsBox = $('#actionsBox');
/*
calculate the current distance from the window's top until the element
this value is going to be used further, to move the box after we scroll
*/
$actionsBox.data('distanceTop',parseFloat($actionsBox.css('top'),10) - $(document).scrollTop());
}
});
/*
when clicking on an input (checkbox),
change the class of the table row,
and show the actions box (if any checked)
*/
$('#mytable input[type="checkbox"]').bind('click',function(e) {
var $this = $(this);
if($this.is(':checked'))
$this.parents('tr:first').addClass('selected');
else
$this.parents('tr:first').removeClass('selected');
showActionsBox();
});
function showActionsBox(){
/* number of checked inputs */
var BoxesChecked = $('#mytable input:checked').length;
/* update the number of checked inputs */
$('#cntBoxMenu').html(BoxesChecked);
/*
if there is at least one selected, show the BoxActions Menu
otherwise hide it
*/
var $actionsBox = $('#actionsBox');
if(BoxesChecked > 0){
/*
if we didn't drag, then the box stays where it is
we know that that position is the document current top
plus the previous distance that the box had relative to the window top (distanceTop)
*/
if(!dragged)
$actionsBox.stop(true).animate({'top': parseInt(15 + $(document).scrollTop()) + 'px','opacity':'1'},500);
else
$actionsBox.stop(true).animate({'top': parseInt($(document).scrollTop() + $actionsBox.data('distanceTop')) + 'px','opacity':'1'},500);
}
else{
$actionsBox.stop(true).animate({'top': parseInt($(document).scrollTop() - 50) + 'px','opacity':'0'},500,function(){
$(this).css('left','50%');
dragged = false;
/* if the submenu was open we hide it again */
var $toggleBoxMenu = $('#toggleBoxMenu');
if($toggleBoxMenu.hasClass('closed')){
$toggleBoxMenu.click();
}
});
}
}
/*
when scrolling, move the box to the right place
*/
$(window).scroll(function(){
clearTimeout(moveBoxTimeout);
moveBoxTimeout = setTimeout(showActionsBox,500);
});
/* open sub box menu for other actions */
$('#toggleBoxMenu').toggle(
function(e){
$(this).addClass('closed').removeClass('open');
$('#actionsBox .submenu').stop(true,true).slideDown();
},
function(e){
$(this).addClass('open').removeClass('closed');
$('#actionsBox .submenu').stop(true,true).slideUp();
}
);
/*
close the actions box menu:
hides it, and then removes the element from the DOM,
meaning that it will no longer appear
//old
$('#closeBoxMenu').bind('click',function(e){
$('#actionsBox').animate({'top':'-50px','opacity':'0'},1000,function(){
$(this).remove();
});
});
*/
$('#closeBoxMenu').bind('click',function(e){
$('#actionsBox').animate({'top':'-50px','opacity':'0'},1000);
});
/*
as an example, for all the actions (className:box_action)
alert the values of the checked inputs
*/
$('#actionsBox .box_action').bind('click',function(e){
var ids = '';
$('#mytable input:checked').each(function(e,i){
var $this = $(this);
ids += 'id : ' + $this.attr('id') + ' , value : ' + $this.val() + '\n';
});
alert('checked inputs:\n'+ids);
});
});
</script> |
