JavaScript Tutorial/jQuery/UI Progessbar

Материал из Web эксперт
Перейти к: навигация, поиск

30. jQuery UI Progressbar - Animated

   <source lang="javascript">

<!doctype html> <html lang="en"> <head>

 <title>jQuery UI Progressbar - Animated</title>
 <link type="text/css" href="js/themes/base/ui.all.css" rel="stylesheet" />
 <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
 <script type="text/javascript" src="js/ui/ui.core.js"></script>
 <script type="text/javascript" src="js/ui/ui.progressbar.js"></script>
 <link type="text/css" href="js/demos.css" rel="stylesheet" />
 <style type="text/css">
   .ui-progressbar-value { background-image: url(images/pbar-ani.gif); }
 </style>
 <script type="text/javascript">
 $(function() {
   $("#progressbar").progressbar({
     value: 59
   });
 });
 </script>

</head> <body>

This progressbar has an animated fill by setting the background-image on the .ui-progressbar-value element, using css.

</body> </html></source>


30. jQuery UI Progressbar - Default functionality

   <source lang="javascript">

<!doctype html> <html lang="en"> <head>

 <title>jQuery UI Progressbar - Default functionality</title>
 <link type="text/css" href="js/themes/base/ui.all.css" rel="stylesheet" />
 <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
 <script type="text/javascript" src="js/ui/ui.core.js"></script>
 <script type="text/javascript" src="js/ui/ui.progressbar.js"></script>
 <link type="text/css" href="js/demos.css" rel="stylesheet" />
 <script type="text/javascript">
 $(function() {
   $("#progressbar").progressbar({
     value: 37
   });
 });
 </script>

</head> <body>

Default determinate progress bar.

</body> </html></source>


30. jQuery UI Progressbar - Resizable

   <source lang="javascript">

<!doctype html> <html lang="en"> <head>

 <title>jQuery UI Progressbar - Resizable</title>
 <link type="text/css" href="js/themes/base/ui.all.css" rel="stylesheet" />
 <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
 <script type="text/javascript" src="js/ui/ui.core.js"></script>
 <script type="text/javascript" src="js/ui/ui.progressbar.js"></script>
 <script type="text/javascript" src="js/ui/ui.resizable.js"></script>
 <link type="text/css" href="js/demos.css" rel="stylesheet" />
 <script type="text/javascript">
 $(function() {
   $("#progressbar").progressbar({
     value: 37
   });
   $("#progressbarWrapper").resizable();
 });
 </script>

</head> <body>

The progress bar"s widths are specified in percentages for flexible sizing so it will resize to fit its container. Try resizing the height and width of this bar to see how it maintains the correct proportions. (This is not necessarily a real-world example, but it"s a good illustration of how flexibly all the plugins are coded.)

</body> </html></source>