Slider.js
上传用户:shuoshiled
上传日期:2018-01-28
资源大小:10124k
文件大小:14k
源码类别:

中间件编程

开发平台:

JavaScript

  1. /*!  * Ext JS Library 3.0.0  * Copyright(c) 2006-2009 Ext JS, LLC  * licensing@extjs.com  * http://www.extjs.com/license  */ /**
  2.  * @class Ext.Slider
  3.  * @extends Ext.BoxComponent
  4.  * Slider which supports vertical or horizontal orientation, keyboard adjustments,
  5.  * configurable snapping, axis clicking and animation. Can be added as an item to
  6.  * any container. Example usage:
  7. <pre><code>
  8. new Ext.Slider({
  9.     renderTo: Ext.getBody(),
  10.     width: 200,
  11.     value: 50,
  12.     increment: 10,
  13.     minValue: 0,
  14.     maxValue: 100
  15. });
  16. </code></pre>
  17.  */
  18. Ext.Slider = Ext.extend(Ext.BoxComponent, {
  19. /**
  20.  * @cfg {Number} value The value to initialize the slider with. Defaults to minValue.
  21.  */
  22. /**
  23.  * @cfg {Boolean} vertical Orient the Slider vertically rather than horizontally, defaults to false.
  24.  */
  25.     vertical: false,
  26. /**
  27.  * @cfg {Number} minValue The minimum value for the Slider. Defaults to 0.
  28.  */
  29.     minValue: 0,
  30. /**
  31.  * @cfg {Number} maxValue The maximum value for the Slider. Defaults to 100.
  32.  */
  33.     maxValue: 100,
  34.     /**
  35.      * @cfg {Number/Boolean} decimalPrecision.
  36.      * <p>The number of decimal places to which to round the Slider's value. Defaults to 0.</p>
  37.      * <p>To disable rounding, configure as <tt><b>false</b></tt>.</p>
  38.      */
  39.     decimalPrecision: 0,
  40. /**
  41.  * @cfg {Number} keyIncrement How many units to change the Slider when adjusting with keyboard navigation. Defaults to 1. If the increment config is larger, it will be used instead.
  42.  */
  43.     keyIncrement: 1,
  44. /**
  45.  * @cfg {Number} increment How many units to change the slider when adjusting by drag and drop. Use this option to enable 'snapping'.
  46.  */
  47.     increment: 0,
  48. // private
  49.     clickRange: [5,15],
  50. /**
  51.  * @cfg {Boolean} clickToChange Determines whether or not clicking on the Slider axis will change the slider. Defaults to true
  52.  */
  53.     clickToChange : true,
  54. /**
  55.  * @cfg {Boolean} animate Turn on or off animation. Defaults to true
  56.  */
  57.     animate: true,
  58.     /**
  59.      * True while the thumb is in a drag operation
  60.      * @type boolean
  61.      */
  62.     dragging: false,
  63.     // private override
  64.     initComponent : function(){
  65.         if(!Ext.isDefined(this.value)){
  66.             this.value = this.minValue;
  67.         }
  68.         Ext.Slider.superclass.initComponent.call(this);
  69.         this.keyIncrement = Math.max(this.increment, this.keyIncrement);
  70.         this.addEvents(
  71.             /**
  72.              * @event beforechange
  73.              * Fires before the slider value is changed. By returning false from an event handler,
  74.              * you can cancel the event and prevent the slider from changing.
  75.  * @param {Ext.Slider} slider The slider
  76.  * @param {Number} newValue The new value which the slider is being changed to.
  77.  * @param {Number} oldValue The old value which the slider was previously.
  78.              */
  79. 'beforechange',
  80. /**
  81.  * @event change
  82.  * Fires when the slider value is changed.
  83.  * @param {Ext.Slider} slider The slider
  84.  * @param {Number} newValue The new value which the slider has been changed to.
  85.  */
  86. 'change',
  87. /**
  88.  * @event changecomplete
  89.  * Fires when the slider value is changed by the user and any drag operations have completed.
  90.  * @param {Ext.Slider} slider The slider
  91.  * @param {Number} newValue The new value which the slider has been changed to.
  92.  */
  93. 'changecomplete',
  94. /**
  95.  * @event dragstart
  96.              * Fires after a drag operation has started.
  97.  * @param {Ext.Slider} slider The slider
  98.  * @param {Ext.EventObject} e The event fired from Ext.dd.DragTracker
  99.  */
  100. 'dragstart',
  101. /**
  102.  * @event drag
  103.              * Fires continuously during the drag operation while the mouse is moving.
  104.  * @param {Ext.Slider} slider The slider
  105.  * @param {Ext.EventObject} e The event fired from Ext.dd.DragTracker
  106.  */
  107. 'drag',
  108. /**
  109.  * @event dragend
  110.              * Fires after the drag operation has completed.
  111.  * @param {Ext.Slider} slider The slider
  112.  * @param {Ext.EventObject} e The event fired from Ext.dd.DragTracker
  113.  */
  114. 'dragend'
  115. );
  116.         if(this.vertical){
  117.             Ext.apply(this, Ext.Slider.Vertical);
  118.         }
  119.     },
  120. // private override
  121.     onRender : function(){
  122.         this.autoEl = {
  123.             cls: 'x-slider ' + (this.vertical ? 'x-slider-vert' : 'x-slider-horz'),
  124.             cn:{cls:'x-slider-end',cn:{cls:'x-slider-inner',cn:[{cls:'x-slider-thumb'},{tag:'a', cls:'x-slider-focus', href:"#", tabIndex: '-1', hidefocus:'on'}]}}
  125.         };
  126.         Ext.Slider.superclass.onRender.apply(this, arguments);
  127.         this.endEl = this.el.first();
  128.         this.innerEl = this.endEl.first();
  129.         this.thumb = this.innerEl.first();
  130.         this.halfThumb = (this.vertical ? this.thumb.getHeight() : this.thumb.getWidth())/2;
  131.         this.focusEl = this.thumb.next();
  132.         this.initEvents();
  133.     },
  134. // private override
  135.     initEvents : function(){
  136.         this.thumb.addClassOnOver('x-slider-thumb-over');
  137.         this.mon(this.el, {
  138.             scope: this,
  139.             mousedown: this.onMouseDown,
  140.             keydown: this.onKeyDown
  141.         });
  142.         this.focusEl.swallowEvent("click", true);
  143.         this.tracker = new Ext.dd.DragTracker({
  144.             onBeforeStart: this.onBeforeDragStart.createDelegate(this),
  145.             onStart: this.onDragStart.createDelegate(this),
  146.             onDrag: this.onDrag.createDelegate(this),
  147.             onEnd: this.onDragEnd.createDelegate(this),
  148.             tolerance: 3,
  149.             autoStart: 300
  150.         });
  151.         this.tracker.initEl(this.thumb);
  152.         this.on('beforedestroy', this.tracker.destroy, this.tracker);
  153.     },
  154. // private override
  155.     onMouseDown : function(e){
  156.         if(this.disabled) {return;}
  157.         if(this.clickToChange && e.target != this.thumb.dom){
  158.             var local = this.innerEl.translatePoints(e.getXY());
  159.             this.onClickChange(local);
  160.         }
  161.         this.focus();
  162.     },
  163. // private
  164.     onClickChange : function(local){
  165.         if(local.top > this.clickRange[0] && local.top < this.clickRange[1]){
  166.             this.setValue(Ext.util.Format.round(this.reverseValue(local.left), this.decimalPrecision), undefined, true);
  167.         }
  168.     },
  169. // private
  170.     onKeyDown : function(e){
  171.         if(this.disabled){e.preventDefault();return;}
  172.         var k = e.getKey();
  173.         switch(k){
  174.             case e.UP:
  175.             case e.RIGHT:
  176.                 e.stopEvent();
  177.                 if(e.ctrlKey){
  178.                     this.setValue(this.maxValue, undefined, true);
  179.                 }else{
  180.                     this.setValue(this.value+this.keyIncrement, undefined, true);
  181.                 }
  182.             break;
  183.             case e.DOWN:
  184.             case e.LEFT:
  185.                 e.stopEvent();
  186.                 if(e.ctrlKey){
  187.                     this.setValue(this.minValue, undefined, true);
  188.                 }else{
  189.                     this.setValue(this.value-this.keyIncrement, undefined, true);
  190.                 }
  191.             break;
  192.             default:
  193.                 e.preventDefault();
  194.         }
  195.     },
  196. // private
  197.     doSnap : function(value){
  198.         if(!this.increment || this.increment == 1 || !value) {
  199.             return value;
  200.         }
  201.         var newValue = value, inc = this.increment;
  202.         var m = value % inc;
  203.         if(m != 0){
  204.             newValue -= m;
  205.             if(m * 2 > inc){
  206.                 newValue += inc;
  207.             }else if(m * 2 < -inc){
  208.                 newValue -= inc;
  209.             }
  210.         }
  211.         return newValue.constrain(this.minValue,  this.maxValue);
  212.     },
  213. // private
  214.     afterRender : function(){
  215.         Ext.Slider.superclass.afterRender.apply(this, arguments);
  216.         if(this.value !== undefined){
  217.             var v = this.normalizeValue(this.value);
  218.             if(v !== this.value){
  219.                 delete this.value;
  220.                 this.setValue(v, false);
  221.             }else{
  222.                 this.moveThumb(this.translateValue(v), false);
  223.             }
  224.         }
  225.     },
  226. // private
  227.     getRatio : function(){
  228.         var w = this.innerEl.getWidth();
  229.         var v = this.maxValue - this.minValue;
  230.         return v == 0 ? w : (w/v);
  231.     },
  232. // private
  233.     normalizeValue : function(v){
  234.         v = this.doSnap(v);
  235.         v = Ext.util.Format.round(v, this.decimalPrecision);
  236.         v = v.constrain(this.minValue, this.maxValue);
  237.         return v;
  238.     },
  239. /**
  240.  * Programmatically sets the value of the Slider. Ensures that the value is constrained within
  241.  * the minValue and maxValue.
  242.  * @param {Number} value The value to set the slider to. (This will be constrained within minValue and maxValue)
  243.  * @param {Boolean} animate Turn on or off animation, defaults to true
  244.  */
  245.     setValue : function(v, animate, changeComplete){
  246.         v = this.normalizeValue(v);
  247.         if(v !== this.value && this.fireEvent('beforechange', this, v, this.value) !== false){
  248.             this.value = v;
  249.             this.moveThumb(this.translateValue(v), animate !== false);
  250.             this.fireEvent('change', this, v);
  251.             if(changeComplete){
  252.                 this.fireEvent('changecomplete', this, v);
  253.             }
  254.         }
  255.     },
  256. // private
  257.     translateValue : function(v){
  258.         var ratio = this.getRatio();
  259.         return (v * ratio)-(this.minValue * ratio)-this.halfThumb;
  260.     },
  261. reverseValue : function(pos){
  262.         var ratio = this.getRatio();
  263.         return (pos+this.halfThumb+(this.minValue * ratio))/ratio;
  264.     },
  265. // private
  266.     moveThumb: function(v, animate){
  267.         if(!animate || this.animate === false){
  268.             this.thumb.setLeft(v);
  269.         }else{
  270.             this.thumb.shift({left: v, stopFx: true, duration:.35});
  271.         }
  272.     },
  273. // private
  274.     focus : function(){
  275.         this.focusEl.focus(10);
  276.     },
  277. // private
  278.     onBeforeDragStart : function(e){
  279.         return !this.disabled;
  280.     },
  281. // private
  282.     onDragStart: function(e){
  283.         this.thumb.addClass('x-slider-thumb-drag');
  284.         this.dragging = true;
  285.         this.dragStartValue = this.value;
  286.         this.fireEvent('dragstart', this, e);
  287.     },
  288. // private
  289.     onDrag: function(e){
  290.         var pos = this.innerEl.translatePoints(this.tracker.getXY());
  291.         this.setValue(Ext.util.Format.round(this.reverseValue(pos.left), this.decimalPrecision), false);
  292.         this.fireEvent('drag', this, e);
  293.     },
  294. // private
  295.     onDragEnd: function(e){
  296.         this.thumb.removeClass('x-slider-thumb-drag');
  297.         this.dragging = false;
  298.         this.fireEvent('dragend', this, e);
  299.         if(this.dragStartValue != this.value){
  300.             this.fireEvent('changecomplete', this, this.value);
  301.         }
  302.     },
  303. // private
  304.     onResize : function(w, h){
  305.         this.innerEl.setWidth(w - (this.el.getPadding('l') + this.endEl.getPadding('r')));
  306.         this.syncThumb();
  307.     },
  308.     
  309.     //private
  310.     onDisable: function(){
  311.         Ext.Slider.superclass.onDisable.call(this);
  312.         this.thumb.addClass(this.disabledClass);
  313.         if(Ext.isIE){
  314.             //IE breaks when using overflow visible and opacity other than 1.
  315.             //Create a place holder for the thumb and display it.
  316.             var xy = this.thumb.getXY();
  317.             this.thumb.hide();
  318.             this.innerEl.addClass(this.disabledClass).dom.disabled = true;
  319.             if (!this.thumbHolder){
  320.                 this.thumbHolder = this.endEl.createChild({cls: 'x-slider-thumb ' + this.disabledClass});    
  321.             }
  322.             this.thumbHolder.show().setXY(xy);
  323.         }
  324.     },
  325.     
  326.     //private
  327.     onEnable: function(){
  328.         Ext.Slider.superclass.onEnable.call(this);
  329.         this.thumb.removeClass(this.disabledClass);
  330.         if(Ext.isIE){
  331.             this.innerEl.removeClass(this.disabledClass).dom.disabled = false;
  332.             if (this.thumbHolder){
  333.                 this.thumbHolder.hide();
  334.             }
  335.             this.thumb.show();
  336.             this.syncThumb();
  337.         }
  338.     },
  339.     
  340.     /**
  341.      * Synchronizes the thumb position to the proper proportion of the total component width based
  342.      * on the current slider {@link #value}.  This will be called automatically when the Slider
  343.      * is resized by a layout, but if it is rendered auto width, this method can be called from
  344.      * another resize handler to sync the Slider if necessary.
  345.      */
  346.     syncThumb : function(){
  347.         if(this.rendered){
  348.             this.moveThumb(this.translateValue(this.value));
  349.         }
  350.     },
  351. /**
  352.  * Returns the current value of the slider
  353.  * @return {Number} The current value of the slider
  354.  */
  355.     getValue : function(){
  356.         return this.value;
  357.     }
  358. });
  359. Ext.reg('slider', Ext.Slider);
  360. // private class to support vertical sliders
  361. Ext.Slider.Vertical = {
  362.     onResize : function(w, h){
  363.         this.innerEl.setHeight(h - (this.el.getPadding('t') + this.endEl.getPadding('b')));
  364.         this.syncThumb();
  365.     },
  366.     getRatio : function(){
  367.         var h = this.innerEl.getHeight();
  368.         var v = this.maxValue - this.minValue;
  369.         return h/v;
  370.     },
  371.     moveThumb: function(v, animate){
  372.         if(!animate || this.animate === false){
  373.             this.thumb.setBottom(v);
  374.         }else{
  375.             this.thumb.shift({bottom: v, stopFx: true, duration:.35});
  376.         }
  377.     },
  378.     onDrag: function(e){
  379.         var pos = this.innerEl.translatePoints(this.tracker.getXY());
  380.         var bottom = this.innerEl.getHeight()-pos.top;
  381.         this.setValue(this.minValue + Ext.util.Format.round(bottom/this.getRatio(), this.decimalPrecision), false);
  382.         this.fireEvent('drag', this, e);
  383.     },
  384.     onClickChange : function(local){
  385.         if(local.left > this.clickRange[0] && local.left < this.clickRange[1]){
  386.             var bottom = this.innerEl.getHeight()-local.top;
  387.             this.setValue(this.minValue + Ext.util.Format.round(bottom/this.getRatio(), this.decimalPrecision), undefined, true);
  388.         }
  389.     }
  390. };