个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
24
4
我有一个带有 4 个 handle 的 slider 。 slider 用于选择一天开始时间、午餐开始时间、午餐结束时间和一天结束时间。
handle A 可以以 15 分钟为步长移动。 (9:15、9:30等)
handle B 应以 30 分钟的步长从 handle A 移动。(如果 A 设置为 9:15，则 B 只能滑动到 9:45、10:15 等。
handle C可以从 handle B移动15分钟
handle D 应再次从 handle C 移动 30 分钟。
slider 是这样的
步骤:---15分钟------------30分钟------15分钟------------30分钟--------
-----------|A|--------------------|B|----------|C|-- --------------|D|----------------
----------9:00--------------12:00-----13:30--------- -16:00
几个有效的 slider 状态示例来澄清问题:
-|A|------------|B|------------|C|---------------- ---|D|
9:15--------12:15---------13:00----------------15:00
-|A|------------|B|-------------|C|------------- ------|D|
9:30-----12:00---------13:00----------------16:30
有没有办法将步长设置为 [15,30,15,30]，就像我将值设置为 [60, 240, 360, 540] 一样？
请帮忙!谢谢。
最佳答案
您可以使用 jQuery UI Slider 的启动事件来实现它。当您开始滑动时，识别句柄并更新 jQuery UI Slider 的 step 属性。
HTML:
<body>
<div id="slider-range"></div>
</body>
脚本:
$(function () {
$("#slider-range").slider({
min: 0,
max: 1500,
values: [75, 300, 700, 1000],
start: function (event, ui) {
var hIndex = $(ui.handle).index();
if (hIndex == 0 || hIndex == 2) {
$("#slider-range").slider("option", "step", 15);
}
if (hIndex == 1 || hIndex == 3) {
$("#slider-range").slider("option", "step", 30);
}
},
slide: function (event, ui) {
if (ui.values[0] > ui.values[1] || ui.values[1] > ui.values[2] || ui.values[2] > ui.values[3]) {
return false;
}
console.log("Handle 1:" + ui.values[0] + " 2:" + ui.values[1]+ " 3:" + ui.values[2]+ " 4:" + ui.values[3]);
}
});
});
请参阅Demo
关于jquery - 具有多个句柄的 jquery slider 中不同句柄的不同 "step"值，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/21377258/
24
4
0
在我用 OpenCascade 生成的 STEP 文件中，我可以看到: #58 = VERTEX_POINT('',#59); #59 = CARTESIAN_POINT('',(-0.5,-0.5,
这个问题在这里已经有了答案: How to use Firebug's debugger functions? (1 个回答) 关闭 8 年前。 我是 FireBug 调试器的新手，谁能告诉我什么是
已关闭。此问题不符合Stack Overflow guidelines 。目前不接受答案。 要求我们推荐或查找工具、库或最喜欢的场外资源的问题对于 Stack Overflow 来说是偏离主题的，因为
我想知道 Eclipse IDE 中是否存在任何功能，可以在执行 selenium 脚本 时“从步骤进行调试” “单步执行”、“单步执行”。 “QTP” 和大多数专有功能自动化工具中都提供此功能。我假
我正在寻找 .stp/.step 文件的某种规范、文档、解释等。 更多的是关于每行包含哪些信息而不是一般信息。 我似乎无法自己弄清楚每个值的含义。 有谁知道一些关于 STEP 文件的好读物？ 我已经搜
我写了下面的代码: Mockup TOPdesk
我正在尝试研究 java String 类中的方法如何工作，因此我创建了一些调用该 String 类方法的自定义代码。 如您所见，我在自己的代码中设置了一个断点，并且在 java String 类源代
我有某些功能，需要我进行一个 api 调用来检索第二个 api 调用中使用的某个 id，逻辑上它看起来像这样: componentWillMount () { this.props.functio
在本地使用 AppEngine(即使用 dev_appserver.py)时，是否可以进行逐步调试？使用 logging.info() 或类似的函数来显示代码中所有变量的值并确定错误的位置是一种过时的
我正在使用 JQuery Steps，它非常好。但事实证明有些事情很棘手。 假设我在第 2 步。根据我在表单中选择的内容，我可能想在单击“下一步”时直接跳到第 4 步，并且进一步禁用第 3 步 anc
我已经包含了 jquery-steps 插件。 如何更改按钮文本？ 现在它说“完成”我想把它改成“去” 谢谢 最佳答案 查看以下内容 link .您可以在初始化时更改所有标签。 var setting
在(现已弃用的) Angular 场景测试运行器中，有一个选项可以创建一个 runner.html 页面，该页面将在 iFrame 中运行测试，同时在主页中逐步报告进度。 有没有办法获得类似的 Pro
我有使用标签 的 primefaces 步骤像下面这样: 结果是这样的: 我可以点击步骤 1，但不能点击步骤 3 和 4。如何为所有步骤启用点击？ 最佳答案 哇，
给定一个使用分区的 Spring Batch 作业，是否可以有多个分区步骤？ 例如: 在上面的示例中，是否可以将另一个分区
假设您要从数据库中获取一条记录，该记录返回大量数据并且需要多次连接。 所以我的问题是，使用单个查询来检查数据是否存在并在存在时获取结果是否更好？或者做一个更简单的查询，检查数据是否存在然后id记录是否
我如何创建一个具有整数输入类型而不是字符串的任务，例如我想启动一个状态机: "SomeStage": { "Comment": "Getting busy
我还没有看到有人问过这个问题——尽管我确实阅读了大约 100 个关于类似主题的 jQuery 步骤——似乎没有一个能解决我的问题。 我正在使用 jQuery-steps 并希望在第一步完成后添加一个“
我想知道是否可以在 Laravel 5.3 中逐个迁移。 我无法使 --step 选项正常工作，文档仅提及此选项与 rollback 或 refresh 一起使用命令。 // this works p
我已按照 AWS 文档中的步骤在本地设置和运行 AWS Step Functions:https://docs.aws.amazon.com/step-functions/latest/dg/sfn-
我已按照 AWS 文档中的步骤在本地设置和运行 AWS Step Functions:https://docs.aws.amazon.com/step-functions/latest/dg/sfn-
我是一名优秀的程序员,十分优秀！