我刚刚设法构建一些 javascript 代码以确保多个 slider 不超过最大值 24。
问题是，当我尝试在 jquery mobile 的多页模板中使用它时，它仅适用于第一页，无法检查通过多页模板加载的第二页。
这是我的 jsFiddle，可以更好地了解情况
[JsFiddle 示例]( http://jsfiddle.net/WEewU/20/
第一页有效，第二页无效。
我试图确保页面上的任意数量的 slider 不超过 24 小时。然后在 jquery mobile 中的所有多页模板中使用此代码。
完整代码
<!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);
});
});
最佳答案
这是您的代码的一个工作示例:http://jsfiddle.net/Gajotres/e8xZ2/ 让我们来看看变化: jQuery 代码用 : 它将确保此代码在 ID 为 home 和 homn2 的页面上执行。 通过
和 你的 jQuery Mobile 有个很漂亮的东西叫页面事件。它们将在特定页面或多个页面上执行，并且它们仅适用于 jQuery Mobile 所以把它们算作特定事件。要了解更多信息，请查看此 ARTICLE ，更透明这是我的个人博客。或者找 HERE 。
*onDomReady **$(document).on('pagebeforeshow', '#home, #home2', function(){
$.mobile.activePage 访问 slider 和输入框。基本上这是一个事件页面 jQuery Mobile 选择器。$.mobile.activePage.find("#sliders1 .slider");
$.mobile.activePage.find('.value').not(this).each(function() {
jQuery Mobile 框架升级到稳定的1.2版本
关于javascript - 防止多个 slider 越过一个最大值-Jquery Mobile Multipage 模板，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/15031024/
Rails2.3可以选择随时使用RouteSet#add_configuration_file添加更多路由。是否可以在Rails3项目中做同样的事情？ 最佳答案 在config/application.rb中:config.paths.config.routes在Rails3.2(也可能是Rails3.1)中，使用:config.paths["config/routes"] 关于ruby-on-rails-Rails3中的多个路由文件，我们在StackOverflow上找到一个类似的问题
我有多个ActiveRecord子类Item的实例数组，我需要根据最早的事件循环打印。在这种情况下，我需要打印付款和维护日期，如下所示:ItemAmaintenancerequiredin5daysItemBpaymentrequiredin6daysItemApaymentrequiredin7daysItemBmaintenancerequiredin8days我目前有两个查询，用于查找maintenance和payment项目(非排他性查询)，并输出如下内容:paymentrequiredin...maintenancerequiredin...有什么方法可以改善上述(丑陋的)代
使用带有Rails插件的vim，您可以创建一个迁移文件，然后一次性打开该文件吗？textmate也可以这样吗？ 最佳答案 你可以使用rails.vim然后做类似的事情::Rgeneratemigratonadd_foo_to_bar插件将打开迁移生成的文件，这正是您想要的。我不能代表textmate。 关于ruby-使用VimRails，您可以创建一个新的迁移文件并一次性打开它吗？，我们在StackOverflow上找到一个类似的问题： https://sta
我需要从一个View访问多个模型。以前，我的links_controller仅用于提供以不同方式排序的链接资源。现在我想包括一个部分(我假设)显示按分数排序的顶级用户(@users=User.all.sort_by(&:score))我知道我可以将此代码插入每个链接操作并从View访问它，但这似乎不是“ruby方式”，我将需要在不久的将来访问更多模型。这可能会变得很脏，是否有针对这种情况的任何技术？注意事项:我认为我的应用程序正朝着单一格式和动态页面内容的方向发展，本质上是一个典型的网络应用程序。我知道before_filter但考虑到我希望应用程序进入的方向，这似乎很麻烦。最终从任何
我想要做的是有2个不同的Controller，client和test_client。客户端Controller已经构建，我想创建一个test_clientController，我可以使用它来玩弄客户端的UI并根据需要进行调整。我主要是想绕过我在客户端中内置的验证及其对加载数据的管理Controller的依赖。所以我希望test_clientController加载示例数据集，然后呈现客户端Controller的索引View，以便我可以调整客户端UI。就是这样。我在test_clients索引方法中试过这个:classTestClientdefindexrender:template=>
我有一个具有一些属性的模型:attr1、attr2和attr3。我需要在不执行回调和验证的情况下更新此属性。我找到了update_column方法，但我想同时更新三个属性。我需要这样的东西:update_columns({attr1:val1,attr2:val2,attr3:val3})代替update_column(attr1,val1)update_column(attr2,val2)update_column(attr3,val3) 最佳答案 您可以使用update_columns(attr1:val1,attr2:val2
如果您尝试在Ruby中的nil对象上调用方法，则会出现NoMethodError异常并显示消息:"undefinedmethod‘...’fornil:NilClass"然而，有一个tryRails中的方法，如果它被发送到一个nil对象，它只返回nil:require'rubygems'require'active_support/all'nil.try(:nonexisting_method)#noNoMethodErrorexceptionanymore那么try如何在内部工作以防止该异常？ 最佳答案 像Ruby中的所有其他对象
关闭。这个问题需要detailsorclarity.它目前不接受答案。想改进这个问题吗？通过editingthispost添加细节并澄清问题.关闭8年前。Improvethisquestion为什么SecureRandom.uuid创建一个唯一的字符串？SecureRandom.uuid#=>"35cb4e30-54e1-49f9-b5ce-4134799eb2c0"SecureRandom.uuid方法创建的字符串从不重复？
我正在尝试修改当前依赖于定义为activeresource的gem:s.add_dependency"activeresource","~>3.0"为了让gem与Rails4一起工作，我需要扩展依赖关系以与activeresource的版本3或4一起工作。我不想简单地添加以下内容，因为它可能会在以后引起问题:s.add_dependency"activeresource",">=3.0"有没有办法指定可接受版本的列表？~>3.0还是~>4.0？ 最佳答案 根据thedocumentation,如果你想要3到4之间的所有版本，你可以这
我有一个正在构建的应用程序，我需要一个模型来创建另一个模型的实例。我希望每辆车都有4个轮胎。汽车模型classCar轮胎模型classTire但是，在make_tires内部有一个错误，如果我为Tire尝试它，则没有用于创建或新建的activerecord方法。当我检查轮胎时，它没有这些方法。我该如何补救？错误是这样的:未定义的方法'create'forActiveRecord::AttributeMethods::Serialization::Tire::Module我测试了两个环境:测试和开发，它们都因相同的错误而失败。 最佳答案