1 /****************************************************************************
  2  Copyright (c) 2010-2012 cocos2d-x.org
  3 
  4  http://www.cocos2d-x.org
  5 
  6  Permission is hereby granted, free of charge, to any person obtaining a copy
  7  of this software and associated documentation files (the "Software"), to deal
  8  in the Software without restriction, including without limitation the rights
  9  to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 10  copies of the Software, and to permit persons to whom the Software is
 11  furnished to do so, subject to the following conditions:
 12 
 13  The above copyright notice and this permission notice shall be included in
 14  all copies or substantial portions of the Software.
 15 
 16  THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
 17  IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
 18  FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
 19  AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 20  LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 21  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 22  THE SOFTWARE.
 23  ****************************************************************************/
 24 
 25 /**
 26  * Base class for ccui.Slider
 27  * @class
 28  * @extends ccui.Widget
 29  *
 30  * @property {Number}   percent     - The current progress of loadingbar
 31  */
 32 ccui.Slider = ccui.Widget.extend(/** @lends ccui.Slider# */{
 33     _barRenderer: null,
 34     _progressBarRenderer: null,
 35     _progressBarTextureSize: null,
 36     _slidBallNormalRenderer: null,
 37     _slidBallPressedRenderer: null,
 38     _slidBallDisabledRenderer: null,
 39     _slidBallRenderer: null,
 40     _barLength: 0,
 41     _percent: 0,
 42     _scale9Enabled: false,
 43     _prevIgnoreSize: true,
 44     _textureFile: "",
 45     _progressBarTextureFile: "",
 46     _slidBallNormalTextureFile: "",
 47     _slidBallPressedTextureFile: "",
 48     _slidBallDisabledTextureFile: "",
 49     _capInsetsBarRenderer: null,
 50     _capInsetsProgressBarRenderer: null,
 51     _sliderEventListener: null,
 52     _sliderEventSelector: null,
 53     _barTexType: null,
 54     _progressBarTexType: null,
 55     _ballNTexType: null,
 56     _ballPTexType: null,
 57     _ballDTexType: null,
 58     _isTextureLoaded: false,
 59     _className:"Slider",
 60     ctor: function () {
 61         ccui.Widget.prototype.ctor.call(this);
 62         this._barRenderer = null;
 63         this._progressBarRenderer = null;
 64         this._progressBarTextureSize = cc.size(0, 0);
 65         this._slidBallNormalRenderer = null;
 66         this._slidBallPressedRenderer = null;
 67         this._slidBallDisabledRenderer = null;
 68         this._slidBallRenderer = null;
 69         this._barLength = 0;
 70         this._percent = 0;
 71         this._scale9Enabled = false;
 72         this._prevIgnoreSize = true;
 73         this._textureFile = "";
 74         this._progressBarTextureFile = "";
 75         this._slidBallNormalTextureFile = "";
 76         this._slidBallPressedTextureFile = "";
 77         this._slidBallDisabledTextureFile = "";
 78         this._capInsetsBarRenderer = cc.rect(0, 0, 0, 0);
 79         this._capInsetsProgressBarRenderer = cc.rect(0, 0, 0, 0);
 80         this._sliderEventListener = null;
 81         this._sliderEventSelector = null;
 82         this._barTexType = ccui.Widget.LOCAL_TEXTURE;
 83         this._progressBarTexType = ccui.Widget.LOCAL_TEXTURE;
 84         this._ballNTexType = ccui.Widget.LOCAL_TEXTURE;
 85         this._ballPTexType = ccui.Widget.LOCAL_TEXTURE;
 86         this._ballDTexType = ccui.Widget.LOCAL_TEXTURE;
 87         this._isTextureLoaded = false;
 88     },
 89 
 90     init:function(){
 91         if(ccui.Widget.prototype.init.call(this)){
 92             this.setTouchEnabled(true);
 93             return true;
 94         }
 95         return false;
 96     },
 97 
 98     initRenderer: function () {
 99         this._barRenderer = cc.Sprite.create();
100         this._progressBarRenderer = cc.Sprite.create();
101         this._progressBarRenderer.setAnchorPoint(0.0, 0.5);
102         cc.Node.prototype.addChild.call(this, this._barRenderer, ccui.Slider.BASEBAR_RENDERER_ZORDER, -1);
103         cc.Node.prototype.addChild.call(this, this._progressBarRenderer, ccui.Slider.PROGRESSBAR_RENDERER_ZORDER, -1);
104         this._slidBallNormalRenderer = cc.Sprite.create();
105         this._slidBallPressedRenderer = cc.Sprite.create();
106         this._slidBallPressedRenderer.setVisible(false);
107         this._slidBallDisabledRenderer = cc.Sprite.create();
108         this._slidBallDisabledRenderer.setVisible(false);
109         this._slidBallRenderer = cc.Node.create();
110         this._slidBallRenderer.addChild(this._slidBallNormalRenderer);
111         this._slidBallRenderer.addChild(this._slidBallPressedRenderer);
112         this._slidBallRenderer.addChild(this._slidBallDisabledRenderer);
113         cc.Node.prototype.addChild.call(this, this._slidBallRenderer, ccui.Slider.BALL_RENDERER_ZORDER, -1);
114     },
115 
116     /**
117      * Load texture for slider bar.
118      * @param {String} fileName
119      * @param {ccui.Widget.LOCAL_TEXTURE|ccui.Widget.PLIST_TEXTURE} texType
120      */
121     loadBarTexture: function (fileName, texType) {
122         if (!fileName) {
123             return;
124         }
125         texType = texType || ccui.Widget.LOCAL_TEXTURE;
126         this._textureFile = fileName;
127         this._barTexType = texType;
128         var barRenderer = this._barRenderer;
129         switch (this._barTexType) {
130             case ccui.Widget.LOCAL_TEXTURE:
131                 barRenderer.initWithFile(fileName);
132                 break;
133             case ccui.Widget.PLIST_TEXTURE:
134                 barRenderer.initWithSpriteFrameName(fileName);
135                 break;
136             default:
137                 break;
138         }
139         this.updateColorToRenderer(barRenderer);
140         this.barRendererScaleChangedWithSize();
141 
142         if (!barRenderer.textureLoaded()) {
143             barRenderer.addLoadedEventListener(function () {
144                 this.barRendererScaleChangedWithSize();
145             }, this);
146         }
147     },
148 
149     /**
150      * Load dark state texture for slider progress bar.
151      * @param {String} fileName
152      * @param {ccui.Widget.LOCAL_TEXTURE|ccui.Widget.PLIST_TEXTURE} texType
153      */
154     loadProgressBarTexture: function (fileName, texType) {
155         if (!fileName) {
156             return;
157         }
158         texType = texType || ccui.Widget.LOCAL_TEXTURE;
159         this._progressBarTextureFile = fileName;
160         this._progressBarTexType = texType;
161         var progressBarRenderer = this._progressBarRenderer;
162         switch (this._progressBarTexType) {
163             case ccui.Widget.LOCAL_TEXTURE:
164                 progressBarRenderer.initWithFile(fileName);
165                 break;
166             case ccui.Widget.PLIST_TEXTURE:
167                 progressBarRenderer.initWithSpriteFrameName(fileName);
168                 break;
169             default:
170                 break;
171         }
172         this.updateColorToRenderer(progressBarRenderer);
173         progressBarRenderer.setAnchorPoint(0.0, 0.5);
174         var locSize = progressBarRenderer.getContentSize();
175         this._progressBarTextureSize.width = locSize.width;
176         this._progressBarTextureSize.height = locSize.height;
177         this.progressBarRendererScaleChangedWithSize();
178 
179         var textLoaded = progressBarRenderer.textureLoaded();
180         this._isTextureLoaded = textLoaded;
181         if (!textLoaded) {
182             progressBarRenderer.addLoadedEventListener(function () {
183                 this._isTextureLoaded = true;
184                 var locSize = progressBarRenderer.getContentSize();
185                 this._progressBarTextureSize.width = locSize.width;
186                 this._progressBarTextureSize.height = locSize.height;
187                 this.progressBarRendererScaleChangedWithSize();
188             }, this);
189         }
190     },
191 
192     /**
193      * Sets if slider is using scale9 renderer.
194      * @param {Boolean} able
195      */
196     setScale9Enabled: function (able) {
197         if (this._scale9Enabled == able) {
198             return;
199         }
200 
201         this._scale9Enabled = able;
202         cc.Node.prototype.removeChild.call(this, this._barRenderer, true);
203         cc.Node.prototype.removeChild.call(this, this._progressBarRenderer, true);
204         this._barRenderer = null;
205         this._progressBarRenderer = null;
206         if (this._scale9Enabled) {
207             this._barRenderer = cc.Scale9Sprite.create();
208             this._progressBarRenderer = cc.Scale9Sprite.create();
209         }
210         else {
211             this._barRenderer = cc.Sprite.create();
212             this._progressBarRenderer = cc.Sprite.create();
213         }
214         this.loadBarTexture(this._textureFile, this._barTexType);
215         this.loadProgressBarTexture(this._progressBarTextureFile, this._progressBarTexType);
216         cc.Node.prototype.addChild.call(this, this._barRenderer, ccui.Slider.BASEBAR_RENDERER_ZORDER, -1);
217         cc.Node.prototype.addChild.call(this, this._progressBarRenderer, ccui.Slider.PROGRESSBAR_RENDERER_ZORDER, -1);
218         if (this._scale9Enabled) {
219             var ignoreBefore = this._ignoreSize;
220             this.ignoreContentAdaptWithSize(false);
221             this._prevIgnoreSize = ignoreBefore;
222         }
223         else {
224             this.ignoreContentAdaptWithSize(this._prevIgnoreSize);
225         }
226         this.setCapInsetsBarRenderer(this._capInsetsBarRenderer);
227         this.setCapInsetProgressBarRenderer(this._capInsetsProgressBarRenderer);
228     },
229 
230     /**
231      * Get  slider is using scale9 renderer or not.
232      * @returns {Boolean}
233      */
234     isScale9Enabled:function(){
235         return this._scale9Enabled;
236     },
237 
238     /**
239      * override "ignoreContentAdaptWithSize" method of widget.
240      * @param {Boolean} ignore
241      */
242     ignoreContentAdaptWithSize: function (ignore) {
243         if (!this._scale9Enabled || (this._scale9Enabled && !ignore)) {
244             ccui.Widget.prototype.ignoreContentAdaptWithSize.call(this, ignore);
245             this._prevIgnoreSize = ignore;
246         }
247     },
248 
249     /**
250      * Sets capinsets for slider, if slider is using scale9 renderer.
251      * @param {cc.Rect} capInsets
252      */
253     setCapInsets: function (capInsets) {
254         this.setCapInsetsBarRenderer(capInsets);
255         this.setCapInsetProgressBarRenderer(capInsets);
256     },
257 
258     /**
259      * Sets capinsets for slider, if slider is using scale9 renderer.
260      * @param {cc.Rect} capInsets
261      */
262     setCapInsetsBarRenderer: function (capInsets) {
263         this._capInsetsBarRenderer = capInsets;
264         if (!this._scale9Enabled) {
265             return;
266         }
267         this._barRenderer.setCapInsets(capInsets);
268     },
269 
270     /**
271      * Get cap insets for slider.
272      * @returns {cc.Rect}
273      */
274     getCapInsetBarRenderer:function(){
275         return this._capInsetsBarRenderer;
276     },
277 
278     /**
279      * Sets capinsets for slider, if slider is using scale9 renderer.
280      * @param {cc.Rect} capInsets
281      */
282     setCapInsetProgressBarRenderer: function (capInsets) {
283         this._capInsetsProgressBarRenderer = capInsets;
284         if (!this._scale9Enabled) {
285             return;
286         }
287         this._progressBarRenderer.setCapInsets(capInsets);
288     },
289 
290     /**
291      * Get cap insets for slider.
292      * @returns {cc.Rect}
293      */
294     getCapInsetProgressBarRenderer:function(){
295         return this._capInsetsProgressBarRenderer;
296     },
297 
298     /**
299      * Load textures for slider ball.
300      * @param {String} normal
301      * @param {String} pressed
302      * @param {String} disabled
303      * @param {ccui.Widget.LOCAL_TEXTURE|ccui.Widget.PLIST_TEXTURE} texType
304      */
305     loadSlidBallTextures: function (normal, pressed, disabled, texType) {
306         this.loadSlidBallTextureNormal(normal, texType);
307         this.loadSlidBallTexturePressed(pressed, texType);
308         this.loadSlidBallTextureDisabled(disabled, texType);
309     },
310 
311     /**
312      * Load normal state texture for slider ball.
313      * @param {String} normal
314      * @param {ccui.Widget.LOCAL_TEXTURE|ccui.Widget.PLIST_TEXTURE} texType
315      */
316     loadSlidBallTextureNormal: function (normal, texType) {
317         if (!normal) {
318             return;
319         }
320         texType = texType || ccui.Widget.LOCAL_TEXTURE;
321         this._slidBallNormalTextureFile = normal;
322         this._ballNTexType = texType;
323         switch (this._ballNTexType) {
324             case ccui.Widget.LOCAL_TEXTURE:
325                 this._slidBallNormalRenderer.initWithFile(normal);
326                 break;
327             case ccui.Widget.PLIST_TEXTURE:
328                 this._slidBallNormalRenderer.initWithSpriteFrameName(normal);
329                 break;
330             default:
331                 break;
332         }
333         this.updateColorToRenderer(this._slidBallNormalRenderer);
334     },
335 
336     /**
337      * Load selected state texture for slider ball.
338      * @param {String} pressed
339      * @param {ccui.Widget.LOCAL_TEXTURE|ccui.Widget.PLIST_TEXTURE} texType
340      */
341     loadSlidBallTexturePressed: function (pressed, texType) {
342         if (!pressed) {
343             return;
344         }
345         texType = texType || ccui.Widget.LOCAL_TEXTURE;
346         this._slidBallPressedTextureFile = pressed;
347         this._ballPTexType = texType;
348         switch (this._ballPTexType) {
349             case ccui.Widget.LOCAL_TEXTURE:
350                 this._slidBallPressedRenderer.initWithFile(pressed);
351                 break;
352             case ccui.Widget.PLIST_TEXTURE:
353                 this._slidBallPressedRenderer.initWithSpriteFrameName(pressed);
354                 break;
355             default:
356                 break;
357         }
358         this.updateColorToRenderer(this._slidBallPressedRenderer);
359     },
360 
361     /**
362      * Load dark state texture for slider ball.
363      * @param {String} disabled
364      * @param {ccui.Widget.LOCAL_TEXTURE|ccui.Widget.PLIST_TEXTURE} texType
365      */
366     loadSlidBallTextureDisabled: function (disabled, texType) {
367         if (!disabled) {
368             return;
369         }
370         texType = texType || ccui.Widget.LOCAL_TEXTURE;
371         this._slidBallDisabledTextureFile = disabled;
372         this._ballDTexType = texType;
373         switch (this._ballDTexType) {
374             case ccui.Widget.LOCAL_TEXTURE:
375                 this._slidBallDisabledRenderer.initWithFile(disabled);
376                 break;
377             case ccui.Widget.PLIST_TEXTURE:
378                 this._slidBallDisabledRenderer.initWithSpriteFrameName(disabled);
379                 break;
380             default:
381                 break;
382         }
383         this.updateColorToRenderer(this._slidBallDisabledRenderer);
384     },
385 
386     /**
387      * Changes the progress direction of slider.
388      * @param {number} percent
389      */
390     setPercent: function (percent) {
391         if (percent > 100) {
392             percent = 100;
393         }
394         if (percent < 0) {
395             percent = 0;
396         }
397         this._percent = percent;
398         if(!this._isTextureLoaded){
399             return;
400         }
401         var dis = this._barLength * (percent / 100.0);
402         this._slidBallRenderer.setPosition(-this._barLength / 2.0 + dis, 0.0);
403         if (this._scale9Enabled) {
404             this._progressBarRenderer.setPreferredSize(cc.size(dis, this._progressBarTextureSize.height));
405         }
406         else {
407             var x = 0, y = 0;
408             if (this._progressBarTexType == ccui.Widget.PLIST_TEXTURE) {
409                 var barNode = this._progressBarRenderer;
410                 if (barNode) {
411                     var to = barNode.getTextureRect()._origin;
412                     x = to.x;
413                     y = to.y;
414                 }
415             }
416             this._progressBarRenderer.setTextureRect(cc.rect(x, y, this._progressBarTextureSize.width * (percent / 100.0), this._progressBarTextureSize.height));
417         }
418     },
419 
420     onTouchBegan: function (touch , event) {
421         var pass = ccui.Widget.prototype.onTouchBegan.call(this,touch , event);
422         if(this._hitted){
423             var nsp = this.convertToNodeSpace(this._touchStartPos);
424             this.setPercent(this.getPercentWithBallPos(nsp.x));
425             this.percentChangedEvent();
426         }
427         return pass;
428     },
429 
430     onTouchMoved: function (touch , event) {
431         var touchPoint = touch.getLocation();
432         this._touchMovePos.x = touchPoint.x;
433         this._touchMovePos.y = touchPoint.y;
434         var nsp = this.convertToNodeSpace(touchPoint);
435         this._slidBallRenderer.setPosition(nsp.x, 0);
436         this.setPercent(this.getPercentWithBallPos(nsp.x));
437         this.percentChangedEvent();
438     },
439 
440     onTouchEnded: function (touch , event) {
441         ccui.Widget.prototype.onTouchEnded.call(this, touch , event);
442     },
443 
444     onTouchCancelled: function (touch , event) {
445         ccui.Widget.prototype.onTouchCancelled.call(this, touch , event);
446     },
447 
448     /**
449      * get percent with ballPos
450      * @param {cc.Point} px
451      * @returns {number}
452      */
453     getPercentWithBallPos: function (px) {
454         return (((px - (-this._barLength / 2.0)) / this._barLength) * 100.0);
455     },
456 
457     /**
458      * add event listener
459      * @param {Function} selector
460      * @param {Object} target
461      */
462     addEventListenerSlider: function (selector, target) {
463         this._sliderEventSelector = selector;
464         this._sliderEventListener = target;
465     },
466 
467     percentChangedEvent: function () {
468         if (this._sliderEventListener && this._sliderEventSelector) {
469             this._sliderEventSelector.call(this._sliderEventListener, this, ccui.Slider.EVENT_PERCENT_CHANGED);
470         }
471     },
472 
473     /**
474      * Gets the progress direction of slider.
475      * @returns {number}
476      */
477     getPercent: function () {
478         return this._percent;
479     },
480 
481     onSizeChanged: function () {
482         ccui.Widget.prototype.onSizeChanged.call(this);
483         this.barRendererScaleChangedWithSize();
484         this.progressBarRendererScaleChangedWithSize();
485     },
486 
487     /**
488      * override "getContentSize" method of widget.
489      * @returns {cc.Size}
490      */
491     getContentSize: function () {
492         var locContentSize = this._barRenderer.getContentSize();
493         return cc.size(locContentSize.width,locContentSize.height);
494     },
495 	_getWidth: function () {
496 		return this._barRenderer._getWidth();
497 	},
498 	_getHeight: function () {
499 		return this._barRenderer._getHeight();
500 	},
501 
502     /**
503      * override "getContentSize" method of widget.
504      * @returns {cc.Node}
505      */
506     getVirtualRenderer: function () {
507         return this._barRenderer;
508     },
509 
510     barRendererScaleChangedWithSize: function () {
511         if (this._ignoreSize) {
512             this._barRenderer.setScale(1.0);
513             var locSize = this._barRenderer.getContentSize();
514             this._size.width = locSize.width;
515             this._size.height = locSize.height;
516             this._barLength = locSize.width;
517         }
518         else {
519             this._barLength = this._size.width;
520             if (this._scale9Enabled) {
521                 this._barRenderer.setPreferredSize(cc.size(this._size.width,this._size.height));
522             }
523             else {
524                 var btextureSize = this._barRenderer.getContentSize();
525                 if (btextureSize.width <= 0.0 || btextureSize.height <= 0.0) {
526                     this._barRenderer.setScale(1.0);
527                     return;
528                 }
529                 var bscaleX = this._size.width / btextureSize.width;
530                 var bscaleY = this._size.height / btextureSize.height;
531                 this._barRenderer.setScaleX(bscaleX);
532                 this._barRenderer.setScaleY(bscaleY);
533             }
534         }
535         this.setPercent(this._percent);
536     },
537 
538     progressBarRendererScaleChangedWithSize: function () {
539         if (this._ignoreSize) {
540             if (!this._scale9Enabled) {
541                 var ptextureSize = this._progressBarTextureSize;
542                 var pscaleX = this._size.width / ptextureSize.width;
543                 var pscaleY = this._size.height / ptextureSize.height;
544                 this._progressBarRenderer.setScaleX(pscaleX);
545                 this._progressBarRenderer.setScaleY(pscaleY);
546             }
547         }
548         else {
549             if (this._scale9Enabled) {
550                 this._progressBarRenderer.setPreferredSize(cc.size(this._size.width,this._size.height));
551             }
552             else {
553                 var ptextureSize = this._progressBarTextureSize;
554                 if (ptextureSize.width <= 0.0 || ptextureSize.height <= 0.0) {
555                     this._progressBarRenderer.setScale(1.0);
556                     return;
557                 }
558                 var pscaleX = this._size.width / ptextureSize.width;
559                 var pscaleY = this._size.height / ptextureSize.height;
560                 this._progressBarRenderer.setScaleX(pscaleX);
561                 this._progressBarRenderer.setScaleY(pscaleY);
562             }
563         }
564         this._progressBarRenderer.setPosition(-this._barLength * 0.5, 0.0);
565         this.setPercent(this._percent);
566     },
567 
568     onPressStateChangedToNormal: function () {
569         this._slidBallNormalRenderer.setVisible(true);
570         this._slidBallPressedRenderer.setVisible(false);
571         this._slidBallDisabledRenderer.setVisible(false);
572     },
573 
574     onPressStateChangedToPressed: function () {
575         this._slidBallNormalRenderer.setVisible(false);
576         this._slidBallPressedRenderer.setVisible(true);
577         this._slidBallDisabledRenderer.setVisible(false);
578     },
579 
580     onPressStateChangedToDisabled: function () {
581         this._slidBallNormalRenderer.setVisible(false);
582         this._slidBallPressedRenderer.setVisible(false);
583         this._slidBallDisabledRenderer.setVisible(true);
584     },
585 
586     updateTextureColor: function () {
587         this.updateColorToRenderer(this._barRenderer);
588         this.updateColorToRenderer(this._progressBarRenderer);
589         this.updateColorToRenderer(this._slidBallNormalRenderer);
590         this.updateColorToRenderer(this._slidBallPressedRenderer);
591         this.updateColorToRenderer(this._slidBallDisabledRenderer);
592     },
593 
594     updateTextureOpacity: function () {
595         this.updateOpacityToRenderer(this._barRenderer);
596         this.updateOpacityToRenderer(this._progressBarRenderer);
597         this.updateOpacityToRenderer(this._slidBallNormalRenderer);
598         this.updateOpacityToRenderer(this._slidBallPressedRenderer);
599         this.updateOpacityToRenderer(this._slidBallDisabledRenderer);
600     },
601 
602     /**
603      * Returns the "class name" of widget.
604      * @returns {string}
605      */
606     getDescription: function () {
607         return "Slider";
608     },
609 
610     createCloneInstance: function () {
611         return ccui.Slider.create();
612     },
613 
614     copySpecialProperties: function (slider) {
615         this._prevIgnoreSize = slider._prevIgnoreSize;
616         this.setScale9Enabled(slider._scale9Enabled);
617         this.loadBarTexture(slider._textureFile, slider._barTexType);
618         this.loadProgressBarTexture(slider._progressBarTextureFile, slider._progressBarTexType);
619         this.loadSlidBallTextureNormal(slider._slidBallNormalTextureFile, slider._ballNTexType);
620         this.loadSlidBallTexturePressed(slider._slidBallPressedTextureFile, slider._ballPTexType);
621         this.loadSlidBallTextureDisabled(slider._slidBallDisabledTextureFile, slider._ballDTexType);
622         this.setPercent(slider.getPercent());
623     }
624 });
625 
626 window._p = ccui.Slider.prototype;
627 
628 // Extended properties
629 /** @expose */
630 _p.percent;
631 cc.defineGetterSetter(_p, "percent", _p.getPercent, _p.setPercent);
632 
633 delete window._p;
634 
635 /**
636  * allocates and initializes a UISlider.
637  * @constructs
638  * @return {ccui.Slider}
639  * @example
640  * // example
641  * var uiSlider = ccui.Slider.create();
642  */
643 ccui.Slider.create = function () {
644     var uiSlider = new ccui.Slider();
645     if (uiSlider && uiSlider.init()) {
646         return uiSlider;
647     }
648     return null;
649 };
650 
651 // Constant
652 //Slider event type
653 ccui.Slider.EVENT_PERCENT_CHANGED = 0;
654 
655 //Render zorder
656 ccui.Slider.BASEBAR_RENDERER_ZORDER = -3;
657 ccui.Slider.PROGRESSBAR_RENDERER_ZORDER = -2;
658 ccui.Slider.BALL_RENDERER_ZORDER = -1;