[ajax] help slide mootools

**Trinità76** · 27-02-2009, 18:22

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.

**Trinità76** · 27-02-2009, 19:07

Hmm... non riesco proprio ad andare oltre..
Sono riuscito a far scrivere da una parte il valore totale degli incrementi, ma non riesco a farci i controlli e a far stoppare le barre. (vedi codice commentato)
Non sono molto pratico di ajax ... qualcuno saprebbe aiutarmi?

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(){
	
	// oggetti
	var firstObj = {
		'start': 50,
		'current': 50,
		'maxInc': 90
	};
	var secondObj = {
		'start': 20,
		'current': 20,
		'maxInc': 95
	};
	var thirdObj = {
		'start': 125,
		'current': 125,
		'maxInc': 255
	};
	
	var total = 30;
	
	$('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){
			//if( pos >= firstObj.start || pos <= firstObj.maxInc ){
			$('upd1').setHTML(pos);
			firstObj.current = parseInt( pos );
			$('total').setHTML( firstObj.start + secondObj.start + thirdObj.start + total - pos - secondObj.current - thirdObj.current );
		}
	
	}).set(firstObj.start);
	
	/* Slider 2 */
	var mySlide2 = new Slider($('area2'), $('knob2'), {
		steps: 255,	
		offset: 0,
		onChange: function(pos){
			$('upd2').setHTML(pos);
			secondObj.current = parseInt( pos );
			$('total').setHTML( firstObj.start + secondObj.start + thirdObj.start + total - pos - firstObj.current - thirdObj.current );
		}
	
	}).set(secondObj.start);
	
	/* Slider 3 */
	var mySlide3 = new Slider($('area3'), $('knob3'), {
		steps: 255,	
		offset: 0,
		onChange: function(pos){
			$('upd3').setHTML(pos);
			thirdObj.current = parseInt( pos );
			$('total').setHTML( firstObj.start + secondObj.start + thirdObj.start + total - pos - firstObj.current - secondObj.current );
		}
	
	}).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>

<p id="total" style="color:red;">XX</p>

</body>
</html>

**Straystudios** · 27-02-2009, 20:56

Forse sarebbe utile sapere un URL completo per lo script che chiami da file esterno:

src="mootools.svn.js"

**Trinità76** · 28-02-2009, 17:55

hai perfettamente ragione

sorry
http://code.google.com/p/cnetjavascr...s.svn.js&can=2

**Trinità76** · 28-02-2009, 19:28

Ho aggiornato il codice, ma non riesco a apportare quella modifica... credo bisogni appunto modificare il codice proprio dentro mootools.svn.js ... qualche idea?

codice aggiornato

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(){
	
	// oggetti
	var firstObj = {
		'start': 50,
		'current': 50,
		'maxInc': 80
	};
	var secondObj = {
		'start': 20,
		'current': 20,
		'maxInc': 95
	};
	var thirdObj = {
		'start': 125,
		'current': 125,
		'maxInc': 255
	};
	
	var totalPoints = 30;
	var startAll = firstObj.start + secondObj.start + thirdObj.start;
	
	function resetOpacity(op){
		$('knob1').setOpacity(op);
		$('knob2').setOpacity(op);
		$('knob3').setOpacity(op);
	}
	
	/* Slider 1 */
	var mySlide1 = new Slider($('area1'), $('knob1'), {
		steps: 255,	
		offset: 0,
		onChange: function( pos ){
			if( parseInt( pos ) >= firstObj.start && parseInt( pos ) <= firstObj.maxInc ){
				$('upd1').setHTML( pos );
				firstObj.current = parseInt( pos );
				$('totalPoints').setHTML( startAll + totalPoints - pos - secondObj.current - thirdObj.current );
				// colora i box quando i punti arrivano a 0, altrimenti è scuro
				resetOpacity( startAll + totalPoints - firstObj.current - secondObj.current - thirdObj.current == 0 ? 1 : 0.5 );
			}
		}
	
	}).set(firstObj.start);
	
	/* Slider 2 */
	var mySlide2 = new Slider($('area2'), $('knob2'), {
		steps: 255,	
		offset: 0,
		onChange: function( pos ){
			if( parseInt( pos ) >= secondObj.start && parseInt( pos ) <= secondObj.maxInc ){
				$('upd2').setHTML( pos );
				secondObj.current = parseInt( pos );
				$('totalPoints').setHTML( startAll + totalPoints - pos - firstObj.current - thirdObj.current );
				// colora i box quando i punti arrivano a 0, altrimenti è scuro
				resetOpacity( startAll + totalPoints - firstObj.current - secondObj.current - thirdObj.current == 0 ? 1 : 0.5 );
			}
		}
	
	}).set(secondObj.start);
	
	/* Slider 3 */
	var mySlide3 = new Slider($('area3'), $('knob3'), {
		steps: 255,	
		offset: 0,
		onChange: function( pos ){
			if( parseInt( pos ) >= thirdObj.start && parseInt( pos ) <= thirdObj.maxInc ){
				$('upd3').setHTML( pos );
				thirdObj.current = parseInt( pos );
				$('totalPoints').setHTML( startAll + totalPoints - pos - firstObj.current - secondObj.current );
				// colora i box quando i punti arrivano a 0, altrimenti è scuro
				resetOpacity( startAll + totalPoints - firstObj.current - secondObj.current - thirdObj.current == 0 ? 1 : 0.5 );
			}
		}
	
	}).set(thirdObj.start);

}); 

function getDivsContent(){
	document.getElementById('content1').value = document.getElementById('upd1').innerHTML;
	document.getElementById('content2').value = document.getElementById('upd2').innerHTML;
	document.getElementById('content3').value = document.getElementById('upd3').innerHTML;
}

</script>
	
</head>

<body>
<form id="form1" method="get" action="test.htm" onsubmit="javascript:getDivsContent();">
<input type="hidden" id="content1" name="val1" value="0" />
<input type="hidden" id="content2" name="val2" value="0" />
<input type="hidden" id="content3" name="val3" value="0" />

<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>

<p id="totalPoints" style="color:red;">XX</p>
<input name="submit" type="submit" />

</form>
</body>
</html>

**Trinità76** · 03-03-2009, 10:54

ho capito che per fare quello che mi serve bisogna modificare mootools.svn.js
qualcuno può darmi una mano? non sono affatto esperto in javascript

Discussione: [ajax] help slide mootools

Strumenti discussione

Ricerca discussione

Visualizza

[ajax] help slide mootools

Permessi di invio