slider.js
上传用户:q2283699q
上传日期:2022-05-17
资源大小:10704k
文件大小:15k
源码类别:

Ftp客户端

开发平台:

Visual C++

  1. /*----------------------------------------------------------------------------
  2. |                                Slider 1.02                                  |
  3. |-----------------------------------------------------------------------------|
  4. |                         Created by Erik Arvidsson                           |
  5. |                  (http://webfx.eae.net/contact.html#erik)                   |
  6. |                      For WebFX (http://webfx.eae.net/)                      |
  7. |-----------------------------------------------------------------------------|
  8. | A  slider  control that  degrades  to an  input control  for non  supported |
  9. | browsers.                                                                   |
  10. |-----------------------------------------------------------------------------|
  11. |                Copyright (c) 2002, 2003, 2006 Erik Arvidsson                |
  12. |-----------------------------------------------------------------------------|
  13. | Licensed under the Apache License, Version 2.0 (the "License"); you may not |
  14. | use this file except in compliance with the License.  You may obtain a copy |
  15. | of the License at http://www.apache.org/licenses/LICENSE-2.0                |
  16. | - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - |
  17. | Unless  required  by  applicable law or  agreed  to  in  writing,  software |
  18. | distributed under the License is distributed on an  "AS IS" BASIS,  WITHOUT |
  19. | WARRANTIES OR  CONDITIONS OF ANY KIND,  either express or implied.  See the |
  20. | License  for the  specific language  governing permissions  and limitations |
  21. | under the License.                                                          |
  22. |-----------------------------------------------------------------------------|
  23. | Dependencies: timer.js - an OO abstraction of timers                        |
  24. |               range.js - provides the data model for the slider             |
  25. |               winclassic.css or any other css file describing the look      |
  26. |-----------------------------------------------------------------------------|
  27. | 2002-10-14 | Original version released                                      |
  28. | 2003-03-27 | Added a test in the constructor for missing oElement arg       |
  29. | 2003-11-27 | Only use mousewheel when focused                               |
  30. | 2006-05-28 | Changed license to Apache Software License 2.0.                |
  31. |-----------------------------------------------------------------------------|
  32. | Created 2002-10-14 | All changes are in the log above. | Updated 2006-05-28 |
  33. ----------------------------------------------------------------------------*/
  34. Slider.isSupported = typeof document.createElement != "undefined" &&
  35. typeof document.documentElement != "undefined" &&
  36. typeof document.documentElement.offsetWidth == "number";
  37. function Slider(oElement, oInput, sOrientation) {
  38. if (!oElement) return;
  39. this._orientation = sOrientation || "horizontal";
  40. this._range = new Range();
  41. this._range.setExtent(0);
  42. this._blockIncrement = 1;
  43. this._unitIncrement = 1;
  44. this._timer = new Timer(100);
  45. if (Slider.isSupported && oElement) {
  46. this.document = oElement.ownerDocument || oElement.document;
  47. this.element = oElement;
  48. this.element.slider = this;
  49. this.element.unselectable = "on";
  50. // add class name tag to class name
  51. this.element.className = this._orientation + " " + this.classNameTag + " " + this.element.className;
  52. // create line
  53. this.line = this.document.createElement("DIV");
  54. this.line.className = "line";
  55. this.line.unselectable = "on";
  56. this.line.appendChild(this.document.createElement("DIV"));
  57. this.element.appendChild(this.line);
  58. // create handle
  59. this.handle = this.document.createElement("DIV");
  60. this.handle.className = "handle";
  61. this.handle.unselectable = "on";
  62. this.handle.appendChild(this.document.createElement("DIV"));
  63. this.handle.firstChild.appendChild(
  64. this.document.createTextNode(String.fromCharCode(160)));
  65. this.element.appendChild(this.handle);
  66. }
  67. this.input = oInput;
  68. // events
  69. var oThis = this;
  70. this._range.onchange = function () {
  71. oThis.recalculate();
  72. if (typeof oThis.onchange == "function")
  73. oThis.onchange();
  74. };
  75. if (Slider.isSupported && oElement) {
  76. this.element.onfocus = Slider.eventHandlers.onfocus;
  77. this.element.onblur = Slider.eventHandlers.onblur;
  78. this.element.onmousedown = Slider.eventHandlers.onmousedown;
  79. this.element.onmouseover = Slider.eventHandlers.onmouseover;
  80. this.element.onmouseout = Slider.eventHandlers.onmouseout;
  81. this.element.onkeydown = Slider.eventHandlers.onkeydown;
  82. this.element.onkeypress = Slider.eventHandlers.onkeypress;
  83. this.element.onmousewheel = Slider.eventHandlers.onmousewheel;
  84. this.handle.onselectstart =
  85. this.element.onselectstart = function () { return false; };
  86. this._timer.ontimer = function () {
  87. oThis.ontimer();
  88. };
  89. // extra recalculate for ie
  90. window.setTimeout(function() {
  91. oThis.recalculate();
  92. }, 1);
  93. }
  94. else {
  95. this.input.onchange = function (e) {
  96. oThis.setValue(oThis.input.value);
  97. };
  98. }
  99. }
  100. Slider.eventHandlers = {
  101. // helpers to make events a bit easier
  102. getEvent: function (e, el) {
  103. if (!e) {
  104. if (el)
  105. e = el.document.parentWindow.event;
  106. else
  107. e = window.event;
  108. }
  109. if (!e.srcElement) {
  110. var el = e.target;
  111. while (el != null && el.nodeType != 1)
  112. el = el.parentNode;
  113. e.srcElement = el;
  114. }
  115. if (typeof e.offsetX == "undefined") {
  116. e.offsetX = e.layerX;
  117. e.offsetY = e.layerY;
  118. }
  119. return e;
  120. },
  121. getDocument: function (e) {
  122. if (e.target)
  123. return e.target.ownerDocument;
  124. return e.srcElement.document;
  125. },
  126. getSlider: function (e) {
  127. var el = e.target || e.srcElement;
  128. while (el != null && el.slider == null) {
  129. el = el.parentNode;
  130. }
  131. if (el)
  132. return el.slider;
  133. return null;
  134. },
  135. getLine: function (e) {
  136. var el = e.target || e.srcElement;
  137. while (el != null && el.className != "line") {
  138. el = el.parentNode;
  139. }
  140. return el;
  141. },
  142. getHandle: function (e) {
  143. var el = e.target || e.srcElement;
  144. var re = /handle/;
  145. while (el != null && !re.test(el.className)) {
  146. el = el.parentNode;
  147. }
  148. return el;
  149. },
  150. // end helpers
  151. onfocus: function (e) {
  152. var s = this.slider;
  153. s._focused = true;
  154. s.handle.className = "handle hover";
  155. },
  156. onblur: function (e) {
  157. var s = this.slider;
  158. s._focused = false;
  159. s.handle.className = "handle";
  160. },
  161. onmouseover: function (e) {
  162. e = Slider.eventHandlers.getEvent(e, this);
  163. var s = this.slider;
  164. if (e.srcElement == s.handle)
  165. s.handle.className = "handle hover";
  166. },
  167. onmouseout: function (e) {
  168. e = Slider.eventHandlers.getEvent(e, this);
  169. var s = this.slider;
  170. if (e.srcElement == s.handle && !s._focused)
  171. s.handle.className = "handle";
  172. },
  173. onmousedown: function (e) {
  174. e = Slider.eventHandlers.getEvent(e, this);
  175. var s = this.slider;
  176. if (s.element.focus)
  177. s.element.focus();
  178. Slider._currentInstance = s;
  179. var doc = s.document;
  180. if (doc.addEventListener) {
  181. doc.addEventListener("mousemove", Slider.eventHandlers.onmousemove, true);
  182. doc.addEventListener("mouseup", Slider.eventHandlers.onmouseup, true);
  183. }
  184. else if (doc.attachEvent) {
  185. doc.attachEvent("onmousemove", Slider.eventHandlers.onmousemove);
  186. doc.attachEvent("onmouseup", Slider.eventHandlers.onmouseup);
  187. doc.attachEvent("onlosecapture", Slider.eventHandlers.onmouseup);
  188. s.element.setCapture();
  189. }
  190. if (Slider.eventHandlers.getHandle(e)) { // start drag
  191. Slider._sliderDragData = {
  192. screenX: e.screenX,
  193. screenY: e.screenY,
  194. dx: e.screenX - s.handle.offsetLeft,
  195. dy: e.screenY - s.handle.offsetTop,
  196. startValue: s.getValue(),
  197. slider: s
  198. };
  199. }
  200. else {
  201. var lineEl = Slider.eventHandlers.getLine(e);
  202. s._mouseX = e.offsetX + (lineEl ? s.line.offsetLeft : 0);
  203. s._mouseY = e.offsetY + (lineEl ? s.line.offsetTop : 0);
  204. s._increasing = null;
  205. s.ontimer();
  206. }
  207. },
  208. onmousemove: function (e) {
  209. e = Slider.eventHandlers.getEvent(e, this);
  210. if (Slider._sliderDragData) { // drag
  211. var s = Slider._sliderDragData.slider;
  212. var boundSize = s.getMaximum() - s.getMinimum();
  213. var size, pos, reset;
  214. if (s._orientation == "horizontal") {
  215. size = s.element.offsetWidth - s.handle.offsetWidth;
  216. pos = e.screenX - Slider._sliderDragData.dx;
  217. reset = Math.abs(e.screenY - Slider._sliderDragData.screenY) > 100;
  218. }
  219. else {
  220. size = s.element.offsetHeight - s.handle.offsetHeight;
  221. pos = s.element.offsetHeight - s.handle.offsetHeight -
  222. (e.screenY - Slider._sliderDragData.dy);
  223. reset = Math.abs(e.screenX - Slider._sliderDragData.screenX) > 100;
  224. }
  225. s.setValue(reset ? Slider._sliderDragData.startValue :
  226. s.getMinimum() + boundSize * pos / size);
  227. return false;
  228. }
  229. else {
  230. var s = Slider._currentInstance;
  231. if (s != null) {
  232. var lineEl = Slider.eventHandlers.getLine(e);
  233. s._mouseX = e.offsetX + (lineEl ? s.line.offsetLeft : 0);
  234. s._mouseY = e.offsetY + (lineEl ? s.line.offsetTop : 0);
  235. }
  236. }
  237. },
  238. onmouseup: function (e) {
  239. e = Slider.eventHandlers.getEvent(e, this);
  240. var s = Slider._currentInstance;
  241. var doc = s.document;
  242. if (doc.removeEventListener) {
  243. doc.removeEventListener("mousemove", Slider.eventHandlers.onmousemove, true);
  244. doc.removeEventListener("mouseup", Slider.eventHandlers.onmouseup, true);
  245. }
  246. else if (doc.detachEvent) {
  247. doc.detachEvent("onmousemove", Slider.eventHandlers.onmousemove);
  248. doc.detachEvent("onmouseup", Slider.eventHandlers.onmouseup);
  249. doc.detachEvent("onlosecapture", Slider.eventHandlers.onmouseup);
  250. s.element.releaseCapture();
  251. }
  252. if (Slider._sliderDragData) { // end drag
  253. Slider._sliderDragData = null;
  254. }
  255. else {
  256. s._timer.stop();
  257. s._increasing = null;
  258. }
  259. Slider._currentInstance = null;
  260. },
  261. onkeydown: function (e) {
  262. e = Slider.eventHandlers.getEvent(e, this);
  263. //var s = Slider.eventHandlers.getSlider(e);
  264. var s = this.slider;
  265. var kc = e.keyCode;
  266. switch (kc) {
  267. case 33: // page up
  268. s.setValue(s.getValue() + s.getBlockIncrement());
  269. break;
  270. case 34: // page down
  271. s.setValue(s.getValue() - s.getBlockIncrement());
  272. break;
  273. case 35: // end
  274. s.setValue(s.getOrientation() == "horizontal" ?
  275. s.getMaximum() :
  276. s.getMinimum());
  277. break;
  278. case 36: // home
  279. s.setValue(s.getOrientation() == "horizontal" ?
  280. s.getMinimum() :
  281. s.getMaximum());
  282. break;
  283. case 38: // up
  284. case 39: // right
  285. s.setValue(s.getValue() + s.getUnitIncrement());
  286. break;
  287. case 37: // left
  288. case 40: // down
  289. s.setValue(s.getValue() - s.getUnitIncrement());
  290. break;
  291. }
  292. if (kc >= 33 && kc <= 40) {
  293. return false;
  294. }
  295. },
  296. onkeypress: function (e) {
  297. e = Slider.eventHandlers.getEvent(e, this);
  298. var kc = e.keyCode;
  299. if (kc >= 33 && kc <= 40) {
  300. return false;
  301. }
  302. },
  303. onmousewheel: function (e) {
  304. e = Slider.eventHandlers.getEvent(e, this);
  305. var s = this.slider;
  306. if (s._focused) {
  307. s.setValue(s.getValue() + e.wheelDelta / 120 * s.getUnitIncrement());
  308. // windows inverts this on horizontal sliders. That does not
  309. // make sense to me
  310. return false;
  311. }
  312. }
  313. };
  314. Slider.prototype.classNameTag = "dynamic-slider-control",
  315. Slider.prototype.setValue = function (v) {
  316. this._range.setValue(v);
  317. this.input.value = this.getValue();
  318. };
  319. Slider.prototype.getValue = function () {
  320. return this._range.getValue();
  321. };
  322. Slider.prototype.setMinimum = function (v) {
  323. this._range.setMinimum(v);
  324. this.input.value = this.getValue();
  325. };
  326. Slider.prototype.getMinimum = function () {
  327. return this._range.getMinimum();
  328. };
  329. Slider.prototype.setMaximum = function (v) {
  330. this._range.setMaximum(v);
  331. this.input.value = this.getValue();
  332. };
  333. Slider.prototype.getMaximum = function () {
  334. return this._range.getMaximum();
  335. };
  336. Slider.prototype.setUnitIncrement = function (v) {
  337. this._unitIncrement = v;
  338. };
  339. Slider.prototype.getUnitIncrement = function () {
  340. return this._unitIncrement;
  341. };
  342. Slider.prototype.setBlockIncrement = function (v) {
  343. this._blockIncrement = v;
  344. };
  345. Slider.prototype.getBlockIncrement = function () {
  346. return this._blockIncrement;
  347. };
  348. Slider.prototype.getOrientation = function () {
  349. return this._orientation;
  350. };
  351. Slider.prototype.setOrientation = function (sOrientation) {
  352. if (sOrientation != this._orientation) {
  353. if (Slider.isSupported && this.element) {
  354. // add class name tag to class name
  355. this.element.className = this.element.className.replace(this._orientation,
  356. sOrientation);
  357. }
  358. this._orientation = sOrientation;
  359. this.recalculate();
  360. }
  361. };
  362. Slider.prototype.recalculate = function() {
  363. if (!Slider.isSupported || !this.element) return;
  364. var w = this.element.offsetWidth;
  365. var h = this.element.offsetHeight;
  366. var hw = this.handle.offsetWidth;
  367. var hh = this.handle.offsetHeight;
  368. var lw = this.line.offsetWidth;
  369. var lh = this.line.offsetHeight;
  370. // this assumes a border-box layout
  371. if (this._orientation == "horizontal") {
  372. this.handle.style.left = (w - hw) * (this.getValue() - this.getMinimum()) /
  373. (this.getMaximum() - this.getMinimum()) + "px";
  374. this.handle.style.top = (h - hh) / 2 + "px";
  375. this.line.style.top = (h - lh) / 2 + "px";
  376. this.line.style.left = hw / 2 + "px";
  377. //this.line.style.right = hw / 2 + "px";
  378. this.line.style.width = Math.max(0, w - hw - 2)+ "px";
  379. this.line.firstChild.style.width = Math.max(0, w - hw - 4)+ "px";
  380. }
  381. else {
  382. this.handle.style.left = (w - hw) / 2 + "px";
  383. this.handle.style.top = h - hh - (h - hh) * (this.getValue() - this.getMinimum()) /
  384. (this.getMaximum() - this.getMinimum()) + "px";
  385. this.line.style.left = (w - lw) / 2 + "px";
  386. this.line.style.top = hh / 2 + "px";
  387. this.line.style.height = Math.max(0, h - hh - 2) + "px"; //hard coded border width
  388. //this.line.style.bottom = hh / 2 + "px";
  389. this.line.firstChild.style.height = Math.max(0, h - hh - 4) + "px"; //hard coded border width
  390. }
  391. };
  392. Slider.prototype.ontimer = function () {
  393. var hw = this.handle.offsetWidth;
  394. var hh = this.handle.offsetHeight;
  395. var hl = this.handle.offsetLeft;
  396. var ht = this.handle.offsetTop;
  397. if (this._orientation == "horizontal") {
  398. if (this._mouseX > hl + hw &&
  399. (this._increasing == null || this._increasing)) {
  400. this.setValue(this.getValue() + this.getBlockIncrement());
  401. this._increasing = true;
  402. }
  403. else if (this._mouseX < hl &&
  404. (this._increasing == null || !this._increasing)) {
  405. this.setValue(this.getValue() - this.getBlockIncrement());
  406. this._increasing = false;
  407. }
  408. }
  409. else {
  410. if (this._mouseY > ht + hh &&
  411. (this._increasing == null || !this._increasing)) {
  412. this.setValue(this.getValue() - this.getBlockIncrement());
  413. this._increasing = false;
  414. }
  415. else if (this._mouseY < ht &&
  416. (this._increasing == null || this._increasing)) {
  417. this.setValue(this.getValue() + this.getBlockIncrement());
  418. this._increasing = true;
  419. }
  420. }
  421. this._timer.start();
  422. };