以下是一个基于jquery的滑动条实例,实现了简单的滑动效果:
测试页面:
<?php
$vol_arr = isset($_POST['vol'])?$_POST['vol']:array();
?>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery插件-滚动条</title>
<link rel="stylesheet" rev="stylesheet" href="../css/style.css" type="text/css" />
<script type="text/javascript" src="../js/jquery_172.js"></script>
<link rel="stylesheet" rev="stylesheet" href="myslider.css" type="text/css" />
<script type="text/javascript" src="myslider.js"></script>
</head>
<body>
<div class="main">
<div class="mcontent">
<form action="" method="post">
<table class="tablist" width="100%" border="0" cellspacing="0" cellpadding="0">
<thead>
<tr>
<td width="60px">id</td>
<td width="100px">name</td>
<td>vol</td>
</tr>
</thead>
<tbody>
<tr>
<td>id1</td>
<td>name1</td>
<td><input name="vol[]" class="xwlyun" type="text" value="15" size="2" /></td>
</tr>
<tr>
<td>id2</td>
<td>name2</td>
<td><input name="vol[]" class="xwlyun" type="text" value="25" size="2" /></td>
</tr>
<tr>
<td>id3</td>
<td>name3</td>
<td><input name="vol[]" class="xwlyun" type="hidden" value="35" /></td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="3"><input type="submit" /></td>
</tr>
</tfoot>
</table>
</form>
<table class="tablist" width="100%" border="0" cellspacing="0" cellpadding="0">
<thead>
<tr>
<td>POST</td>
</tr>
</thead>
<tbody>
<?php foreach($vol_arr as $k=>$v){ ?>
<tr>
<td><?php echo $v;?></td>
</tr>
<?php } ?>
</tbody>
</table>
</div>
</div>
</body>
</html>
myslider.js:
(function ($){
function mySlider(obj,settings){
var _this = this;
var myslider; // 滚动条整体
var myslider_completed; // 已完成进度块
var myslider_slider; // 拖拽条
// 默认配置项
var defaults = {
myCssName: 'myslider',
completedCssName: 'completed',
sliderCssName: 'slider',
max: 100,
min: 0,
onChanging: function(){},
onChanged: function(){}
};
// 滚动条初始化
this.onInit = function(){
// 合并设置
$.extend(defaults,settings);
// 拼接html
myslider_completed = $('<div></div>')
.attr('class',defaults.completedCssName);
myslider_slider = $('<div></div>')
.attr('class',defaults.sliderCssName);
myslider = $('<div></div>')
.attr('class',defaults.myCssName)
.append(myslider_completed)
.append(myslider_slider);
// 显示html
// obj.html(myslider);
// obj.hide();
obj.after(myslider);
// bind事件
myslider_slider.bind('mousedown',function(e){
_this.onMouseDown(e);
});
};
// 构造函数
this.onInit();
// 设置滚动条显示的值 [min,max]之间
this.setProcess = function(value){
var max = defaults.max;
var min = defaults.min;
value = (value > max) ? max : value;
value = (value < min) ? min : value;
value = parseInt(value);
var width = this.getWidth();
var val = width*value/max;
myslider_completed.css('width',val);
myslider_slider.css('left',val);
// onChanging
defaults.onChanging(value);
// Binding OneWay
obj.val(value);
};
// Binding TwoWay
obj.change(function(){
_this.setProcess($(this).val());
});
this.onMouseDown = function(e){
$(document).bind('mousemove',function(e){
_this.onMouseMove(e);
}).bind('mouseup',function(e){
_this.onMouseUp(e);
});
};
this.onMouseMove = function(e){
var val = e.pageX - parseInt(myslider.offset().left);
var max = defaults.max;
var width = this.getWidth();
var value = max*val/width;
_this.setProcess(value);
};
this.onMouseUp = function(e){
$(document).unbind('mousemove');
};
this.getWidth = function(e){
var w = myslider.width();
var s = myslider_slider.width();
return w-s;
};
}
$.fn.extend({
jSlider: function(settings){
return new mySlider($(this),settings);
}
});
})(jQuery);
$(document).ready(function(){
$('.xwlyun').each(function(){
$(this).jSlider().setProcess($(this).val());
})
});
myslider.css:
.myslider{
display: inline-block;
width: 300px;
height: 5px;
margin: 10px;
background-color: #FFFFE0;
border: 1px solid #A9C9E2;
position: relative;
}
.myslider .completed{
height: 3px;
background-color: #7d9edb;
top: 1px;
left: 1px;
position: absolute;
}
.myslider .slider{
height: 15px;
background-color: #E6E6FA;
border: 1px solid #A5B6C8;
top: -6px;
width: 4px;
display: block;
cursor: pointer;
position: absolute;
}
效果图: