Changeset 5553

Timestamp:

05/11/08 19:56:04 (3 months ago)

Author:

braeker

Message:

Fluent progressbar text

Location:

branches/ui-1.6/ui

Files:

• tests/progressbar.html (modified) (9 diffs)
• ui.progressbar.js (modified) (3 diffs)

branches/ui-1.6/ui/tests/progressbar.html

@@ -18 +18 @@
 <script type="text/javascript" src="../ui.progressbar.js"></script>
 
-<script type="text/javascript" src="../../fx/fx.js"></script>
-<script type="text/javascript" src="../../fx/fx.bounce.js"></script>
-<script type="text/javascript" src="../../fx/fx.scale.js"></script>
-
-<link rel="stylesheet" href="../../themes/flora/flora.all.css" type="text/css" media="screen" title="Flora (Default)" />
 <style type="text/css" media="all">
 
@@ -29 +24 @@
     background: #fff;
     font-family: Arial;
-    font-size: 12px;
 }
 
@@ -43 +37 @@
 }
 
+/* ProgressBar */
+
 .ui-progressbar {
-    padding: 1px;
-    width: 200px; line-height: 19px;
+    width: 400px; height: 20px;
     border: 1px #ccc solid;
     background:#E0E8F3 url(images/bg.gif) repeat-x scroll 0%;
@@ -51 +46 @@
 }
 
-
-.ui-hidden {
-    left:-10000px;
-    position:absolute;
-    top:-10000px;
-    visibility:hidden;
-}
-
 .ui-progressbar-wrap {
-    position:relative;
-    height: 20px;
-}
-
-.ui-progressbar-text {
-    color:#fff;
-    font-size:11px;
-    font-weight:bold;
-    left:0pt;
-    overflow:hidden;
-    padding:0px 5px;
-    text-align:left;
-    position: absolute;
-}
-
-.ui-progressbar-text.right-align {
-    text-align: right;
-    padding: 0 5px 0 0;
-}
-
-.ui-progressbar-text-back {
-    /*background:#E0E8F3 url(images/bg.gif) repeat-x scroll 0%;*/
-    color:#000;
+    position: relative;
+    height: auto;
+    width: auto;
+    line-height: 18px;
+    _line-height: 16px;
 }
 
@@ -90 +59 @@
     border-right:1px solid #7FA9E4;
     border-top:1px solid #D1E4FD;
-    height:18px;
-    width:0pt;
     position: absolute;
+}
+
+.ui-progressbar-text {
+    color:#fff;
+    overflow: hidden;
+    white-space: nowrap;
+    font-size: 11px;
+    font-weight: bold;
+    padding-left: 5px;
+}
+
+.ui-progressbar-text-back {
+    color:#000;
+    padding-top: 1px;
+    padding-bottom: 1px;
+    padding-right: 1px;
 }
 
@@ -102 +85 @@
 
 /* custom */
+.ui-progressbar-text.right-align {
+    text-align: right;
+    padding: 0 5px 0 0;
+}
 .ui-progressbar-inner-custom {
     background: url(images/custom-bar.gif) repeat-x scroll left center;
@@ -108 +95 @@
     border-top:1px solid #BEBEBE;
     height:15px;
+}
+
+.ui-hidden {
+    left:-10000px;
+    position:absolute;
+    top:-10000px;
+    visibility:hidden;
 }
 
@@ -172 +166 @@
         $('#p1').progressbar({
             
-            text: 'Waiting...',
+            text: 'jQuery ProgressBar waiting...',
             
             //addClass: 'ui-progressbar-inner-custom teste',
@@ -184 +178 @@
       duration: 2000,
             
-      stepping: 5,
+      stepping: 3,
             
             progress: function(range, ui) {

branches/ui-1.6/ui/ui.progressbar.js

@@ -52 +52 @@
         var text = o.text ? o.text : (o.range ? '0%' : ''), elw = el.css('width'), elh = el.css('height');
         
-        //el.css({overflow: 'hidden'});
-    
         this.wrapper = $("<div class='ui-progressbar-wrap'></div>");
         
@@ -60 +58 @@
         });
         
-        this.textel = $("<div class='ui-progressbar-text'></div>").css({
+        this.textel = $("<div class='ui-progressbar-text'></div>").html(text).css({
             width: '0px', overflow: 'hidden'
-        })
-        .append(
-            $('<div>').html(text)
-        );
-        
-        this.textBg = $("<div class='ui-progressbar-text ui-progressbar-text-back'></div>")
-        .append(
-            $('<div>').html(text).css({ width: elw })
-        );
+        });
+        
+        this.textBg = $("<div class='ui-progressbar-text ui-progressbar-text-back'></div>").html(text).css({
+                width: elw
+        });
         
         this.wrapper.append(this.bar.append(this.textel), this.textBg).appendTo(el);
@@ -126 +120 @@
             var frames = Math.ceil(100/o.stepping) || 0, ms = o.duration/frames || 0,
             
-            render = function(step, t) { return function() {
-                    clearInterval(t);
-                    self.progress(o.stepping * step);
-                    // on end
-                    if (step >= frames) {
-                        self.stop();
-
-                        if (self.waitThread || o.wait == 'loop') {
-                            self._step = 0;
-                            self.start();
-                        }
+            render = function(step, t) {
+                //clearInterval(t);
+                
+                console.log(step)
+                
+                self.progress(o.stepping * step);
+                // on end
+                if (step >= frames) {
+                    self.stop();
+
+                    if (self.waitThread || o.wait == 'loop') {
+                        self._step = 0;
+                        self.start();
                     }
-                };
+                }
             };
-            var from = this._step;
-            
-            for(var step = from; step <= frames; step++) {
+            var from = this._step, _step = (this._step - (from - 1));
+            
+            console.log(_step)
+            
+            /*for(var step = from; step <= frames; step++) {
                 var interval = (step - (from - 1)) * ms;
                 this.threads[step] = setTimeout(render(step, this.threads[step]), interval);
-            }
+            }*/
+            
+            this.threads[0] = setInterval(function() {
+                render(_step++);
+            }, ms);
             
             this.propagate('start');