I just contact Bootstrap soon, feel that it is not very cool to use. Finally the reason is that I touch the front-end development less. Used to be accustomed to the Easyui, suddenly used this is not very suitable. Especially in the local refresh that aspect, after submission, do not know how to modify the large tracts of div .... These are not to be said. This is, humble people blog post, suddenly found that blogging is also a technology ... It's so hard to gather content.
The bootstrap framework provides a progress bar, such as this code in the rookie tutorial
<div class= "Progress" >
<div class= "Progress-bar" role= "ProgressBar" aria-valuenow= "
aria-valuemin= "0" aria-valuemax= "style=" width:40%; >
<span class= "sr-only" >40% complete </span>
</div>
</div>
Let me this real rookie at the beginning don't know how to .... Turn it into a real progress bar. But after a few people in Baidu after the others, as long as this is to add jquery code together to achieve drip. My degree, finally realize the following, slightly happy.
<div class= "Modal Fade" id= "MyModal1" tabindex= "-1" role= "dialog"
aria-labelledby= "Mymodallabel" aria-hidden= "True" data-backdrop= "static" style= "width:300px" >
<div class= "Modal-dialog" >
<div class= " Modal-content ">
<span style=" text-align:center;color:red "> file is uploading do not refresh the page. </span><br/>
<div class= "Progress progress-striped Active" >
<div class= "Bar" >
</div>
</div>
</div>
</div>
</div>
The above paragraph is to include a progress bar in the popup box. How else to achieve a start to hide it. When using bootstrap to do progress bar, or fixed pop-up box, plus data-backdrop= "Static" This sentence is better, because without this modification, you just click the mouse, the pop-up box disappears.
<scripts>
var p = 101;
var stop = 1;
function run () {
p + = 4;
$ ("Div[class=bar]"). CSS ("width", p + "%");
var timer = setTimeout ("Run ()", +);
if (P >100&&stop<1) {
p = 0;
}
}
$ (' #BtnSubmit '). Click (function () {
$ (' #myModal1 '). Modal (' show ');
p = 0;
stop = 0;
Run ();
$ (' #UpLoad '). Submit ();
});
</scripts>
In fact, the bootstrap progress bar is shown through CSS style, so as long as the change, style width value, it can be displayed. Of course I have this loop to reproduce the Refresh page to hide the progress bar again. If, submit with post, then judge by the return value, then use $ (' #myModal1 '). Modal (' hide '), hide it, stop the value of the corresponding drop will be changed to 1, otherwise it will be running drops.