index.js 3.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146
  1. var points = 24;
  2. /* jquery slider pips plugin, version 0.1 */
  3. (function($) {
  4. var extensionMethods = {
  5. pips: function( settings ) {
  6. options = {
  7. first: "number", // "pip" , false
  8. last: "number", // "pip" , false
  9. rest: "pip" // "number" , false
  10. };
  11. $.extend( options, settings );
  12. // get rid of all pips that might already exist.
  13. this.element.addClass('ui-slider-pips').find( '.ui-slider-pip' ).remove();
  14. // we need teh amount of pips to create.
  15. var pips = this.options.max - this.options.min;
  16. // for every stop in the slider, we create a pip.
  17. for( i=0; i<=pips; i++ ) {
  18. // hold a span element for the pip
  19. var s = $('<span class="ui-slider-pip"><span class="ui-slider-line"></span><span class="ui-slider-number">'+i+'</span></span>');
  20. // add a class so css can handle the display
  21. // we'll hide numbers by default in CSS, and show them if set.
  22. // we'll also use CSS to hide the pip altogether.
  23. if( 0 == i ) {
  24. s.addClass('ui-slider-pip-first');
  25. if( "number" == options.first ) { s.addClass('ui-slider-pip-number'); }
  26. if( false == options.first ) { s.addClass('ui-slider-pip-hide'); }
  27. } else if ( pips == i ) {
  28. s.addClass('ui-slider-pip-last');
  29. if( "number" == options.last ) { s.addClass('ui-slider-pip-number'); }
  30. if( false == options.last ) { s.addClass('ui-slider-pip-hide'); }
  31. } else {
  32. if( "number" == options.rest ) { s.addClass('ui-slider-pip-number'); }
  33. if( false == options.rest ) { s.addClass('ui-slider-pip-hide'); }
  34. }
  35. // if it's a horizontal slider we'll set the left offset,
  36. // and the top if it's vertical.
  37. if( this.options.orientation == "horizontal" )
  38. s.css({ left: '' + (100/pips)*i + '%' });
  39. else
  40. s.css({ top: '' + (100/pips)*i + '%' });
  41. // append the span to the slider.
  42. this.element.append( s );
  43. }
  44. }
  45. };
  46. $.extend(true, $['ui']['slider'].prototype, extensionMethods);
  47. })(jQuery);
  48. (function($) {
  49. var extensionMethods = {
  50. float: function( settings ) {
  51. options = {};
  52. $.extend( options, settings );
  53. // add a class for the CSS
  54. this.element.addClass('ui-slider-float');
  55. // if this is a range slider
  56. if( this.options.values ) {
  57. var $tip = [
  58. $('<span class="ui-slider-tip">'+ this.options.values[0]+'</span>'),
  59. $('<span class="ui-slider-tip">'+ this.options.values[1]+'</span>')
  60. ];
  61. // else if its just a normal slider
  62. } else {
  63. // create a tip element
  64. var $tip = $('<span class="ui-slider-tip">'+ this.options.value+'</span>');
  65. }
  66. // now we append it to all the handles
  67. this.element.find('.ui-slider-handle').each( function(k,v) {
  68. $(v).append($tip[k]);
  69. })
  70. // if this slider also has numbers, we'll make those into tips, too; by cloning and changing class.
  71. this.element.find('.ui-slider-number').each(function(k,v) {
  72. var $e = $(v).clone().removeClass('ui-slider-number').addClass('ui-slider-tip-number');
  73. $e.insertAfter($(v));
  74. });
  75. // when slider changes, update handle tip value.
  76. this.element.on('slidechange slide', function(e,ui) {
  77. $(ui.handle).find('.ui-slider-tip').text( ui.value );
  78. });
  79. }
  80. };
  81. $.extend(true, $['ui']['slider'].prototype, extensionMethods);
  82. })(jQuery);
  83. //
  84. //
  85. //
  86. /* ------------------------- */
  87. /* demo stuff */
  88. $(document).ready(function() {
  89. $('.slider, .slider2').slider({min:0,max:points,animate:true, value:8});
  90. $('.slider2').slider('pips', {rest:'number'});
  91. });