| 1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859 |
- <html>
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
- <title>ProgressBar</title>
- <link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
- <!-- GC -->
- <!-- LIBS -->
- <script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>
- <!-- ENDLIBS -->
- <script type="text/javascript" src="../../ext-all.js"></script>
- <script type="text/javascript" src="progress-bar.js"></script>
- <link rel="stylesheet" type="text/css" href="progress-bar.css" />
- <!-- Common Styles for the examples -->
- <link rel="stylesheet" type="text/css" href="../examples.css" />
- </head>
- <body>
- <script type="text/javascript" src="../examples.js"></script><!-- EXAMPLES -->
- <h1>Progress Bar</h1>
- <p>The example shows how to use the ProgressBar class. The js is not minified so it is readable.
- See <a href="progress-bar.js">progress-bar.js</a>.
- </p>
- <p>
- <b>Basic Progress Bar</b><br />
- Deferred rendering, dynamic show/hide and built-in progress text:
- <button id="btn1">Show</button><br />
- <div class="status" id="p1text">Nothing to see here.</div>
- <div id="p1" style="width:300px;"></div>
- </p>
- <p>
- <b>Additional Options</b><br />
- Rendered on page load, left-aligned text and % width:
- <button id="btn2">Show</button><br />
- <div id="p2" style="width:50%;"></div>
- </p>
- <p>
- <b>Waiting Bar</b><br />
- Wait for a long operation to complete (example will stop after 5 secs):
- <button id="btn3">Show</button><br />
- <div id="p3"></div>
- <span class="status" id="p3text">Ready</span>
- </p>
- <p>
- <b>Custom Styles</b><br />
- Rendered like Windows XP with custom progress text element:
- <button id="btn4">Show</button><br />
- <div id="p4" style="width:300px;"></div>
- <div class="status"><b>Status:</b> <span id="p4text"></span></div>
- </p>
- </body>
- </html>
|
