标签: jquery-ui-slider
jQuery UI滑块移动设备上的触摸和拖放支持
我已经在项目中设计并实现了jQuery UI滑块.虽然它可移动并且可以正确缩放,但它不允许轻击和拖动.相反,你必须触摸滑块的位置.jQuery移动UI支持这一点,但我有时间投入已有的东西.
在桌面上你无法区分.在移动设备上很明显.
任何人都知道如何将此支持添加到jquery UI？
$("#cameraSlider").slider({
value: 2,
min: 1,
max: 3,
step: 1,
slide: function(event, ui) {
cameramen = ui.value;
return calcTotal();
}
});
谢谢,赛斯
97
推荐指数
推荐指数
2
解决办法
解决办法
8万
查看次数
查看次数
触发jQuery UI滑块事件
如何在jQuery UI滑块上触发更改事件？
我以为会是
$('#slider').trigger('slidechange');
但这没有任何作用.
完整示例脚本如下:
<link href="http://jqueryui.com/latest/themes/base/ui.all.css" rel="stylesheet" type="text/css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js" type="text/javascript"></script>
<script src="http://jqueryui.com/latest/ui/ui.core.js" type="text/javascript"></script>
<script src="http://jqueryui.com/latest/ui/ui.slider.js" type="text/javascript"></script>
<body>
<div id="slider"></div>
<script type="text/javascript">
$().ready(function()
{
$('#slider').slider({change: function() { alert(0); }});
// These don't work
$('#slider').trigger('change');
$('#slider').trigger('slidechange');
});
</script>
当页面加载时,我希望这会警告"0"
53
推荐指数
推荐指数
3
解决办法
解决办法
8万
查看次数
查看次数
如何从jQuery UI滑块获取价值？
我正在研究http://gamercity.info/ymusic/.我正在使用UI滑块作为搜索栏.播放视频时,seekTo(seconds)如果用户在搜索栏上的任意位置单击,我想调用一个函数.如何获得seconds点击事件后的新价值？
39
推荐指数
推荐指数
5
解决办法
解决办法
8万
查看次数
查看次数
滑块下的jQuery UI滑块标签
我只能使用jQuery 1.4.2和jQuery ui 1.8.5(这不是选择,请不要让我升级到最新版本).我创建了一个滑块,显示滑动条上方的当前值,但我现在需要的是一种方法来填充滑块下方与滑块相同距离的图例(即如果滑块宽度为100px且有五个值滑块将每20px捕捉一次.在本例中,我希望图例中的值以20px间隔放置.
这是我想要的一个例子:
这是我的jQuery(从ui滑块演示页面吸收):
//select element with 5 - 20 options
var el = $('.select');
//add slider
var slider = $( '<div class="slider"></div>' ).insertAfter( el ).slider({
min: 1,
max: el.options.length,
range: 'min',
value: el.selectedIndex + 1,
slide: function( event, ui ) {
el.selectedIndex = ui.value - 1;
slider.find("a").text(el.options[el.selectedIndex].label);
},
stop: function() {
$(el).change();
}
});
slider.find("a").text(el.options[el.selectedIndex].label); //pre-populate value into slider handle.
38
推荐指数
推荐指数
4
解决办法
解决办法
6万
查看次数
查看次数
jQuery readonly滑块 - 怎么办？
我怎样才能有一个只读的jQuery滑块？一个会显示一个值,但不允许用户移动它？
谢谢
20
推荐指数
推荐指数
3
解决办法
解决办法
2万
查看次数
查看次数
如何重置jQuery UI滑块？
<!-- dirty -->
<head>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<script>
$(function() {
$( "#slider-range" ).slider({
range: true,
min: 0,
max: 500,
values: [ 75, 300 ],
slide: function( event, ui ) {
$( "#amount" ).val( "$" + ui.values[ 0 ] + " - $" + ui.values[ 1 ] );
}
});
$( "#amount" ).val( "$" + $( "#slider-range" ).slider( "values", 0 ) +
" - $" + $( "#slider-range" ).slider( "values", 1 ) );
});
</script>
</head> …17
推荐指数
推荐指数
3
解决办法
解决办法
3万
查看次数
查看次数
jQuery UI Slider:沿着句柄移动值
我在页面中使用了jQuery UI滑块组件来设置一系列价格.我也可以使用他们的ui.values []来设置和显示其他div中的新值.
如何查看句柄下的新值.即如果我将句柄移动到100美元,我想在该句柄下设置"$ 100"文本.
顺便说一句,我使用范围版本 - 设置一系列价格,所以我的滑块上有两个手柄(最小和最大).
var minPriceRange=100;
var maxPriceRange=500;
$( "#priceRangeSlider" ).slider({
range: true,
min: minPriceRange,
max: maxPriceRange,
step: 10,
values: [ minPriceRange, maxPriceRange ],
slide: function( event, ui ) {
("#fromRangeText").text("$" + ui.values[ 0 ]);
$("#toRangeText").text("$" + ui.values[ 1 ]);
}
});
16
推荐指数
推荐指数
2
解决办法
解决办法
3万
查看次数
查看次数
带文本框输入的ui滑块
我们使用了ui滑块,它完美无瑕.
码:
jQuery(function() {
jQuery( "#slider-range-min" ).slider({
range: "min",
value: 1,
step: 1000,
min: 0,
max: 5000000,
slide: function( event, ui ) {
jQuery( "#amount" ).val( "$" + ui.value );
}
});
jQuery( "#amount" ).val( "$" + $( "#slider-range-min" ).slider( "value" ) );
});
如您所见,我们允许用户选择0到5,000,000之间的任何内容.
Html是:
<div id="slider-range-min" style="width: 460px; float:left;margin:10px;"></div>
我想要做的是添加一个与滑块协调工作的文本输入元素,以便用户滑动texy框增加,减少任何...
或者,如果用户在输入元素中键入数字,则滑块适当地移动.
有什么帮助吗？
预览是:
16
推荐指数
推荐指数
1
解决办法
解决办法
4万
查看次数
查看次数
Jquery UI Slider在输入字段中更改时更改滑块的值
$("#storlekslider").slider({
range: "max",
min: 0,
max: 1500,
value: 0,
slide: function(event, ui) {
$("#storlek_testet").val(ui.value);
$(ui.value).val($('#storlek_testet').val());
}
});
// $( "#storlek_testet" ).val( $( "#storlekslider" ).slider( "value" ) );
$("#storlek_testet").change(function() {
$("#storlekslider").slider("value", $(this).val());
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.9.0/jquery-ui.js"></script>
<link rel="stylesheet" type="text/css" href="https://code.jquery.com/ui/1.9.0/themes/base/jquery-ui.css">
<div id="storlekslider"></div>
<input type="text" name="storlek" id="storlek_testet" value="500" />这是一个小提琴手
我改变输入字段中的值时试图让滑块跳转到正确的位置.我使用Jquery UI滑块.
15
推荐指数
推荐指数
3
解决办法
解决办法
4万
查看次数
查看次数
即使值没有改变,jQuery UI滑块'change'事件也会触发
我试图在用户滑动滑块时触发事件,并在滑动停止时更改值.根据jQuery文档,该change事件对于这种情况是理想的.所以我试试这个:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>jQuery UI Slider - Default functionality</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css" />
<script>
$(function() {
$( "#slider" ).slider({
change:function() { alert("foo"); }
});
});
</script>
</head>
<body>
<div id="slider"></div>
</body>
</html>
但是,我观察到当我将滑块向右拖动并再次将其拖回到起点(页面加载时滑块的初始位置)时,警报仍然会触发.这是一个jQuery错误吗？如果不是,我该如何解决这个问题？
14
推荐指数
推荐指数
1
解决办法
解决办法
4万
查看次数
查看次数
标签 统计
jquery-ui-slider ×10
jquery ×9
jquery-ui ×8
javascript ×3
events ×1
slider ×1
touch ×1
uislider ×1