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
| WEBROOT = window.location.origin + '/Test';
function modifValues(){
var val = $('#progress progress').attr('value');
if(val>=100){val=1;}
var newVal = val*1+0.25;
var txt = Math.floor(newVal)+'%';
$('#progress progress').attr('value',newVal).text(txt);
$('#progress strong').html(txt);
}
$(function() {
//the form wrapper (includes all forms)
var $form_wrapper = $('#form_wrapper'),
//the current form is the one with class active
$currentForm = $form_wrapper.children('form.active'),
//the change form links
$linkform = $form_wrapper.find('.linkform');
//get width and height of each form and store them for later
$form_wrapper.children('form').each(function(i){
var $theForm = $(this);
//solve the inline display none problem when using fadeIn fadeOut
if(!$theForm.hasClass('active'))
$theForm.hide();
$theForm.data({
width : $theForm.width(),
height : $theForm.height()
});
});
//set width and height of wrapper (same of current form)
setWrapperWidth();
/*
clicking a link (change form event) in the form
makes the current form hide.
The wrapper animates its width and height to the
width and height of the new current form.
After the animation, the new form is shown
*/
$linkform.bind('click',function(e){
var $link = $(this);
var target = $link.attr('rel');
$currentForm.fadeOut(400,function(){
//remove class active from current form
$currentForm.removeClass('active');
//new current form
$currentForm= $form_wrapper.children('form.'+target);
//animate the wrapper
$form_wrapper.stop()
.animate({
width : $currentForm.data('width') + 'px',
height : $currentForm.data('height') + 'px'
},500,function(){
//new form gets class active
$currentForm.addClass('active');
//show the new form
$currentForm.fadeIn(400);
});
});
e.preventDefault();
});
function setWrapperWidth(){
$form_wrapper.css({
width : $currentForm.data('width') + 'px',
height : $currentForm.data('height') + 'px'
});
}
/*
for the demo we disabled the submit buttons
if you submit the form, you need to check the
which form was submited, and give the class active
to the form you want to show
*/
$('#find').click(function(e){
e.preventDefault();
var serie = $('.select').find("option:selected").val();
var param = 'num_serie='+serie;
$.ajax({
type: "POST",
url: WEBROOT + '/index/GetDisque',
data: param,
dataType: 'json',
async: false,
success: function(data) {
$('#wdt').val(data.D_T);
$('#wd').val(data.W_D);
$('#wfs').val(data.W_F_S);
$('#capacite').val(data.Capacity);
$('#model').val(data.Model);
$('#desc').val(data.Description);
$('#SMART_S').val(data.SMART_S);
$('#N_ON_H').val(data.N_ON_H);
}
});
});
$('#save').click(function(e){
e.preventDefault();
var serie = $('#num_serie').val();
var wdt = $('#wdt2').val();
var wd = $('#wd2').val();
var wfs = $('#wfs2').val();
var capacite = $('#capacite2').val();
var model = $('#model2').val();
var desc = $('#desc2').val();
var N_ON_H = $('#N_ON_H2').val();
var SMART_S = $('#SMART_S2').val();
var param = 'num_serie='+serie+'&wdt='+wdt+'&wd='+wd+'&wfs='+wfs+'&model='+model+'&capacite='+capacite+'&desc='+desc+'&NONH='+N_ON_H+'&SMARTS='+SMART_S;
$.ajax({
type: "POST",
url: WEBROOT + '/index/SaveDisque',
data: param,
dataType: 'json',
async: false,
success: function(data) {
console.log(data);
if (data === 0){
window.location.reload();
}
}
});
});
$('#findall').click(function(e){
e.preventDefault();
var fin = $('#date_fin').val();
var debut = $('#date_debut').val();
var param = 'd_fin='+fin+'&d_debut='+debut;
var html=''
$.ajax({
type: "POST",
url: WEBROOT + '/index/GetDisqueDate',
data: param,
dataType: 'json',
async: false,
success: function(data) {
$.each(data,function(index,val){
html+= '<tr><td>'+val.SN+'</td>';
html+='<td>'+val.Model+'</td>';
html+='<td>'+val.Capacity+'</td>';
html+='<td>'+val.W_F_S+'</td>';
html+='<td>'+val.W_D+'</td>';
html+='<td>'+val.Description+'</td>';
html+='<td>'+val.D_T+'</td>';
html+='<td>'+val.N_ON_H+'</td>';
html+='<td>'+val.SMART_S+'</td></tr>';
html+='<td><div id="progress"><p><strong>0%</strong></p><progress value="5" min="0" max="100">0%</progress></div></td>'
setInterval(function(){
modifValues();
},parseInt(val.W_D)*1);
});
$("#keywords tbody").html(html);
}
});
});
}); |
Dynamic Progress bar
Répondre avec citation
Pas de question technique par MP !
Partager