プログレスバー
PEARのInstallerで使っていたプログレスバーがどうなっているのか作ってみました。プログレスバー処理サンプル
JavaScriptがメインでした。
flushリファレンス
flushを使う
function flush_sleep() { flush(); ob_flush(); usleep(200000); } <!doctype html public "-//W3C//DTD HTML 4.01 Transitional//EN"> <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=EUC-JP"> <title>rakutoネット</title> <link rel="CONTENTS" href="{$base_url}index.php"> <meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="Content-Script-Type" content="text/javascript"> </head> <body> <h2>PHPflush();関数テスト</h2><br> flush_sleep(); ステップ１の処理が終わりました。 <script type="text/javascript">parent.setProgress(8,1);</script><br> flush_sleep(); ステップ２の処理が終わりました。 <script type="text/javascript">parent.setProgress(12,1);</script><br> flush_sleep(); ステップ３の処理が終わりました。 <script type="text/javascript">parent.setProgress(15,1);</script><br> flush_sleep(); ステップ４の処理が終わりました。 <script type="text/javascript">parent.setProgress(21,2);</script><br> flush_sleep(); ステップ５の処理が終わりました。 <script type="text/javascript">parent.setProgress(26,2);</script><br> flush_sleep(); ステップ６の処理が終わりました。 <script type="text/javascript">parent.setProgress(30,3);</script><br> flush_sleep(); ステップ７の処理が終わりました。 <script type="text/javascript">parent.setProgress(35,3);</script><br> flush_sleep(); ステップ８の処理が終わりました。 <script type="text/javascript">parent.setProgress(40,4);</script><br> flush_sleep(); ステップ９の処理が終わりました。 <script type="text/javascript">parent.setProgress(45,4);</script><br> flush_sleep(); ステップ10の処理が終わりました。 <script type="text/javascript">parent.setProgress(50,5);</script><br> flush_sleep(); ステップ11の処理が終わりました。 <script type="text/javascript">parent.setProgress(55,5);</script><br> flush_sleep(); ステップ12の処理が終わりました。 <script type="text/javascript">parent.setProgress(60,6);</script><br> flush_sleep(); ステップ13の処理が終わりました。 <script type="text/javascript">parent.setProgress(65,6);</script><br> flush_sleep(); ステップ14の処理が終わりました。 <script type="text/javascript">parent.setProgress(70,7);</script><br> flush_sleep(); ステップ15の処理が終わりました。 <script type="text/javascript">parent.setProgress(75,7);</script><br> flush_sleep(); ステップ16の処理が終わりました。 <script type="text/javascript">parent.setProgress(80,8);</script><br> flush_sleep(); ステップ17の処理が終わりました。 <script type="text/javascript">parent.setProgress(85,8);</script><br> flush_sleep(); ステップ18の処理が終わりました。 <script type="text/javascript">parent.setProgress(90,9);</script><br> flush_sleep(); ステップ19の処理が終わりました。 <script type="text/javascript">parent.setProgress(95,9);</script><br> flush_sleep(); ステップ20の処理が終わりました。 <script type="text/javascript">parent.setProgress(100,10);</script><br> <br> </body> </html>
実行ファイル
<!doctype html public "-//W3C//DTD HTML 4.01 Transitional//EN"> <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <title>rakutoネット</title> <meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <script type="text/javascript"> <!-- function setProgress(percent,barno) { var node = document.getElementById('percent'); node.innerHTML = percent; node = document.getElementById('bar'+ barno); node.style.backgroundColor = "#FFAACC"; } // --> </script> </head> <body> JavaScriptはIEで確認しました。<br> <table class="frame" summary="プログレスバー" border="0" cellpadding="0" cellspacing="0"> <tr> <td width="20" height="40" id="bar1" style="background-color:#AACCFF;"> <img src="spacer.gif" width="20" height="40"> </td> <td width="20" height="40" id="bar2" style="background-color:#AACCFF;"> <img src="spacer.gif" width="20" height="40"> </td> <td width="20" height="40" id="bar3" style="background-color:#AACCFF;"> <img src="spacer.gif" width="20" height="40"> </td> <td width="20" height="40" id="bar4" style="background-color:#AACCFF;"> <img src="spacer.gif" width="20" height="40"> </td> <td width="20" height="40" id="bar5" style="background-color:#AACCFF;"> <img src="spacer.gif" width="20" height="40"> </td> <td width="20" height="40" id="bar6" style="background-color:#AACCFF;"> <img src="spacer.gif" width="20" height="40"> </td> <td width="20" height="40" id="bar7" style="background-color:#AACCFF;"> <img src="spacer.gif" width="20" height="40"> </td> <td width="20" height="40" id="bar8" style="background-color:#AACCFF;"> <img src="spacer.gif" width="20" height="40"> </td> <td width="20" height="40" id="bar9" style="background-color:#AACCFF;"> <img src="spacer.gif" width="20" height="40"> </td> <td width="20" height="40" id="bar10" style="background-color:#AACCFF;"> <img src="spacer.gif" width="20" height="40"> </td> <td width="20" height="40"> </td> <td width="20" height="40" id="percent" style="font-size:1.4em"></td> <td width="220" height="40">パーセント</td> </tr> </table> <br> <iframe src="flush.php" width="300" height="500" style="border: 1px solid #394174;" frameborder="0" marginheight="4" marginwidth="4"></iframe> </body> </html>
Templateエンジンのすすめ
SQLiteをやってみよう
SQLiteコマンド一覧
SQLite 管理
はじめてのEclipse
PHP SQLiteのTIPS
サンプル／ダウンロード
リンク
掲示板
incoude pathを通す