jquery插件——滑动条(2)

最新推荐文章于 2022-11-12 11:00:13 发布

影天

最新推荐文章于 2022-11-12 11:00:13 发布

阅读量627

点赞数

分类专栏： js 文章标签： jquery插件 javascript

本文链接：https://blog.csdn.net/xwlyun/article/details/44916193

版权

js 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

以下是一个基于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;
}

效果图：

影天

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jquery插件——滑动条(2)

以下是一个基于jquery的滑动条实例，实现了简单的滑动效果：测试页面：<?php$vol_arr = isset($_POST['vol'])?$_POST['vol']:array();?> jquery插件-滚动条 id name vol
复制链接

扫一扫