Heim > Web-Frontend > js-Tutorial > Implementieren Sie den Anzeigeeffekt des Fortschrittsbalkens basierend auf dem jQuery Bar Indicator-Plug-in_jquery

Implementieren Sie den Anzeigeeffekt des Fortschrittsbalkens basierend auf dem jQuery Bar Indicator-Plug-in_jquery

PHP中文网
Freigeben: 2016-05-16 15:37:33
Original
1238 Leute haben es durchsucht

Bar Indicator ist ein jQuery-basiertes Fortschrittsbalken-Datenanzeige-Plug-in, das in vielen Szenarien wie der Anzeige von Datenstatistiken, Abstimmungsstatistiken und dem Aufgabenfortschritt verwendet werden kann. Es ist einfach zu verwenden und verfügt über umfangreiche Optionen und kann basierend auf Fortschrittsbalken fast alle WEB-Designanforderungen der Benutzer erfüllen. In diesem Artikel wird die Verwendung von Bar Indicator anhand von Beispielen erläutert.


HTML

Laden Sie zuerst jQuery- und Bar Indicator-bezogene JS-Dateien und CSS-Dateien.

<link href="bi-style.css" rel="stylesheet" />
<script src="jquery.min.js"></script>
<script src="jquery-barIndicator.js"></script>
<script src="jquery.easing.1.3.js"></script>
Nach dem Login kopieren

Denken Sie daran, das Easing-Plug-in hinzuzufügen. Diese Dateien sind gepackt. Fügen Sie dann HTML zu hinzu:

<span id="bar">55lt;/span>
Nach dem Login kopieren

Wie Sie sehen können, stellt die Zahl 55 im Code den Fortschritt dar, der von diesem Fortschrittsbalken angezeigt werden soll. Der Standardwert ist 100. Natürlich ist diese Zahl Kann beim Aufruf auch im Plug-in Defined verwendet werden.

jQuery

Nachdem Sie den HTML-Code vorbereitet haben, rufen Sie den Balkenindikator auf. Nur eine Zeile Code:

<script> $(&#39;#bar&#39;).barIndicator(); </script>
Nach dem Login kopieren

Nicht wahr? Natürlich sehr einfach Um Ihre Projektanforderungen zu erfüllen, sind einige Einstellungen erforderlich, und Bar Der Indikator bietet uns eine Fülle von Optionseinstellungen und Aufrufen von Ereignismethoden, wie z. B. horizontale/vertikale Fortschrittsbalken, Fortschrittsbalkenfarben, numerische Anzeige, Erfassung und Zurücksetzung von Fortschrittswerten usw.

Optionen und Methoden

Implementieren Sie den Anzeigeeffekt des Fortschrittsbalkens basierend auf dem jQuery Bar Indicator-Plug-in_jquery

Bar Indicator ist sehr leistungsstark und es gibt viele Optionen, die hier nicht aufgeführt sind.

Das Obige ist der Inhalt der Fortschrittsbalkenanzeige effect_jquery basierend auf dem jQuery Bar Indicator-Plug-in. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website (www.php.cn)!


Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage