You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

88 lines
3.8 KiB

2 years ago
  1. /*
  2. * jQuery UI Slider Access
  3. * By: Trent Richardson [http://trentrichardson.com]
  4. * Version 0.3
  5. * Last Modified: 10/20/2012
  6. *
  7. * Copyright 2011 Trent Richardson
  8. * Dual licensed under the MIT and GPL licenses.
  9. * http://trentrichardson.com/Impromptu/GPL-LICENSE.txt
  10. * http://trentrichardson.com/Impromptu/MIT-LICENSE.txt
  11. *
  12. */
  13. (function ($) {
  14. $.fn.extend({
  15. sliderAccess: function (options) {
  16. options = options || {};
  17. options.touchonly = options.touchonly !== undefined ? options.touchonly : true; // by default only show it if touch device
  18. if (options.touchonly === true && !("ontouchend" in document)) {
  19. return $(this);
  20. }
  21. return $(this).each(function (i, obj) {
  22. var $t = $(this),
  23. o = $.extend({}, {
  24. where: 'after',
  25. step: $t.slider('option', 'step'),
  26. upIcon: 'ui-icon-plus',
  27. downIcon: 'ui-icon-minus',
  28. text: false,
  29. upText: '+',
  30. downText: '-',
  31. buttonset: true,
  32. buttonsetTag: 'span',
  33. isRTL: false
  34. }, options),
  35. $buttons = $('<' + o.buttonsetTag + ' class="ui-slider-access">' +
  36. '<button data-icon="' + o.downIcon + '" data-step="' + (o.isRTL ? o.step : o.step * -1) + '">' + o.downText + '</button>' +
  37. '<button data-icon="' + o.upIcon + '" data-step="' + (o.isRTL ? o.step * -1 : o.step) + '">' + o.upText + '</button>' +
  38. '</' + o.buttonsetTag + '>');
  39. $buttons.children('button').each(function (j, jobj) {
  40. var $jt = $(this);
  41. $jt.button({
  42. text: o.text,
  43. icons: { primary: $jt.data('icon') }
  44. })
  45. .click(function (e) {
  46. var step = $jt.data('step'),
  47. curr = $t.slider('value'),
  48. newval = curr += step * 1,
  49. minval = $t.slider('option', 'min'),
  50. maxval = $t.slider('option', 'max'),
  51. slidee = $t.slider("option", "slide") || function () { },
  52. stope = $t.slider("option", "stop") || function () { };
  53. e.preventDefault();
  54. if (newval < minval || newval > maxval) {
  55. return;
  56. }
  57. $t.slider('value', newval);
  58. slidee.call($t, null, { value: newval });
  59. stope.call($t, null, { value: newval });
  60. });
  61. });
  62. // before or after
  63. $t[o.where]($buttons);
  64. if (o.buttonset) {
  65. $buttons.removeClass('ui-corner-right').removeClass('ui-corner-left').buttonset();
  66. $buttons.eq(0).addClass('ui-corner-left');
  67. $buttons.eq(1).addClass('ui-corner-right');
  68. }
  69. // adjust the width so we don't break the original layout
  70. var bOuterWidth = $buttons.css({
  71. marginLeft: ((o.where === 'after' && !o.isRTL) || (o.where === 'before' && o.isRTL) ? 10 : 0),
  72. marginRight: ((o.where === 'before' && !o.isRTL) || (o.where === 'after' && o.isRTL) ? 10 : 0)
  73. }).outerWidth(true) + 5;
  74. var tOuterWidth = $t.outerWidth(true);
  75. $t.css('display', 'inline-block').width(tOuterWidth - bOuterWidth);
  76. });
  77. }
  78. });
  79. })(jQuery);