自前で、プログレスバーの実装はめんどいのです。
なので、jQueryUIを使って手っ取り早く実装できないものかと。
昨日、QueryUIをCDNを使ってロードする方法を書いたので、それを使いつつも、jQueryUIのProgressbarを読みながら試しに実装しました。
| <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-type" content="text/html; charset=utf-8"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js" ></script> <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js" ></script> <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.12/themes/base/jquery-ui.css"> <script> $(function() { var jObj = $( "#progressbar" ); jObj.progressbar({ value: 37 }); }); </script> </head> <body> <div id="progressbar"></div> </body> </html> |
ちなみに、上記の実装だと、プログレスバーが画面いっぱいに広がってしまいます。
横幅をカスタマイズするためには、
| <style type="text/css"> .ui-progressbar{ width:200px; } </style> |
| <style type="text/css"> .ui-progressbar{ height:10px; } </style> |
| <style type="text/css"> .ui-progressbar-value{ background:red; } </style> |
こうしてまとめておけば、後で、実装するときに便利ですね。
0 コメント:
コメントを投稿