jquery-ui-sliderAccess.js 3.0 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091
  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);