Bootstrap von Twitter ist derzeit das beliebteste Front-End-Frontwork. Bootstrap basiert auf HTML, CSS und JavaScript. Es ist einfach und flexibel und macht die Webentwicklung schneller.
Die durch das Bootstrap -Framework bereitgestellte Fortschrittsleiste wie der Code im Novices Tutorial
<div> <div rollen = "progressBar" aria-valuenow = "60" aria-valuemin = "0" aria-valuemax = "100"> <span> 40% vollständig </span> </div> </div>
Lassen Sie mich, ein echter Anfänger wie ich, nicht wissen, wie ich ... zu einer echten Fortschrittsballe werden soll. Nachdem Sie jedoch einige Male Baidu betreten haben, können Sie dies nur erreichen, indem Sie JQuery Code zum Zusammenarbeiten hinzufügen. Mein Abschluss wird endlich wie folgt realisiert, ein wenig glücklich.
<div id = "myModal1" tabindex = "-1" rollen = "dialog" aria-labelledBy = "myModallabel" aria-hidden = "true" data-backdrop = "static"> <div> <div> <span style = "text-align: color: rot: rot"> Die Datei wird nicht aktualisiert. </span> <br/> <div> </div> </div> </div> </div> </div> </div> </div> </div> </div>
Der obige Absatz soll die Popup-Box verwenden, um die Fortschrittsleiste zu enthalten. Wie kann ich ansonsten etwas erreichen, das sich zu verstecken beginnt? Wenn Sie Bootstrap als Fortschrittsleiste oder ein festes Popup-Box verwenden, ist das Hinzufügen von Data-backdrop = "static" besser, da Sie ohne diese Änderung einfach auf die Maus klicken und das Popup-Box verschwindet.
<Scripts> var p = 101; var stop = 1; Funktion run () {p += 4; $ ("div [class = bar]"). CSS ("Breite", p + "%"); var timer = setTimeout ("run ()", 500); if (p> 100 && stop <1) {p = 0; }} $ ('#Btnsubmit'). Click (function () {$ ('#myModal1'). Modal ('show'); p = 0; stop = 0; run (); </scripts>Tatsächlich wird die Fortschrittsleiste von Bootstrap im CSS -Stil angezeigt. Solange Sie den Wert der Stilbreite immer wieder ändern, können Sie ihn anzeigen. Natürlich kann in meinem Zyklus die Aktualisierungsseite nur wiederentdeckt und versteckt werden. Wenn ja, senden Sie es mit Post, beurteilen Sie es anhand des Rückgabewerts und verstecken Sie es dann mit $ ('#MyModal1'). Modal ('Hide'); und ändern Sie den entsprechenden Wert des Stopps auf 1, sonst läuft er weiter.