25'ten fazla konu seçemezsiniz Konular bir harf veya rakamla başlamalı, kısa çizgiler ('-') içerebilir ve en fazla 35 karakter uzunluğunda olabilir.
 
 
 
 
 
 

630 satır
16 KiB

  1. /*
  2. * jQuery UI Slider 1.8
  3. *
  4. * Copyright (c) 2010 AUTHORS.txt (http://jqueryui.com/about)
  5. * Dual licensed under the MIT (MIT-LICENSE.txt)
  6. * and GPL (GPL-LICENSE.txt) licenses.
  7. *
  8. * http://docs.jquery.com/UI/Slider
  9. *
  10. * Depends:
  11. * jquery.ui.core.js
  12. * jquery.ui.mouse.js
  13. * jquery.ui.widget.js
  14. */
  15. (function($) {
  16. // number of pages in a slider
  17. // (how many times can you page up/down to go through the whole range)
  18. var numPages = 5;
  19. $.widget("ui.slider", $.ui.mouse, {
  20. widgetEventPrefix: "slide",
  21. options: {
  22. animate: false,
  23. distance: 0,
  24. max: 100,
  25. min: 0,
  26. orientation: 'horizontal',
  27. range: false,
  28. step: 1,
  29. value: 0,
  30. values: null
  31. },
  32. _create: function() {
  33. var self = this, o = this.options;
  34. this._keySliding = false;
  35. this._mouseSliding = false;
  36. this._animateOff = true;
  37. this._handleIndex = null;
  38. this._detectOrientation();
  39. this._mouseInit();
  40. this.element
  41. .addClass("ui-slider"
  42. + " ui-slider-" + this.orientation
  43. + " ui-widget"
  44. + " ui-widget-content"
  45. + " ui-corner-all");
  46. if (o.disabled) {
  47. this.element.addClass('ui-slider-disabled ui-disabled');
  48. }
  49. this.range = $([]);
  50. if (o.range) {
  51. if (o.range === true) {
  52. this.range = $('<div></div>');
  53. if (!o.values) o.values = [this._valueMin(), this._valueMin()];
  54. if (o.values.length && o.values.length != 2) {
  55. o.values = [o.values[0], o.values[0]];
  56. }
  57. } else {
  58. this.range = $('<div></div>');
  59. }
  60. this.range
  61. .appendTo(this.element)
  62. .addClass("ui-slider-range");
  63. if (o.range == "min" || o.range == "max") {
  64. this.range.addClass("ui-slider-range-" + o.range);
  65. }
  66. // note: this isn't the most fittingly semantic framework class for this element,
  67. // but worked best visually with a variety of themes
  68. this.range.addClass("ui-widget-header");
  69. }
  70. if ($(".ui-slider-handle", this.element).length == 0)
  71. $('<a href="#"></a>')
  72. .appendTo(this.element)
  73. .addClass("ui-slider-handle");
  74. if (o.values && o.values.length) {
  75. while ($(".ui-slider-handle", this.element).length < o.values.length)
  76. $('<a href="#"></a>')
  77. .appendTo(this.element)
  78. .addClass("ui-slider-handle");
  79. }
  80. this.handles = $(".ui-slider-handle", this.element)
  81. .addClass("ui-state-default"
  82. + " ui-corner-all");
  83. this.handle = this.handles.eq(0);
  84. this.handles.add(this.range).filter("a")
  85. .click(function(event) {
  86. event.preventDefault();
  87. })
  88. .hover(function() {
  89. if (!o.disabled) {
  90. $(this).addClass('ui-state-hover');
  91. }
  92. }, function() {
  93. $(this).removeClass('ui-state-hover');
  94. })
  95. .focus(function() {
  96. if (!o.disabled) {
  97. $(".ui-slider .ui-state-focus").removeClass('ui-state-focus'); $(this).addClass('ui-state-focus');
  98. } else {
  99. $(this).blur();
  100. }
  101. })
  102. .blur(function() {
  103. $(this).removeClass('ui-state-focus');
  104. });
  105. this.handles.each(function(i) {
  106. $(this).data("index.ui-slider-handle", i);
  107. });
  108. this.handles.keydown(function(event) {
  109. var ret = true;
  110. var index = $(this).data("index.ui-slider-handle");
  111. if (self.options.disabled)
  112. return;
  113. switch (event.keyCode) {
  114. case $.ui.keyCode.HOME:
  115. case $.ui.keyCode.END:
  116. case $.ui.keyCode.PAGE_UP:
  117. case $.ui.keyCode.PAGE_DOWN:
  118. case $.ui.keyCode.UP:
  119. case $.ui.keyCode.RIGHT:
  120. case $.ui.keyCode.DOWN:
  121. case $.ui.keyCode.LEFT:
  122. ret = false;
  123. if (!self._keySliding) {
  124. self._keySliding = true;
  125. $(this).addClass("ui-state-active");
  126. self._start(event, index);
  127. }
  128. break;
  129. }
  130. var curVal, newVal, step = self._step();
  131. if (self.options.values && self.options.values.length) {
  132. curVal = newVal = self.values(index);
  133. } else {
  134. curVal = newVal = self.value();
  135. }
  136. switch (event.keyCode) {
  137. case $.ui.keyCode.HOME:
  138. newVal = self._valueMin();
  139. break;
  140. case $.ui.keyCode.END:
  141. newVal = self._valueMax();
  142. break;
  143. case $.ui.keyCode.PAGE_UP:
  144. newVal = curVal + ((self._valueMax() - self._valueMin()) / numPages);
  145. break;
  146. case $.ui.keyCode.PAGE_DOWN:
  147. newVal = curVal - ((self._valueMax() - self._valueMin()) / numPages);
  148. break;
  149. case $.ui.keyCode.UP:
  150. case $.ui.keyCode.RIGHT:
  151. if(curVal == self._valueMax()) return;
  152. newVal = curVal + step;
  153. break;
  154. case $.ui.keyCode.DOWN:
  155. case $.ui.keyCode.LEFT:
  156. if(curVal == self._valueMin()) return;
  157. newVal = curVal - step;
  158. break;
  159. }
  160. self._slide(event, index, newVal);
  161. return ret;
  162. }).keyup(function(event) {
  163. var index = $(this).data("index.ui-slider-handle");
  164. if (self._keySliding) {
  165. self._keySliding = false;
  166. self._stop(event, index);
  167. self._change(event, index);
  168. $(this).removeClass("ui-state-active");
  169. }
  170. });
  171. this._refreshValue();
  172. this._animateOff = false;
  173. },
  174. destroy: function() {
  175. this.handles.remove();
  176. this.range.remove();
  177. this.element
  178. .removeClass("ui-slider"
  179. + " ui-slider-horizontal"
  180. + " ui-slider-vertical"
  181. + " ui-slider-disabled"
  182. + " ui-widget"
  183. + " ui-widget-content"
  184. + " ui-corner-all")
  185. .removeData("slider")
  186. .unbind(".slider");
  187. this._mouseDestroy();
  188. return this;
  189. },
  190. _mouseCapture: function(event) {
  191. var o = this.options;
  192. if (o.disabled)
  193. return false;
  194. this.elementSize = {
  195. width: this.element.outerWidth(),
  196. height: this.element.outerHeight()
  197. };
  198. this.elementOffset = this.element.offset();
  199. var position = { x: event.pageX, y: event.pageY };
  200. var normValue = this._normValueFromMouse(position);
  201. var distance = this._valueMax() - this._valueMin() + 1, closestHandle;
  202. var self = this, index;
  203. this.handles.each(function(i) {
  204. var thisDistance = Math.abs(normValue - self.values(i));
  205. if (distance > thisDistance) {
  206. distance = thisDistance;
  207. closestHandle = $(this);
  208. index = i;
  209. }
  210. });
  211. // workaround for bug #3736 (if both handles of a range are at 0,
  212. // the first is always used as the one with least distance,
  213. // and moving it is obviously prevented by preventing negative ranges)
  214. if(o.range == true && this.values(1) == o.min) {
  215. closestHandle = $(this.handles[++index]);
  216. }
  217. this._start(event, index);
  218. this._mouseSliding = true;
  219. self._handleIndex = index;
  220. closestHandle
  221. .addClass("ui-state-active")
  222. .focus();
  223. var offset = closestHandle.offset();
  224. var mouseOverHandle = !$(event.target).parents().andSelf().is('.ui-slider-handle');
  225. this._clickOffset = mouseOverHandle ? { left: 0, top: 0 } : {
  226. left: event.pageX - offset.left - (closestHandle.width() / 2),
  227. top: event.pageY - offset.top
  228. - (closestHandle.height() / 2)
  229. - (parseInt(closestHandle.css('borderTopWidth'),10) || 0)
  230. - (parseInt(closestHandle.css('borderBottomWidth'),10) || 0)
  231. + (parseInt(closestHandle.css('marginTop'),10) || 0)
  232. };
  233. normValue = this._normValueFromMouse(position);
  234. this._slide(event, index, normValue);
  235. this._animateOff = true;
  236. return true;
  237. },
  238. _mouseStart: function(event) {
  239. return true;
  240. },
  241. _mouseDrag: function(event) {
  242. var position = { x: event.pageX, y: event.pageY };
  243. var normValue = this._normValueFromMouse(position);
  244. this._slide(event, this._handleIndex, normValue);
  245. return false;
  246. },
  247. _mouseStop: function(event) {
  248. this.handles.removeClass("ui-state-active");
  249. this._mouseSliding = false;
  250. this._stop(event, this._handleIndex);
  251. this._change(event, this._handleIndex);
  252. this._handleIndex = null;
  253. this._clickOffset = null;
  254. this._animateOff = false;
  255. return false;
  256. },
  257. _detectOrientation: function() {
  258. this.orientation = this.options.orientation == 'vertical' ? 'vertical' : 'horizontal';
  259. },
  260. _normValueFromMouse: function(position) {
  261. var pixelTotal, pixelMouse;
  262. if ('horizontal' == this.orientation) {
  263. pixelTotal = this.elementSize.width;
  264. pixelMouse = position.x - this.elementOffset.left - (this._clickOffset ? this._clickOffset.left : 0);
  265. } else {
  266. pixelTotal = this.elementSize.height;
  267. pixelMouse = position.y - this.elementOffset.top - (this._clickOffset ? this._clickOffset.top : 0);
  268. }
  269. var percentMouse = (pixelMouse / pixelTotal);
  270. if (percentMouse > 1) percentMouse = 1;
  271. if (percentMouse < 0) percentMouse = 0;
  272. if ('vertical' == this.orientation)
  273. percentMouse = 1 - percentMouse;
  274. var valueTotal = this._valueMax() - this._valueMin(),
  275. valueMouse = percentMouse * valueTotal,
  276. valueMouseModStep = valueMouse % this.options.step,
  277. normValue = this._valueMin() + valueMouse - valueMouseModStep;
  278. if (valueMouseModStep > (this.options.step / 2))
  279. normValue += this.options.step;
  280. // Since JavaScript has problems with large floats, round
  281. // the final value to 5 digits after the decimal point (see #4124)
  282. return parseFloat(normValue.toFixed(5));
  283. },
  284. _start: function(event, index) {
  285. var uiHash = {
  286. handle: this.handles[index],
  287. value: this.value()
  288. };
  289. if (this.options.values && this.options.values.length) {
  290. uiHash.value = this.values(index);
  291. uiHash.values = this.values();
  292. }
  293. this._trigger("start", event, uiHash);
  294. },
  295. _slide: function(event, index, newVal) {
  296. var handle = this.handles[index];
  297. if (this.options.values && this.options.values.length) {
  298. var otherVal = this.values(index ? 0 : 1);
  299. if ((this.options.values.length == 2 && this.options.range === true) &&
  300. ((index == 0 && newVal > otherVal) || (index == 1 && newVal < otherVal))){
  301. newVal = otherVal;
  302. }
  303. if (newVal != this.values(index)) {
  304. var newValues = this.values();
  305. newValues[index] = newVal;
  306. // A slide can be canceled by returning false from the slide callback
  307. var allowed = this._trigger("slide", event, {
  308. handle: this.handles[index],
  309. value: newVal,
  310. values: newValues
  311. });
  312. var otherVal = this.values(index ? 0 : 1);
  313. if (allowed !== false) {
  314. this.values(index, newVal, true);
  315. }
  316. }
  317. } else {
  318. if (newVal != this.value()) {
  319. // A slide can be canceled by returning false from the slide callback
  320. var allowed = this._trigger("slide", event, {
  321. handle: this.handles[index],
  322. value: newVal
  323. });
  324. if (allowed !== false) {
  325. this.value(newVal);
  326. }
  327. }
  328. }
  329. },
  330. _stop: function(event, index) {
  331. var uiHash = {
  332. handle: this.handles[index],
  333. value: this.value()
  334. };
  335. if (this.options.values && this.options.values.length) {
  336. uiHash.value = this.values(index);
  337. uiHash.values = this.values();
  338. }
  339. this._trigger("stop", event, uiHash);
  340. },
  341. _change: function(event, index) {
  342. if (!this._keySliding && !this._mouseSliding) {
  343. var uiHash = {
  344. handle: this.handles[index],
  345. value: this.value()
  346. };
  347. if (this.options.values && this.options.values.length) {
  348. uiHash.value = this.values(index);
  349. uiHash.values = this.values();
  350. }
  351. this._trigger("change", event, uiHash);
  352. }
  353. },
  354. value: function(newValue) {
  355. if (arguments.length) {
  356. this.options.value = this._trimValue(newValue);
  357. this._refreshValue();
  358. this._change(null, 0);
  359. }
  360. return this._value();
  361. },
  362. values: function(index, newValue) {
  363. if (arguments.length > 1) {
  364. this.options.values[index] = this._trimValue(newValue);
  365. this._refreshValue();
  366. this._change(null, index);
  367. }
  368. if (arguments.length) {
  369. if ($.isArray(arguments[0])) {
  370. var vals = this.options.values, newValues = arguments[0];
  371. for (var i = 0, l = vals.length; i < l; i++) {
  372. vals[i] = this._trimValue(newValues[i]);
  373. this._change(null, i);
  374. }
  375. this._refreshValue();
  376. } else {
  377. if (this.options.values && this.options.values.length) {
  378. return this._values(index);
  379. } else {
  380. return this.value();
  381. }
  382. }
  383. } else {
  384. return this._values();
  385. }
  386. },
  387. _setOption: function(key, value) {
  388. var i,
  389. valsLength = 0;
  390. if ( jQuery.isArray(this.options.values) ) {
  391. valsLength = this.options.values.length;
  392. };
  393. $.Widget.prototype._setOption.apply(this, arguments);
  394. switch (key) {
  395. case 'disabled':
  396. if (value) {
  397. this.handles.filter(".ui-state-focus").blur();
  398. this.handles.removeClass("ui-state-hover");
  399. this.handles.attr("disabled", "disabled");
  400. this.element.addClass("ui-disabled");
  401. } else {
  402. this.handles.removeAttr("disabled");
  403. this.element.removeClass("ui-disabled");
  404. }
  405. case 'orientation':
  406. this._detectOrientation();
  407. this.element
  408. .removeClass("ui-slider-horizontal ui-slider-vertical")
  409. .addClass("ui-slider-" + this.orientation);
  410. this._refreshValue();
  411. break;
  412. case 'value':
  413. this._animateOff = true;
  414. this._refreshValue();
  415. this._change(null, 0);
  416. this._animateOff = false;
  417. break;
  418. case 'values':
  419. this._animateOff = true;
  420. this._refreshValue();
  421. for (i = 0; i < valsLength; i++) {
  422. this._change(null, i);
  423. }
  424. this._animateOff = false;
  425. break;
  426. }
  427. },
  428. _step: function() {
  429. var step = this.options.step;
  430. return step;
  431. },
  432. _value: function() {
  433. //internal value getter
  434. // _value() returns value trimmed by min and max
  435. var val = this.options.value;
  436. val = this._trimValue(val);
  437. return val;
  438. },
  439. _values: function(index) {
  440. //internal values getter
  441. // _values() returns array of values trimmed by min and max
  442. // _values(index) returns single value trimmed by min and max
  443. if (arguments.length) {
  444. var val = this.options.values[index];
  445. val = this._trimValue(val);
  446. return val;
  447. } else {
  448. // .slice() creates a copy of the array
  449. // this copy gets trimmed by min and max and then returned
  450. var vals = this.options.values.slice();
  451. for (var i = 0, l = vals.length; i < l; i++) {
  452. vals[i] = this._trimValue(vals[i]);
  453. }
  454. return vals;
  455. }
  456. },
  457. _trimValue: function(val) {
  458. if (val < this._valueMin()) val = this._valueMin();
  459. if (val > this._valueMax()) val = this._valueMax();
  460. return val;
  461. },
  462. _valueMin: function() {
  463. var valueMin = this.options.min;
  464. return valueMin;
  465. },
  466. _valueMax: function() {
  467. var valueMax = this.options.max;
  468. return valueMax;
  469. },
  470. _refreshValue: function() {
  471. var oRange = this.options.range, o = this.options, self = this;
  472. var animate = (!this._animateOff) ? o.animate : false;
  473. if (this.options.values && this.options.values.length) {
  474. var vp0, vp1;
  475. this.handles.each(function(i, j) {
  476. var valPercent = (self.values(i) - self._valueMin()) / (self._valueMax() - self._valueMin()) * 100;
  477. var _set = {}; _set[self.orientation == 'horizontal' ? 'left' : 'bottom'] = valPercent + '%';
  478. $(this).stop(1,1)[animate ? 'animate' : 'css'](_set, o.animate);
  479. if (self.options.range === true) {
  480. if (self.orientation == 'horizontal') {
  481. (i == 0) && self.range.stop(1,1)[animate ? 'animate' : 'css']({ left: valPercent + '%' }, o.animate);
  482. (i == 1) && self.range[animate ? 'animate' : 'css']({ width: (valPercent - lastValPercent) + '%' }, { queue: false, duration: o.animate });
  483. } else {
  484. (i == 0) && self.range.stop(1,1)[animate ? 'animate' : 'css']({ bottom: (valPercent) + '%' }, o.animate);
  485. (i == 1) && self.range[animate ? 'animate' : 'css']({ height: (valPercent - lastValPercent) + '%' }, { queue: false, duration: o.animate });
  486. }
  487. }
  488. lastValPercent = valPercent;
  489. });
  490. } else {
  491. var value = this.value(),
  492. valueMin = this._valueMin(),
  493. valueMax = this._valueMax(),
  494. valPercent = valueMax != valueMin
  495. ? (value - valueMin) / (valueMax - valueMin) * 100
  496. : 0;
  497. var _set = {}; _set[self.orientation == 'horizontal' ? 'left' : 'bottom'] = valPercent + '%';
  498. this.handle.stop(1,1)[animate ? 'animate' : 'css'](_set, o.animate);
  499. (oRange == "min") && (this.orientation == "horizontal") && this.range.stop(1,1)[animate ? 'animate' : 'css']({ width: valPercent + '%' }, o.animate);
  500. (oRange == "max") && (this.orientation == "horizontal") && this.range[animate ? 'animate' : 'css']({ width: (100 - valPercent) + '%' }, { queue: false, duration: o.animate });
  501. (oRange == "min") && (this.orientation == "vertical") && this.range.stop(1,1)[animate ? 'animate' : 'css']({ height: valPercent + '%' }, o.animate);
  502. (oRange == "max") && (this.orientation == "vertical") && this.range[animate ? 'animate' : 'css']({ height: (100 - valPercent) + '%' }, { queue: false, duration: o.animate });
  503. }
  504. }
  505. });
  506. $.extend($.ui.slider, {
  507. version: "1.8"
  508. });
  509. })(jQuery);