diff options
| author | Maggie Costello Wachs <fg.maggie@gmail.com> | 2008-12-05 22:59:01 +0000 |
|---|---|---|
| committer | Maggie Costello Wachs <fg.maggie@gmail.com> | 2008-12-05 22:59:01 +0000 |
| commit | 03909cb87c8419e6718b3c0d59adbd1bd5afa1ba (patch) | |
| tree | b0c636fa97acaaa8e312957445760d2e31034db4 /tests | |
| parent | bd96035b5d0892ce2f05192c1de308aac364f063 (diff) | |
| download | jquery-ui-03909cb87c8419e6718b3c0d59adbd1bd5afa1ba.tar.gz jquery-ui-03909cb87c8419e6718b3c0d59adbd1bd5afa1ba.zip | |
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
Diffstat (limited to 'tests')
| -rw-r--r-- | tests/static/progressbar.html | 31 |
1 files changed, 30 insertions, 1 deletions
diff --git a/tests/static/progressbar.html b/tests/static/progressbar.html index 6df5a7a5a..a83ada345 100644 --- a/tests/static/progressbar.html +++ b/tests/static/progressbar.html @@ -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> |