Das beste jQuery UI Beispiel - Fortschrittsbalken (Progressbar)-Tutorial im Jahr 2024. In diesem Tutorial können Sie Die Standardfunktion,Eigene Label,Unbestimmte Wert, lernen
Zeigen Sie einen bestimmten Prozess oder Zustand der Unsicherheit.
Weitere Details über progressbar Mitglied, die API - Dokumentation Fortschrittsbalken Element (Progressbar das Widget) .
Die Standardeinstellung ist Fortschrittsbalken bestimmt.
<! DOCTYPE html> <Html lang = "de"> <Head> <Meta charset = "UTF-8"> <Titel> jQuery UI Fortschrittsbalken (Progressbar) - Die Standardfunktion </ title> <Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css"> <Script src = "// code.jquery.com/jquery-1.9.1.js"> </ script> <Script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script> <Link rel = "stylesheet" href = "http://jqueryui.com/resources/demos/style.css"> <Script> $ (Function () { $ ( "#progressbar") .progressbar ({ Wert: 37 }); }); </ Script> </ Head> <Body> <Div id = "progressbar"> </ div> </ Body> </ Html>
Benutzerdefinierte Update-Label.
<! DOCTYPE html> <Html lang = "de"> <Head> <Meta charset = "UTF-8"> <Titel> jQuery UI Fortschrittsbalken (Progressbar) - Individuelle Tab </ title> <Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css"> <Script src = "// code.jquery.com/jquery-1.9.1.js"> </ script> <Script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script> <Link rel = "stylesheet" href = "http://jqueryui.com/resources/demos/style.css"> <Style> .ui-progressbar { position: relative; } .progress-label { position: absolute; links: 50%; top: 4px; font-weight: bold; text-shadow: 1px 1px 0 #fff; } </ Style> <Script> $ (Function () { var progressbar = $ ( "#progressbar"), progressLabel = $ ( ".progress-label"); progressbar.progressbar ({ Wert: false, ändern: function () { progressLabel.text (progressbar.progressbar ( "value") + "%"); }, Ergänzen: function () { progressLabel.text ( "complete!"); } }); Funktion Fortschritt () { var val = progressbar.progressbar ( "value") || 0; progressbar.progressbar ( "value", val + 1); if (val <99) { setTimeout (Fortschritt, 100); } } setTimeout (Fortschritt, 3000); }); </ Script> </ Head> <Body> <Div id = "progressbar"> <div class = "Fortschritt-label"> Loading de. </ div> </ div> </ Body> </ Html>
Unbestimmte Fortschrittsbalken und kann zwischen bestimmten und unsicheren Stil wechseln.
<! DOCTYPE html> <Html lang = "de"> <Head> <Meta charset = "UTF-8"> <Titel> jQuery UI Fortschrittsbalken (Progressbar) - unbestimmten Wert </ title> <Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css"> <Script src = "// code.jquery.com/jquery-1.9.1.js"> </ script> <Script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script> <Link rel = "stylesheet" href = "http://jqueryui.com/resources/demos/style.css"> <Script> $ (Function () { $ ( "#progressbar") .progressbar ({ Wert: false }); $ ( "Button") .auf ( "Klick", Funktion (event) { var target = $ (event.target), progressbar = $ ( "#progressbar"), progressbarValue = progressbar.find ( ".ui-progressbar-Wert"); if (target.is ( "#numButton")) { progressbar.progressbar ( "Option", { Wert: Math.floor (Math.random () * 100) }); } Else if (target.is ( "#colorButton")) { progressbarValue.css ({ "Hintergrund": '#' + Math.floor (Math.random () * 16777215) .toString (16) }); } Else if (target.is ( "#falseButton")) { progressbar.progressbar ( "Option", "Wert", false); } }); }); </ Script> <Style> #progressbar .ui-progressbar-Wert { background-color: #ccc; } </ Style> </ Head> <Body> <Div id = "progressbar"> </ div> <Button id = "numButton"> Zufallswert - OK </ button> <Button id = "falseButton"> Sicher </ button> <Button id = "Colorbutton"> zufällige Farben </ button> </ Body> </ Html>