Sap*_*ppy 8 jquery slider range device touch
下面是我的Jquery滑块范围(最小 - 最大)代码,拖动在台式计算机上正常工作,但是当我在iPad上测试它时,它不起作用.有人可以帮我这个吗?
不幸的是我无法附加图片.下面是滑块范围图,
=====(>)=======(<)=====
var maxValue,myRequest,isDown=false,setUrl;
setUrl = "/search_type/filter.php";
$( "#slider-range" ).slider({
range: true,
min: 0,
max: 500,
step:25,
orientation: "horizontal",
values: [ 0,500 ],
slide: function( event, ui ) {
if(ui.values[1] === 500)
{
maxValue = 500+"+";
}
else
{
maxValue = ui.values[1];
}
$( "#priceRange" ).val( "£" + ui.values[ 0 ] + " to £" + maxValue );
}
});
// AJAX CALL
$("#slider-range").find('a').mousedown(function(){
isDown=true;
});
$(document).mouseup(function(){
if(isDown)
{
return setAjaxRequest();
}
});
// Decoration drag image
$( "#slider-range" )
.find('.ui-slider-handle')
.eq(0).addClass('a-right').end()
.eq(1).addClass('a-left');
//Default this is
$( "#priceRange" )
.val( "£" + $( "#slider-range" )
.slider( "values", 0 ) + " to £" + $( "#slider-range" )
.slider( "values", 1 )+'+');
return true;
Run Code Online (Sandbox Code Playgroud)
按照建议,我使用了http://touchpunch.furf.com/
它工作得很好!
进入我使用的 HTML 页面:
<script src="_js/jquery-1.9.1.min.js"></script>
<script src="_js/jquery-ui-1.10.1.custom.min.js"></script>
<script src="_js/jquery.ui.touch-punch.min.js"></script>
Run Code Online (Sandbox Code Playgroud)
我用来创建滑块范围的 JavaScript 代码:
var slider = $( "#dv_sliderrange" ).slider({
range: true,
orientation: 'horizontal',
min: 0,
max: 10000,
step: 10,
values: [ 0, 10000 ],
// Update my own form fields with the Slider values
slide: function( event, ui ) {
$( "#fd_amount0" ).val( "$ " + ui.values[ 0 ]);
$( "#fd_amount1" ).val( "$ " + ui.values[ 1 ]);
}
}).draggable();
Run Code Online (Sandbox Code Playgroud)
| 归档时间: |
|
| 查看次数: |
14838 次 |
| 最近记录: |