js版sliderBar(滑动条)控件

支持实时监控sliderbar的数据，允许有callback回调的函数，有示例

1、可自定样式SetStyle()
2、带有onSroll功能
3、有setSldPoint（设置位置)接口
4、有getSldPoint(取得位置）接口
5、可自己设置sliderBar的最大值（不是sliderbar的长度，而是值）
6、自定义微调功能（setIncrement(10))，默认为5；

代码有点乱，接口不能清晰的看出来，不好意思了，先用着吧

运行代码框

  1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
  2 <HTML>
  3 <HEAD>
  4 <TITLE> never Slider Bar </TITLE>
  5 <META NAME="Generator" CONTENT="EditPlus">
  6 <META NAME="Author" CONTENT="never-online, blueDestiny">
  7 <META NAME="Keywords" CONTENT="javascript Slider Bar">
  8 <META NAME="Description" CONTENT="javascript Slider Bar">
  9 <style>
 10 body { background-color:#fff; text-align:center; font-family:verdana; font-size:9pt; }
 11 
 12 .sliderObj { width:350px; height:25px; background-color:#fff; border:1px solid #666666; }
 13 .sliderBar { width:20px; background-color:#666666; border:1px solid #333; }
 14 .sliderBtn { width:30px; background-color:#666666; color:#fff; border:1px solid #000000; }
 15 
 16 .r-sliderObj { width:300px; height:25px; background-color:#fff; border:1px solid #CC0000; }
 17 .r-sliderBar { width:20px; background-color:#CC0000; border:1px solid #333; }
 18 .r-sliderBtn { width:20px; background-color:#CC0000; color:#fff; border:1px solid #000000; }
 19 
 20 .g-sliderObj { width:300px; height:25px; background-color:#fff; border:1px solid #006600; }
 21 .g-sliderBar { width:20px; background-color:#006600; border:1px solid #333; }
 22 .g-sliderBtn { width:20px; background-color:#006600; color:#fff; border:1px solid #000000; }
 23 
 24 .b-sliderObj { width:300px; height:25px; background-color:#fff; border:1px solid #003399; }
 25 .b-sliderBar { width:20px; background-color:#003399; border:1px solid #333; }
 26 .b-sliderBtn { width:20px; background-color:#003399; color:#fff; border:1px solid #000000; }
 27 </style>
 28 </HEAD>
 29 
 30 <BODY>
 31 <p>
 32 <div id="s1"></div>
 33 <p>
 34 <div id="d1">r</div>
 35 <p>
 36 <div id="s2"></div>
 37 <p>
 38 <div id="d2">g</div>
 39 <p>
 40 <div id="s3"></div>
 41 <p>
 42 <div id="d3">b</div>
 43 <p>
 44 <div id="color" class="sliderObj"></div>
 45 
 46 <SCRIPT LANGUAGE="JavaScript">
 47 <!--
 48 /*===============================================================
 49 //
 50 //    Module     : never SliderBar
 51 //    Script by  : never-online, blueDestiny
 52 //    Updated    : 2006-5-12
 53 //    Copyright  : Miracle technology all reserved
 54 //    Website    : https://www.cnblogs.com/aixuexi666888/
 55 //    Email      : 。。。@126.com
 56 //    Blog       : https://www.cnblogs.com/aixuexi666888/
 57 //    Comment    : if you using never SliderBar please hold
 58 //                 these copyrights.
 59 //
 60 //    compatible : only for IE
 61 //    History    : none
 62 //
 63 ================================================================*/
 64 
 65 function neverSliderBar(id,callback) { with(this) {
 66  this.$            = document.getElementById || document.all;
 67  this.sldID        = id;
 68  this.sldObj       = null;
 69  this.instance     = this;
 70  this.barStyle     = "sliderBar";
 71  this.objStyle     = "sliderObj";
 72  this.btnStyle     = "sliderBtn";
 73  this.sldBar       = null;
 74  this.sldBtnL      = null;
 75  this.sldBtnR      = null;
 76  this.sldPoint     = null;
 77  this.sldMoved     = false;
 78  this.sldClicked   = false;
 79  this.callback     = callback;
 80  this.sldObjOffset = null;
 81  this.sldBarOffset = null;
 82  this.callbackArg  = Array.prototype.slice.call(arguments,2);
 83  this.sldMax       = 100;
 84  this.sldIncrement = 5;
 85  this.sldPoint     = 0;
 86  //instance.init.call(this,id);
 87 }};
 88 neverSliderBar.prototype.setObjStyle=function(classname) { with(this)
 89 {
 90  objStyle=classname;
 91 }};
 92 neverSliderBar.prototype.setMaxPoint=function(maxpoint) { with(this)
 93 {
 94  sldMax=maxpoint;
 95 }};
 96 neverSliderBar.prototype.setBtnStyle=function(classname) { with(this)
 97 {
 98  btnStyle=classname;
 99 }};
100 neverSliderBar.prototype.setBarStyle=function(classname) { with(this)
101 {
102  barStyle=classname;
103 }};
104 neverSliderBar.prototype.setStyle=function() { with(this)
105 {
106  if (arguments[0]) barStyle=arguments[0];
107  if (arguments[1]) btnStyle=arguments[1];
108  if (arguments[2]) objStyle=arguments[2];
109 }};
110 neverSliderBar.prototype.setIncrement=function(increment) { with(this)
111 {
112  if (isNaN(parseInt(increment))) return;
113  sldIncrement = parseInt(increment);
114 }};
115 neverSliderBar.prototype.getSldPoint=function() { with(this)
116 {
117  sldBarOffset = Offset(sldBar);
118  sldObjOffset = Offset(sldObj);
119  var sldObjwidth = sldObjOffset.w-sldBarOffset.w;
120  var sldBarwidth = sldBarOffset.l-sldObjOffset.l;
121  var sldLocation = parseInt(sldBarwidth/sldObjwidth*sldMax);
122  return sldLocation;
123 }};
124 neverSliderBar.prototype.setSldPoint=function(point) { with(this)
125 {
126  if (isNaN(parseInt(point))) return;
127  if (point<0) point=0;
128  if (point>sldMax) point=sldMax;
129  var sldObjwidth  = sldObjOffset.w-sldBarOffset.w;
130  var sldBarwidth  = sldBarOffset.l-sldObjOffset.l;
131  sldPoint  = parseInt(point);
132  var p = parseInt(sldPoint*sldObjwidth/sldMax)+sldObjOffset.l+1;
133  sldBar.style.left = p;
134  instance.getSldPoint();
135 }};
136 
137 neverSliderBar.prototype.init=function() { with(this)
138 {
139  if ($(sldID + '__BtnL') && $(sldID + '__BtnR') && $(sldID + '__Bar')) {
140   sldBtnL = $(sldID + '__BtnL');
141   sldBar  = $(sldID + '__Bar');
142   sldBtnR = $(sldID + '__BtnR');
143  }
144  else {
145   sldBtnL    = document.createElement("BUTTON");
146   sldBtnL.id = sldID + '__BtnL';
147   sldBar     = document.createElement("DIV");
148   sldBar.id  = sldID + '__Bar';
149   sldBtnR    = document.createElement("BUTTON");
150   sldBtnR.id = sldID + '__BtnR';
151   document.body.appendChild(sldBtnL);
152   document.body.appendChild(sldBar);
153   document.body.appendChild(sldBtnR);
154  }
155  //-------------------------------------------------------------------
156  sldObj           = $(sldID);
157  sldObj.className = objStyle;
158  sldBarOffset     = Offset(sldBar);
159  sldObjOffset     = Offset(sldObj);
160  //-------------------------------------------------------------------
161  sldBtnL.value          = "<<";
162  sldBtnL.className      = btnStyle;
163  sldBtnL.style.position = "absolute";
164  //-------------------------------------------------------------------
165  sldBtnR.value          = ">";
166  sldBtnR.className      = btnStyle;
167  sldBtnR.style.position = "absolute";
168  //-------------------------------------------------------------------
169  sldBar.className       = barStyle;
170  sldBar.style.position  = "absolute";
171  sldBar.style.top       = sldObjOffset.t;
172  sldBar.style.height    = sldObjOffset.h; 
173  sldBar.style.left      = sldObjOffset.l;
174  instance.fixed();
175  //-------------------------------------------------------------------
176  sldObj.onmousedown = function() {instance.handleObjBefore()};
177  sldObj.onmouseup   = function() {instance.handleObjAfter()};
178  //-------------------------------------------------------------------
179  sldBtnL.onmousedown = function() {instance.handleBtnClick('l')};
180  sldBtnR.onmousedown = function() {instance.handleBtnClick('r')};
181  sldBtnL.onfocus     = function() {this.blur()};
182  sldBtnR.onfocus     = function() {this.blur()};
183  //-------------------------------------------------------------------
184  sldBar.onmousedown = function() {instance.handleSldDragStart()};
185  sldBar.onmousemove = function() {instance.handleSldDrag()};
186  sldBar.onmouseup   = function() {instance.handleSldDragEnd()};
187 }};
188 neverSliderBar.prototype.fixed=function() { with(this)
189 {
190  sldBarOffset = Offset(sldBar);
191  sldObjOffset = Offset(sldObj);
192 
193  var sldBtnLOffset      = Offset(sldBtnL);
194  sldBtnL.style.left     = sldObjOffset.l-sldBtnLOffset.w;
195  sldBtnL.style.top      = sldObjOffset.t;
196  sldBtnL.style.height   = sldObjOffset.h;
197  //-------------------------------------------------------------------
198  sldBtnR.style.left     = sldObjOffset.l+sldObjOffset.w;
199  sldBtnR.style.top      = sldObjOffset.t;
200  sldBtnR.style.height   = sldObjOffset.h;
201  //-------------------------------------------------------------------
202  sldBar.style.top       = sldObjOffset.t;
203  sldBar.style.height    = sldObjOffset.h;
204  //-------------------------------------------------------------------
205  var p = sldBarOffset.l;
206  if (p < sldObjOffset.l) sldBar.style.left=sldObjOffset.l;
207  var w = sldObjOffset.l+sldObjOffset.w-sldBarOffset.w;
208  if (p > w) sldBar.style.left = w;
209  window.setTimeout(function(){instance.fixed()},10)
210 }};
211 neverSliderBar.prototype.applyArg=function() { with(this)
212 {
213  if (typeof(callback)=='string') callback=eval(callback);
214  if (typeof(callback)=='function') {
215   var callbackArguments = [];
216   for(var i=0; i<callbackArg.length; i++)
217   callbackArguments[i] = callbackArg[i];
218   callbackArguments.push(instance.getSldPoint());
219   callback.apply(this,callbackArguments);
220  } else { return; }
221 }};
222 neverSliderBar.prototype.handleObjBefore=function() { with(this)
223 {
224 
225 }};
226 neverSliderBar.prototype.handleObjAfter=function() { with(this)
227 {
228 
229 }};
230 neverSliderBar.prototype.handleBtnClick=function(direction) { with(this)
231 {
232  direction = direction.toLowerCase();
233  sldPoint=instance.getSldPoint();
234  if(direction == 'l') {
235   instance.setSldPoint(this.sldPoint-sldIncrement);
236  }
237  else if (direction=='r') {
238   instance.setSldPoint(this.sldPoint+sldIncrement);
239  }
240  else {
241   return alert('not valid argument ' +direction);
242  }
243  instance.applyArg();
244  instance.getSldPoint();
245 }};
246 neverSliderBar.prototype.handleSldDragStart=function() { with(this)
247 {
248  sldBar.setCapture();
249  sldMoved = true;
250  sldBar.onlosecapture = function(){sldMoved=false;};
251  sldPoint = event.clientX-sldBarOffset.l;
252 }};
253 neverSliderBar.prototype.handleSldDrag=function() { with(this)
254 {
255  if(!sldMoved) return;
256  var p = event.clientX-sldPoint;
257  if (p <= sldObjOffset.l) {
258   sldBar.style.left = sldObjOffset.l;
259  }
260  else if (p >= (sldObjOffset.l+sldObjOffset.w-sldBarOffset.w)) {
261   sldBar.style.left = sldObjOffset.l+sldObjOffset.w-sldBarOffset.w;
262  }
263  else sldBar.style.left = p;
264  instance.applyArg();
265  instance.getSldPoint();
266 }};
267 neverSliderBar.prototype.handleSldDragEnd=function() { with(this)
268 {
269  sldBar.releaseCapture();
270  sldMoved=false;
271 }};
272 function Offset(e) {
273  var t = e.offsetTop;
274  var l = e.offsetLeft;
275  var w = e.offsetWidth;
276  var h = e.offsetHeight;
277  while(e=e.offsetParent) {
278   t+=e.offsetTop;
279   l+=e.offsetLeft;
280  }
281  return { t:t, l:l, w:w, h:h }
282 }
283 
284 
285 var r=new neverSliderBar("s1",callback,' <b>neverSliderBar</b> ');
286 r.sldMax=255;
287 r.setBtnStyle("r-sliderBtn");
288 r.setBarStyle("r-sliderBar");
289 r.setObjStyle("r-sliderObj");
290 r.init();
291 r.setSldPoint(100);
292 var g=new neverSliderBar("s2",callback,' <b>neverSliderBar</b> ');
293 g.sldMax=255;
294 g.setStyle("g-sliderBar","g-sliderBtn","g-sliderObj");
295 g.init();
296 g.setSldPoint(150);
297 var b=new neverSliderBar("s3",callback,' <b>neverSliderBar</b> ');
298 b.sldMax=255;
299 b.setBtnStyle("b-sliderBtn");
300 b.setBarStyle("b-sliderBar");
301 b.setObjStyle("b-sliderObj");
302 b.setIncrement(10);
303 b.init();
304 b.setSldPoint("200");
305 
306 callback(' <b>neverSliderBar</b> ');
307 function callback(s) {
308  var $=document.getElementById;
309  var color_r=r.getSldPoint();
310  var color_g=g.getSldPoint();
311  var color_b=b.getSldPoint();
312  $("color").style.backgroundColor="rgb(" +color_r+ "," +color_g+ "," +color_b+ ")";
313  $("d1").innerHTML=s+color_r;
314  $("d2").innerHTML=s+color_g;
315  $("d3").innerHTML=s+color_b;
316 }
317 //-->
318 </SCRIPT>
319 <p>
320 power by never-online, blueDestiny, https://www.cnblogs.com/aixuexi666888/
321 </p>
322 </BODY>
323 </HTML>

 

posted @ 2021-11-14 15:15  aixuexi666888  阅读(567)  评论(0)  编辑  收藏  举报