シンプルなサンプル
* まずは、これで環境ができているかを確認する
サンプル
<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>
