Bootstrap, dari Twitter, adalah kerangka kerja front-end paling populer saat ini. Bootstrap didasarkan pada HTML, CSS, dan JavaScript. Ini sederhana dan fleksibel, membuat pengembangan web lebih cepat.
Bilah kemajuan yang disediakan oleh kerangka bootstrap, seperti kode dalam tutorial novis
<dv> <div role = "progressBar" aria-valuenow = "60" aria-valuemin = "0" aria-valuemax = "100"> <span> 40% Lengkap </span> </div> </div>
Biarkan saya, seorang novis sejati seperti saya, tidak tahu bagaimana ... biarkan itu menjadi bilah kemajuan yang nyata. Namun, setelah memasuki Baidu untuk beberapa kali, Anda hanya dapat mencapai ini dengan menambahkan kode jQuery untuk bekerja sama. Gelar saya akhirnya terwujud sebagai berikut, sedikit bahagia.
<div id="myModal1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" data-backdrop="static"> <div> <div> <span style="text-align:center;color:red">The file is being uploaded, please do not refresh the page! </span> <bR /> <div> <div> </div> </div> </div> </div> </div> </div> </div> </div> </div>
Paragraf di atas adalah menggunakan kotak pop-up untuk berisi bilah kemajuan. Kalau tidak, bagaimana saya bisa mencapai sesuatu yang mulai bersembunyi? Saat menggunakan Bootstrap sebagai bilah kemajuan atau kotak pop-up tetap, menambahkan data-backdrop = "statis" lebih baik, karena tanpa modifikasi ini, Anda cukup mengklik mouse dan kotak pop-up akan hilang.
<Scripts> var p = 101; var stop = 1; fungsi run () {p += 4; $ ("Div [class = bar]"). css ("lebar", p + "%"); var timer = setTimeout ("run ()", 500); if (p> 100 && stop <1) {p = 0; }} $ ('#Btnsubmit'). Klik (function () {$ ('#myModal1'). Modal ('show'); p = 0; stop = 0; run (); $ ('#unggah'). Kirim ();}); </scripts>Bahkan, bilah kemajuan bootstrap ditampilkan melalui gaya CSS, jadi selama Anda terus memodifikasi nilai lebar gaya, Anda dapat menampilkannya. Tentu saja, dalam siklus saya, halaman penyegaran hanya dapat ditemukan kembali dan disembunyikan. Jika demikian, kirimkan dengan posting, lalu menilai berdasarkan nilai pengembalian, dan kemudian sembunyikan dengan $ ('#myModal1'). Modal ('hide'); dan ubah nilai berhenti menjadi 1, jika tidak, ia akan terus berjalan.