Geek Answers Handbook

Prevent the transition of multiple sliders to the maximum value. Jquery Mobile Multipage Template

I just managed to create javascript code to ensure that multiple sliders do not exceed the maximum value of 24.

The problem is that when I try to use this in a multi-page jquery mobile template, it only works for the first page and cannot check the second page loaded through the multi-page template.

Here is my jsFiddle to better understand the situation.

[JsFiddle example] ( http://jsfiddle.net/WEewU/20/

the first page works, the second page does not.

I am trying to ensure that any number of sliders per page does not exceed 24 hours. And then use this code for all multi-page templates in jQuery mobile.

Full code

<!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); }); });
+6
source share
1 answer

jQuery Mobile has a beautiful thing called page events. They will run on a specific page or on multiple pages, and they only work with jQuery Mobile , so consider them specific events. To learn more about him, look at ARTICLE , to be more transparent, this is my personal blog. Or find HERE .

This is a working example of your code: http://jsfiddle.net/Gajotres/e8xZ2/

Let's look at the changes:

  • In the upper left corner of jQuery 1.8.3 selected and changed to * *onDomReady **

  • JQuery code is initialized with:

     $(document).on('pagebeforeshow', '#home, #home2', function(){

    He will ensure that this code is executed on pages with id home and homn2 .

  • Sliders and input fields are available using $.mobile.activePage . This is basically the active jQuery Mobile page.

     $.mobile.activePage.find("#sliders1 .slider");

    and

     $.mobile.activePage.find('.value').not(this).each(function() {

  • jQuery Mobile structure updated to version 1.2 version

+3
source

More articles:


All Articles