Salve.
Ecco il mio codice:
codice:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>.</title>
<link rel="stylesheet" type="text/css" media="screen" href="cssCode.css" />
<script type="text/javascript" src="mootools.svn.js"></script>
<script type="text/javascript">
window.addEvent('domready', function(){
var firstObj = {
'start': 50,
'maxInc': 240
};
var secondObj = {
'start': 20,
'maxInc': 95
};
var thirdObj = {
'start': 125,
'maxInc': 255
};
$('knob1').setOpacity(0.5);
$('knob2').setOpacity(0.5);
$('knob3').setOpacity(0.5);
/* Slider 1 */
var mySlide1 = new Slider($('area1'), $('knob1'), {
steps: 255,
offset: 0,
onChange: function(pos){
$('upd1').setHTML(pos);
}
}).set(firstObj.start);
/* Slider 2 */
var mySlide2 = new Slider($('area2'), $('knob2'), {
steps: 255,
offset: 0,
onChange: function(pos){
$('upd2').setHTML(pos);
}
}).set(secondObj.start);
/* Slider 3 */
var mySlide3 = new Slider($('area3'), $('knob3'), {
steps: 255,
offset: 0,
onChange: function(pos){
$('upd3').setHTML(pos);
}
}).set(thirdObj.start);
});
</script>
</head>
<body>
<h3>Slider 1</h3>
<div id="area1">
<div id="knob1"></div>
</div>
<p id="upd1">XX</p>
<h3>Slider 2</h3>
<div id="area2">
<div id="knob2"></div>
</div>
<p id="upd2">XX</p>
<h3>Slider 3</h3>
<div id="area3">
<div id="knob3"></div>
</div>
<p id="upd3">XX</p>
</body>
</html>
e questo è il css incluso
codice:
#area1, #area2, #area3 {
position: relative;
height: 15px;
width: 280px;
background: #000;
}
#knob1, #knob2, #knob3 {
position: absolute;
height: 15px;
width: 20px;
background: #ff3300;
cursor: pointer;
}
Lo script in questione è un mootools preso da qui:
http://demos111.mootools.net/Slider
Funziona tutto a dovere. Dovrei implementare dei controlli sulle slide e non so come fare qualcuno saprebbe aiutarmi?
Il problema è questo.
Ho tre barre (slide) che vanno da 0 a 255.
Dovrei impostare un livello massimo per ogni barra (vedi proprietà maxInc) e bloccare ogni barra a superare sia il suo valore maxInc e sia inibire la discesa sotto il valore minimo di partenza start.
Inoltre, dovrei inserire un valore massimo di incremento globale (esempio 50) oltre il quale, non è possibile aumentare le tre barre assieme. In questo caso le tre barre complessivamente potranno muoversi in avanti complessivamente per 50 punti.