1 (function ($) {
2 $.fn.bnSlide = function (options) {
3 var defaults = {
4 colorData: 0, //原始滑道的有效值
5 maxWidth: 10, //整个滑道有效值
6 // Width: 500, //整个容器的宽度
7 //height: 20//整个容器的高度
8 };
9 options = $.extend(defaults, options);
10 if (options.colorData < 0)
11 options.colorData = 0;
12 else if (options.colorData > options.maxWidth)
13 options.colorData = options.maxWidth;
14
15 var obj = this;
16 var objSlideColor = null; //有效轨道的对象
17 var objBlock = null; //滑块对象
18 var objPathway = null; //滑道对象
19
20 function print(nowX) {//有效滑道长度colorwidth
21 var nowData = options.maxWidth * nowX / maxPathway;
22 nowData = Math.round(nowData);
23 options.objPrint.val(nowData);
24 }
25 function blockAddress(nowX) {
26 objBlock.css({ "left": nowX "px" });
27 objSlideColor.width(nowX);
28 }
29 /**
30 加载插件
31 **/
32 (function () {
33 var html = "";
34 html = "<div class='bnSlidePathway'>";
35 html = "<div class='bnSlideColor'></div>";
36 html = "</div>";
37 html = "<div class='bnSlideBlock'></div>";
38 obj.addClass("bnSlide").html(html);
39 objSlideColor = $(".bnSlideColor", obj); //有效轨道的长度
40 objBlock = $(".bnSlideBlock", obj); //滑块对象
41 objPathway = $(".bnSlidePathway", obj);
42 })();
43
44 var objOffset = obj.offset();
45 var objLeft = objOffset.left; //滑道的left
46 var objWidth = obj.width(); //滑道长度
47 var objBlockWidth = objBlock.width(); //滑块宽度
48 var maxPathway = objWidth - objBlockWidth; //有效长度
49 var colorWidth = options.colorData * maxPathway / options.maxWidth; //红色轨道的实际长度
50 objSlideColor.width(colorWidth);
51 objBlock.css({ "left": colorWidth });
52 options.objPrint.val(options.colorData);
53
54 $(document).on("mouseup", function () {
55 $(document).off("mousemove");
56 });
57
58 options.objPrint.on("blur", function () {
59 var nowData = $(this).val();
60 if (isNaN(nowData)) {
61 $(this).css("background-color", "red"); return;
62 }
63 if (nowData > options.maxWidth || nowData < 0) {
64 $(this).css("background-color", "red"); return;
65 }
66 $(this).css("background-color", "white");
67 var nowX = nowData * maxPathway / options.maxWidth;
68 blockAddress(nowX);
69 });
70
71 objPathway.on("click", function (event) {
72 var pointX = event.clientX;
73 var maxLeft=maxPathway objLeft;
74 var nowX=0;
75 if(pointX>=maxLeft) nowX=maxPathway;
76 else nowX = pointX - objLeft;
77
78 blockAddress(nowX);
79 print(nowX);
80 });
81
82 objBlock.on("mousedown", function (event) {
83 var pointX = event.clientX; //鼠标坐标x,距浏览器
84 var blockX = $(this).offset().left; //滑块的left
85 var pointInBlockW = pointX - blockX; //鼠标在滑块的横向位置
86 $(document).on("mousemove", function (event) {
87 pointX = event.clientX; //鼠标坐标
88 blockX = objBlock.offset().left; //滑块左坐标
89 var nowX = pointX - pointInBlockW - objLeft; //滑块的新坐标x,相对坐标;鼠标绝对坐标-鼠标在滑块中的位置-最外层left
90 if(pointX>=(objWidth objLeft)){//如果鼠标超出滑道的最右边,取最大值
91 blockAddress(maxPathway);
92 print(maxPathway);
93 }
94 else if(pointX<=objLeft)//如果鼠标超出滑道最左边,取最小值
95 {
96 blockAddress(0);
97 print(0);
98 }
99 else if (nowX >= maxPathway) {//如果滑块的当前距离大于等于有效滑道距离,不运动
100 return;
101 }
102 else if (nowX <= 0) {//如果滑块的当前距离小于0,不运动
103 return;
104 }
105 else {
106 blockAddress(nowX);
107 print(nowX);
108 }
109 });
110 })
111 }
112 })(jQuery);
css部分:
1 .bnTest { left: 100px;width: 500px; height: 20px; }
2 .bnSlide { width: 500px; height: 20px; position: relative;}
3 .bnSlide .bnSlidePathway { background-color: Black; height: 10px; width: 100%; position: relative; top: 5px; border-radius:20px;}
4 .bnSlide .bnSlidePathway .bnSlideColor { background-color:#52c2ec; width: 100%; height: 100%; border-top-left-radius:20px; border-bottom-left-radius:20px }
5 .bnSlide .bnSlideBlock { background-color: Gray; width: 20px; height: 20px; position: absolute; top: 0; left: 0; cursor: pointer; border-radius: 5px; }
插件的调用:
1 $(function () {
2 $(".bnTest").bnSlide({ colorData: 2, objPrint: $(".bnSlideOutPrint") });
3 });
HTML部分:
1 <input type="text" class="bnSlideOutPrint" />
2 <div class="bnTest"></div>
界面效果: