最近做一个项目,web页面上要实现slider,经过调研,先后采用了两种方式:
1.用html type = “range”的方式,
实现很简单,
<input type="range" min="10" max="300" value="100" step="10" οnchange="showValue(this.value)" style="">
这样就行了,在页面上接收滑动块的值,只需要在代码里这样做:
function showValue(newValue){
//to do:接收newValue的值
}
很简单,但是有个缺点就是该滑动条在IE浏览器下不兼容,显示是个输入框,而在chrome,firefox,safari下都是好的。
为了兼容IE,采用了另外一套方法,采用了Jquery的UI库。
2.JQuery UI实现
该方法可以参考:
http://api.jqueryui.com/slider/#entry-examples
主流浏览器是都支持了,但是要支持移动端上的touch support,还得参考:
下面给出具体实现:
<link href="themes/default/css/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="./publics/js/jquery-1.7.1.min.js" type="text/javascript"></script>
<script src="./publics/js/jquery-ui.min.js"></script>
<script src="./publics/js/jquery.ui.touch-punch.min.js"></script>
以上相关js和css是必须的。接下来就很简单了。
<div id="slider">
然后在代码里:
$("#slider").slider({
slide: function( event, ui ) {
// ui.value is 0-100
}
});
slide:表示滑动事件。更多事件和用法请参考官方文档,链接上面已经给出。