シンプルなサンプル
* まずは、これで環境ができているかを確認する
サンプル
<html> <head> <title></title> <!-- CSSも含めて、インポートする必要がある --> <link rel="stylesheet" href="jquery/themes/base/jquery.ui.all.css" /> <script src="jquery/jquery-1.6.2.js" type="text/javascript"></script> <script src="jquery/ui/jquery.ui.core.js" type="text/javascript"></script> <script src="jquery/ui/jquery.ui.widget.js" type="text/javascript"></script> <script src="jquery/ui/jquery.ui.progressbar.js" type="text/javascript"></script> <script type="text/javascript"> <!-- jQuery(function () { jQuery('#progressbar').progressbar({ value: 40 }); }); // --> </script> </head> <body> <div id="progressbar"></div> </body> </html>
参考文献
http://alphasis.info/2011/06/jquery-ui-progressbar/クリックイベントで進捗率を進める
サンプル
<html> <head> <title></title> <link rel="stylesheet" href="jquery/themes/base/jquery.ui.all.css" /> <script src="jquery/jquery-1.6.2.js" type="text/javascript"></script> <script src="jquery/ui/jquery.ui.core.js" type="text/javascript"></script> <script src="jquery/ui/jquery.ui.widget.js" type="text/javascript"></script> <script src="jquery/ui/jquery.ui.progressbar.js" type="text/javascript"></script> <script type="text/javascript"> <!-- $(document).ready(function () { var progress = 5; $('#progressbar').progressbar({ value: progress }); $('#addProgress').click(function () { $('#progressbar').progressbar('value', ++progress); }); }); // --> </script> </head> <body> <div id="progressbar"></div> <input type="button" value="Press" id="addProgress" /> </body> </html>