1 /** 2 * progressbar ui 3 * @author yiminghe@gmail.com 4 */ 5 KISSY.add("editor/plugin/progressbar/index", function(S) { 6 7 var DOM = S.DOM,Node = S.Node; 8 9 function ProgressBar() { 10 ProgressBar.superclass.constructor.apply(this, arguments); 11 this._init(); 12 } 13 14 ProgressBar.ATTRS = { 15 container:{}, 16 width:{}, 17 height:{}, 18 //0-100 19 progress:{ 20 value:0 21 } 22 }; 23 S.extend(ProgressBar, S.Base, { 24 destroy:function() { 25 var self = this; 26 self.detach(); 27 self.el.remove(); 28 }, 29 _init:function() { 30 var self = this, 31 h = self.get("height"), 32 el = new Node("<div" + 33 " class='ks-editor-progressbar' " + 34 " style='width:" + 35 self.get("width") + 36 ";" + 37 "height:" + 38 h + 39 ";'" + 40 "></div>"), 41 container = self.get("container"), 42 p = new Node( 43 "<div style='overflow:hidden;'>" + 44 "<div class='ks-editor-progressbar-inner' style='height:" + (parseInt(h) - 4) + "px'>" + 45 "<div class='ks-editor-progressbar-inner-bg'></div>" + 46 "</div>" + 47 "</div>" 48 ).appendTo(el), 49 title = new Node("<span class='ks-editor-progressbar-title'></span>").appendTo(el); 50 if (container) 51 el.appendTo(container); 52 self.el = el; 53 self._title = title; 54 self._p = p; 55 self.on("afterProgressChange", self._progressChange, self); 56 self._progressChange({newVal:self.get("progress")}); 57 }, 58 59 _progressChange:function(ev) { 60 var self = this, 61 v = ev.newVal; 62 self._p.css("width", v + "%"); 63 self._title.html(v + "%"); 64 } 65 }); 66 return ProgressBar; 67 });