个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
25
4
我有一个 div，它显示 slider 的当前值，并且 div 随 slider 位置移动。
基于 Using offset and jQuery slider 的答案
我想出了以下代码:
function SliderSetup()
{
$("#slider").slider({
value:0,
min: -10,
max: 10,
step: 2,
animate:false,
slide: function(event, ui) {
setTimeout(showVal, 10);
}
});
$("#slider").slider("value", 0);
showVal(); //setTimeout(showVal, 10) does not work either
}
function showVal() {
var position = $('.ui-slider-handle:first').position(); //i tried offset()-didnt work
var value = $('#slider').slider('value');
$('#value1').text(value).css({'left':position.left});
}
当用户使用 slider 时，div 位置是正确的，但默认情况下该值不在正确的位置。截图如下
编辑:标记
<tr>
<td width="30%">
<h2>
Select Value</h2>
</td>
<td width="60%">
<div id="value1"> </div>
<div id="slider">
</div>
</td>
<td>
<div id="myDiv">
</div>
</td>
</tr>
最佳答案
我认为您的标记有问题(初始值元素宽度？)，或者在元素准备好后没有触发此问题。无论如何，这是一个完整的工作示例:
<html>
<head>
<title>Test</title>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/ui-lightness/jquery-ui.css" rel="stylesheet" />
<style type="text/css">
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>
<script type="text/javascript">
function SliderSetup()
{
$("#slider").slider({
value:0,
min: -10,
max: 10,
step: 2,
animate:false,
slide: function(event, ui) {
setTimeout(showVal, 10);
}
});
$("#slider").slider("value", 0);
showVal();
}
function showVal() {
var slider = $('.ui-slider-handle:first');
var position = slider.offset();
var value = $('#slider').slider('value');
var val = $('#value1');
val.text(value).css({'left':position.left + ((slider.width() - val.width()) /2), 'top':position.top -20 });
}
$(function(){
SliderSetup();
});
</script>
</head>
<body>
<br/><br/><br/>
<div id="value1" style="position: absolute"></div>
<div id="slider"></div>
</body>
</html>
代码间隔很大，希望能帮助您更快地找到问题。 css 的更改只是我将值更精确地集中在 slider 顶部，当然可以更改为您想要的任何位置。要检查值元素的宽度，请尝试定义此 css，这可能是您唯一的问题，在没有看到标记的情况下无法确定:
#value1 { border: solid 1px red; }
关于JQuery slider handle 位置()不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/2397397/
25
4
0
我想使用foreach 来等待线程终止。但是，出现以下错误，没有实现。请告诉我。 cannot move out of `*handle` which is behind a shared refer
如果在TypoScript中未配置给定的typeNum，则TYPO3将抛出Exception/CMS/1294587217。 背景:从另一个系统迁移到TYPO3后，我们遇到了许多此类异常，因为在那里使
我需要一个带有 2 个 handle 的 slider ，一个可拖动，另一个固定。我正在使用 Jquery UI slider 。这是我到目前为止尝试过的:http://jsfiddle.net/8K
给定文件的HANDLE(例如C:\\FolderA\\file.txt)，我想要一个函数，该函数会将HANDLE返回到包含的目录(在前面的示例中，它将是C:\\FolderA的HANDLE)。例如:
我想通过Automic在Unix中检查文件。如果该文件不存在，则应切换主机并检查文件是否存在。 问题是，我现在不执行错误处理。 每当脚本对象正在处理并且找不到文件时，skript都会中止。我在skri
鉴于: fruitid('Apple', 'Granny Smith', 1). fruitid('Apple', 'Cox', 2). fruitid('Pear', 'Bartlett', 3).
我有一个基于Spring的Wicket应用程序。 有一个池化的数据源bean。 现在，当MySQL死了时，我得到了带有堆栈跟踪的默认Wicket错误页面。 我想处理这种情况，只允许某些页面完全显示(静
我希望能够一次查询多个句柄，其中表格具有相同的格式，例如: 句柄:8000,8001,8003表:foo 想要做这样的事情: x:hopen `8000`8001`8003 x select from
我对在Swift 3中引发自定义异常有些困惑。 在C++中，我可以执行此操作以立即停止方法中的进程，抛出错误并进行处理，而无需进一步进行操作。 void foo() { try {
我一直在阅读MSDN开发人员COM指南。但是this page上的代码令人困惑。在此处复制: The following code sample shows the recommended way o
我有一个计划的批处理文件每天都会启动的过程。如果有错误，我需要内置错误处理才能重启进程。所有这些在大多数情况下都有效，但是我每个月都会收到一次超时错误，所以这是不可避免的。该进程不会将错误级别输出到b
我正在尝试从 chartlyrics API 获取歌词。我编写了一个可以运行但不能在循环内运行的 R 函数。我的脚本是: library(httr) library(RCurl) library(XM
在libuv事件循环中调用prepare handle callback和check handle callback的原因是什么？ 最佳答案 I/O 操作发生在这两者之间，因此您可能希望在阻塞 I/O
我正在尝试在 R 中安装 BTYplus 包。 devtools::install_github("mplatzer/BTYDplus", dependencies=TRUE) library(BTY
我有一个Arduino，可以使用pySerialTransfer库通过串行与Mac正常通信，并且可以运行数小时。然后是某种形式的串行中断-尽管一夜间发生时我一直无法确定原因，但只要从笔记本电脑上拔下A
我是hooks和async/await的新手。我正在尝试处理Axios调用中的错误，并且不确定如何使用then/catch或try/catch处理我的API调用中的错误。 在基于类的React中，我将
我正在尝试向脚本中添加一些内容，以便让我知道我复制的文件是否已被完全复制。 基本上，我要压缩一堆文件，然后将它们发送到网络上的映射驱动器。然后，一旦文件被成功复制，我将脚本删除原始位置的文件。该脚本可
我有一个圆形 slider ，其中绘制了一条贝塞尔弧，一个圆弧在 slider 的起点和终点有两个 handle ，圆弧是在圆形 slider 中绘制的。 借助开始和结束 handle ，我可以沿着圆
删除 NULL 指针是安全的。 int* p = NULL; delete p; // ok, secure 句柄是什么？ HANDLE h = NULL; CloseHandle(h
如果您没有在 dojo.connect 期间返回的“句柄”，您如何删除 dojo 连接事件？ 我的示例涉及将一组事件动态分配给一组对象。 (为简单起见，事件是 onclick 和 ondblclick
我是一名优秀的程序员,十分优秀！