6
ho appena riuscito a costruire un po 'di codice javascript per garantire che i multipli cursori non superare il valore massimo di 24.evitare che più cursori di andare oltre un modello valore max-jQuery Mobile multipagina
Il problema è che quando provo e utilizzalo in un modello multipagina in jquery mobile, funziona solo per la prima pagina e non riesce a controllare la seconda pagina caricata tramite il modello multipagina.
Ecco il mio jsFiddle per dare una migliore idea della situazione
[esempio JsFiddle] (http://jsfiddle.net/WEewU/20/
prima pagina opere, 2 ° pagina non lo fa.
sto cercando di garantire che qualsiasi il numero di cursori su una pagina NON supera le 24 ore e quindi utilizzare questo codice su tutti i modelli multi-pagina in jquery mobile
Codice completo
<!DOCTYPE html>
<head>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0-alpha.1/jquery.mobile-1.2.0-alpha.1.min.css"
/>
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0-alpha.1/jquery.mobile-1.2.0-alpha.1.min.js"></script>
</head>
<body>
<form>
<!-- Home Page-->
<div data-role="page" id="home">
<div data-role="header" data-position="fixed" data-id="myheader">
<h1>test</h1>
</div>
<!-- /header -->
<div data-role="content">
<ul id="sliders1">
<li>
<input type="range" id="slider" class="value" name="slider1" value="0"
min="0" max="24" data-highlight="true" />
</li>
<li>
<input type="range" class="value" id="slider" name="slider2" value="0"
min="0" max="24" data-highlight="true" />
</li>
<li>
<input type="range" class="value" id="slider" name="slider3" value="0"
min="0" max="24" data-highlight="true" />
</li>
</ul> <a href="#home2">Link to 2nd page</a>
</div>
</div>
<div data-role="page" id="home2">
<div data-role="header" data-position="fixed" data-id="myheader">
<h1>test</h1>
</div>
<!-- /header -->
<div data-role="content">
<ul id="sliders">
<li>
<input type="range" id="slider" class="value" name="slider4" value="0"
min="0" max="24" data-highlight="true" />
</li>
<li>
<input type="range" class="value" id="slider" name="slider5" value="0"
min="0" max="24" data-highlight="true" />
</li>
<li>
<input type="range" class="value" id="slider" name="slider6" value="0"
min="0" max="24" data-highlight="true" />
</li>
</ul> <a href="#home">Link to Home</a>
</div>
</div>
</form>
</body>
Javascript
var sliders = $("#sliders1 .slider");
sliders.each(function() {
var max = 24;
var value = Number($(this).text(), 10),
availableTotal = max;
});
$(".value").change(function() {
var thisAmount = Number($(this).prop("value"));
var totalMax = 24;
var indMin = Number($(this).attr("min"));
var indMax = Number($(this).attr("max"));
var total = 0;
//Get the values of all other text boxes
$('.value').not(this).each(function() {
total += Number($(this).prop("value"));
});
//Find the remaining from our total sliders max
var remaining = totalMax - total;
if (remaining < 0) {
remaining = 0;
}
//if we are under our minimums, go for it! Otherwise, reduce the number.
if (thisAmount >= indMin && thisAmount < indMax && thisAmount < totalMax && thisAmount < remaining) {
$(this).siblings(".slider").slider("option", "value", thisAmount);
//total += thisAmount;
} else {
//var setMax = ((indMax + totalMax) - Math.abs(indMax - totalMax))/2;
var setMax = Math.min(indMax, totalMax, remaining);
$(this).siblings(".slider").slider("option", "value", setMax);
$(this).prop("value", setMax);
//total += (thisAmount - setMax);
}
//above was getting buggy, so lets just reset total and get it again
total = 0;
//Get the values of all text boxes
$('.value').each(function() {
total += Number($(this).prop("value"));
});
//Find our new remaining number after updating total for this value
remaining = totalMax - total;
if (remaining < 0) {
remaining = 0;
}
//Set each slider to the current point and update their max values.
$('.value').each(function() {
var sliderVal = Number($(this).prop("value"));
var sliderMin = Number($(this).attr("min"));
var sliderMax = Number($(this).attr("max"));
var setNewMax = (((sliderMax + totalMax) - Math.abs(sliderMax - totalMax))/2);
var newMax = sliderVal + remaining;
if (newMax < setNewMax) {
$(this).siblings('.slider').slider("option", "max", newMax);
} else {
$(this).siblings('.slider').slider("option", "max", setNewMax);
}
$(this).prop("max", setNewMax);
});
});
Grazie! Non mi rendevo conto che jquery mobile aveva una pagina attiva trovata per cursori e caselle di input. Ha molto più senso. – user2100493