jquery-ui-sliderAccess.js 2.7 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485
  1. /*
  2. * jQuery UI Slider Access
  3. * By: Trent Richardson [http://trentrichardson.com]
  4. * Version 0.2
  5. * Last Modified: 12/02/2011
  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. return $(this).each(function(i,obj){
  21. var $t = $(this),
  22. o = $.extend({},{
  23. where: 'after',
  24. step: $t.slider('option','step'),
  25. upIcon: 'ui-icon-plus',
  26. downIcon: 'ui-icon-minus',
  27. text: false,
  28. upText: '+',
  29. downText: '-',
  30. buttonset: true,
  31. buttonsetTag: 'span'
  32. }, options),
  33. $buttons = $('<'+ o.buttonsetTag +' class="ui-slider-access">'+
  34. '<button data-icon="'+ o.downIcon +'" data-step="-'+ o.step +'">'+ o.downText +'</button>'+
  35. '<button data-icon="'+ o.upIcon +'" data-step="'+ o.step +'">'+ o.upText +'</button>'+
  36. '</'+ o.buttonsetTag +'>');
  37. $buttons.children('button').each(function(j, jobj){
  38. var $jt = $(this);
  39. $jt.button({
  40. text: o.text,
  41. icons: { primary: $jt.data('icon') }
  42. })
  43. .click(function(e){
  44. var step = $jt.data('step'),
  45. curr = $t.slider('value'),
  46. newval = curr += step*1,
  47. minval = $t.slider('option','min'),
  48. maxval = $t.slider('option','max');
  49. e.preventDefault();
  50. if(newval < minval || newval > maxval)
  51. return;
  52. $t.slider('value', newval);
  53. $t.slider("option", "slide").call($t, null, { value: newval });
  54. });
  55. });
  56. // before or after
  57. $t[o.where]($buttons);
  58. if(o.buttonset){
  59. $buttons.removeClass('ui-corner-right').removeClass('ui-corner-left').buttonset();
  60. $buttons.eq(0).addClass('ui-corner-left');
  61. $buttons.eq(1).addClass('ui-corner-right');
  62. }
  63. // adjust the width so we don't break the original layout
  64. var bOuterWidth = $buttons.css({
  65. marginLeft: (o.where == 'after'? 10:0),
  66. marginRight: (o.where == 'before'? 10:0)
  67. }).outerWidth(true) + 5;
  68. var tOuterWidth = $t.outerWidth(true);
  69. $t.css('display','inline-block').width(tOuterWidth-bOuterWidth);
  70. });
  71. }
  72. });
  73. })(jQuery);