r1044 - in trunk: tests/static themes/base

r1044 - in trunk: tests/static themes/base


Author: fg.maggie
Date: Fri Dec 5 14:59:01 2008
New Revision: 1044
Modified:
trunk/tests/static/progressbar.html
trunk/themes/base/ui.progressbar.css
Log:
added examples of labels offset from the left side, FG's recommendation for
best workaround re: label position, requires no extra markup and max
flexibility
Modified: trunk/tests/static/progressbar.html
==============================================================================
--- trunk/tests/static/progressbar.html    (original)
+++ trunk/tests/static/progressbar.html    Fri Dec 5 14:59:01 2008
@@ -3,14 +3,43 @@
<head>
    <title>jQuery UI Progressbar Static Markup Test Page</title>
    <link rel="stylesheet" href="../../themes/base/ui.all.css"
type="text/css">
+    <style type="text/css">
+    h2 { margin:1.5em 0 .5em; }
+    </style>
</head>
<body>
<h1>jQuery UI Progressbar Static Markup Test Page</h1>
+<h2>Flexible width:</h2>
+
<div class="ui-progressbar ui-widget ui-widget-content ui-corner-all"
role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="13">
    <div class="ui-progressbar-label">13% Completed</div>
-    <div class="ui-progressbar-value ui-state-default ui-corner-left"
style="width: 13%;"><span class="ui-progressbar-label">13%
Completed</span></div>
+    <div class="ui-progressbar-value ui-state-default ui-corner-left"
style="width:13%;"><div class="ui-progressbar-label">13%
Completed</div></div>
+</div>
+
+<br /><br/>
+
+<!-- users can set a left offset in px, %, ems, whatever to move the label
along the axis -->
+
+<div class="ui-progressbar ui-widget ui-widget-content ui-corner-all"
role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="55">
+    <div class="ui-progressbar-label" style="left:350px;">55% Completed</div>
+    <div class="ui-progressbar-value ui-state-default ui-corner-left"
style="width:55%"><div class="ui-progressbar-label" style="left:350px;">55%
Completed</div></div>
+</div>
+
+<br /><br/>
+
+<div class="ui-progressbar ui-widget ui-widget-content ui-corner-all"
role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="55">
+    <div class="ui-progressbar-label" style="left:600px;">55% Completed</div>
+    <div class="ui-progressbar-value ui-state-default ui-corner-left"
style="width:55%"><div class="ui-progressbar-label" style="left:600px;">55%
Completed</div></div>
+</div>
+
+
+<h2>Fixed width (px):</h2>
+
+<div style="width:500px" class="ui-progressbar ui-progressbar-fixed
ui-widget ui-widget-content ui-corner-all" role="progressbar"
aria-valuemin="0" aria-valuemax="100" aria-valuenow="78">
+    <div class="ui-progressbar-label">78% Completed</div>
+    <div class="ui-progressbar-value ui-state-default ui-corner-left"
style="width:78%"><div class="ui-progressbar-label">78%
Completed</div></div>
</div>
</body>
Modified: trunk/themes/base/ui.progressbar.css
==============================================================================
--- trunk/themes/base/ui.progressbar.css    (original)
+++ trunk/themes/base/ui.progressbar.css    Fri Dec 5 14:59:01 2008
@@ -1,6 +1,6 @@
/* Progressbar
----------------------------------*/
-.ui-progressbar { position: relative; }
-.ui-progressbar-label {position: absolute; top: 0; left: 0;
padding: .4em .5em; border: 0; background: none; }
-.ui-progressbar-value { position: relative; margin: -1px;
padding: .4em .5em; overflow: hidden; font-weight: normal !important;
white-space: nowrap; }
-.ui-progressbar-value .ui-progressbar-label { position: static; padding:
0; top: auto; left: auto; }
\ No newline at end of file
+.ui-progressbar { position: relative; overflow:hidden; }
+.ui-progressbar, .ui-progressbar-value { height:1em; padding:.4em 0 .5em;
}
+.ui-progressbar-label { position: absolute; left:0; top: .3em;
text-indent: .5em; border: 0; background: none; white-space: nowrap; }
+.ui-progressbar-value { position: absolute; top:0; width:100%; margin:
-1px; overflow: hidden; font-weight: normal !important; white-space:
nowrap; }
\ No newline at end of file