inputEx Documentation Back to homepage

### inputEx Documentation > SliderField.js 0.2.2

This is the source view for SliderField.js

(function () { var inputEx = YAHOO.inputEx,lang=YAHOO.lang; /** * @class Create a slider using YUI widgets * @extends inputEx.Field * @constructor * @param {Object} options inputEx.Field options object */ inputEx.SliderField = function(options) { inputEx.SliderField.superclass.constructor.call(this,options); }; YAHOO.lang.extend(inputEx.SliderField, inputEx.Field, /** * @scope inputEx.SliderField.prototype */ { /** * Set the classname to 'inputEx-SliderField' * @param {Object} options Options object (inputEx inputParams) as passed to the constructor */ setOptions: function(options) { inputEx.SliderField.superclass.setOptions.call(this, options); this.options.className = options.className ? options.className : 'inputEx-SliderField'; this.options.minValue = lang.isUndefined(options.minValue) ? 0 : options.minValue; this.options.maxValue = lang.isUndefined(options.maxValue) ? 100 : options.maxValue; this.options.displayValue = lang.isUndefined(options.displayValue) ? true : options.displayValue; }, /** * render a slider widget */ renderComponent: function() { this.sliderbg = inputEx.cn('div', {id: YAHOO.util.Dom.generateId(), className: 'inputEx-SliderField-bg'}); this.sliderthumb = inputEx.cn('div', {className: 'inputEx-SliderField-thumb'} ); this.sliderbg.appendChild(this.sliderthumb); this.fieldContainer.appendChild(this.sliderbg); if(this.options.displayValue) { this.valueDisplay = inputEx.cn('div', {className: 'inputEx-SliderField-value'}, null, String(this.options.minValue) ); this.fieldContainer.appendChild(this.valueDisplay); } this.fieldContainer.appendChild( inputEx.cn('div',null,{clear: 'both'}) ); this.slider = YAHOO.widget.Slider.getHorizSlider(this.sliderbg, this.sliderthumb, 0,100); }, initEvents: function() { // Fire the updated event when we released the slider // the slider 'change' event would generate too much events (if used in a group, it gets validated too many times) this.slider.on('slideEnd', this.fireUpdatedEvt, this, true); // Update the displayed value if(this.options.displayValue) { this.updatedEvt.subscribe( function(e,params) { var val = params[0]; this.valueDisplay.innerHTML = val; }, this, true); } }, /** * Function to set the value * @param {Any} value The new value * @param {boolean} [sendUpdatedEvt] (optional) Wether this setValue should fire the updatedEvt or not (default is true, pass false to NOT send the event) */ setValue: function(val, sendUpdatedEvt) { var v = val; if(v < this.options.minValue) { v = this.options.minValue; } if(v > this.options.maxValue) { v = this.options.maxValue; } var percent = Math.floor(v-this.options.minValue)*100/this.options.maxValue; this.slider.setValue(percent); inputEx.SliderField.superclass.setValue.call(this, val, sendUpdatedEvt); }, /** * Get the value from the slider * @return {int} The integer value */ getValue: function() { var val = Math.floor(this.options.minValue+(this.options.maxValue-this.options.minValue)*this.slider.getValue()/100); return val; } }); /** * Register this class as "slider" type */ inputEx.registerType("slider", inputEx.SliderField); })();

Copyright (c) 2007-2009 Eric Abouaf. All rights reserved.
Generated by JsDoc Toolkit 2.0.0 on Wed, 04 Mar 2009 15:41:30 GMT using neyricjslibs-template.