TwitterのBootstrapは、現在最も人気のあるフロントエンドフレームワークです。 Bootstrapは、HTML、CSS、およびJavaScriptに基づいています。シンプルで柔軟で、Web開発をより速くします。
初心者のチュートリアルのコードなど、Bootstrapフレームワークによって提供される進捗バー
<div> <div role = "progressbar" aria-valuenow = "60" aria-valuemin = "0" aria-valuemax = "100"> <span> 40%完了</span> </div> </div>
私のような本当の初心者である私をさせてください、方法を知らないでください...それが本当の進歩バーになりましょう。ただし、Baiduを数回入力した後、協力するためにjQueryコードを追加することによってのみこれを達成できます。私の学位はついに次のように実現され、少し幸せです。
<div id = "mymodal1" tabindex = "-1" role = "dialog" aria-labelledby = "mymodallabel" aria-hidden = "true" data-backdrop = "static"> <div> <span <div> <span style = "text-align:center; color:red">ファイルはアップロードしないでください。 </span> <br/> <div> <div> </div> </div> </div> </div> </div> </div> </div> </div> </div>
上記の段落は、ポップアップボックスを使用して進行状況バーを含むことです。そうでなければ、どうすれば隠れ始める何かを達成できますか? BootstrapをProgress Barまたは固定ポップアップボックスとして使用する場合、Data-BackDrop = "Static"を追加する方が優れています。この変更がなければ、マウスをクリックしてポップアップボックスが消えます。
<Scripts> var p = 101; var stop = 1; function run(){p += 4; $( "div [class = bar]")。css( "width"、p + "%"); var timer = setimeout( "run()"、500); if(p> 100 && stop <1){p = 0; }} $( '#btnsubmit')。クリック(function(){$( '#mymodal1')。モーダル( 'show'); p = 0; stop = 0; run(); $( '#upload')。submit();}); </scripts>実際、ブートストラップの進行状況バーはCSSスタイルを通じて表示されます。そのため、スタイル幅の値を変更し続ける限り、表示できます。もちろん、私のサイクルでは、更新ページは再発見されて隠すことしかできません。その場合は、投稿で送信してから、返品値に基づいて判断し、$( '#mymodal1')で非表示にします。モーダル( 'hide');対応する停止値を1に変更します。そうしないと、実行を続けます。