我发现了两个优秀的jquery插件,用于为Web表单生成一个滑块,在不支持javascript的浏览器中关闭样式会很好地降级.
第一个是Jquery.UI版本:http://ui.jquery.com/demos/slider/#steps
第二个是滑块的选择元素:http://www.filamentgroup.com/lab/update_jquery_ui_16_slider_from_a_select_element/
但是我需要创建一个滑块,它不仅可以将滑块分成相等的部分.
例如,假设我有以下数字范围:
800,1000,1100,1200,1300,1400,1500
我希望滑块在800到1000之间有一个很大的差距,然后在1100-1500之间有较小的间隙
所以滑块看起来有点像这样:
800 ---- 1000--1100--1200--1300--1400--1500
我希望它能降级到下拉,所以问题是有没有人知道支持这个的插件或者有最好的实现方法的建议,定制我自己的filamentgroup插件卷等.
更新:使用灯丝组的滑块进行黑客攻击,无论如何它通过JQuery UI的滑块实现了手柄.所以看起来像修改JQuery.UI它的self是唯一可用的选项.将在代码中挖掘,看看我是否能找到需要改变的必要位.如果在此期间任何人有任何想法!
我是Javascript和JQuery的新手,我正在尝试使用JQuery UI Slider替换我的一个网站的价格范围下拉框(一个用于最低价格,另一个用于最高价格).
这是我目前的代码:
$(function() {
var slider = $( "#slider-range" ).slider({
range: true,
min: 0,
max: 2500000,
step: 1000,
values: [ 0, 2500000 ],
slide: function( event, ui ) {
$( "#amount" ).val( "RM " + commafy(ui.values[ 0 ]) + " to RM " + commafy(ui.values[ 1 ]) );
}
});
$( "#amount" ).val( "RM " + commafy($( "#slider-range" ).slider( "values", 0 )) +
" to RM " + commafy($( "#slider-range" ).slider( "values", 1 )) );
function commafy(val) { …Run Code Online (Sandbox Code Playgroud)