Implementierungscode des JQuery-Schrittfortschrittsachsen-Plug-Ins

Implementierungscode des JQuery-Schrittfortschrittsachsen-Plug-Ins

Jeden Tag ein jQuery-Plugin - Schritt-Fortschrittsachse Schritt-Fortschrittsachse

Viele Tool-Websites haben diese Struktur in den Einführungstutorials oder bei der Kontoregistrierung, also habe ich eine erstellt, um es auszuprobieren. Ich denke, die Callback-Aktion kann auch verwendet werden.

Die Wirkung ist wie folgt

Bildbeschreibung hier einfügen

Codeabschnitt

*{
	Rand: 0;
	Polsterung: 0;
}
#div{
	Breite: 90%;
	Höhe: 50px;
	Rand: 10px automatisch;
	Anzeige: Flex;
	Inhalt ausrichten: zentriert;
	Elemente ausrichten: zentrieren;
}
#Kasten{
	Breite: 90%;
	Höhe: 100px;
	Rand: 1px durchgehend hellgrau;
	Rand: 10px automatisch;
	Anzeige: Flex;
	Inhalt ausrichten: zentriert;
	Elemente ausrichten: zentrieren;
	Position: relativ;
}
.Kasten{
	Position: absolut;
	Breite: 100 %;
	Höhe: 100%;
	oben: 0;
	links: 0;
	Anzeige: Flex;
	Inhalt ausrichten: zentriert;
	Elemente ausrichten: zentrieren;
	Hintergrundfarbe: schwarz;
	Farbe: weiß;
}
.tbar{
	Breite: 90%;
	Höhe: 6px;
	Rahmenradius: 5px;
	Hintergrundfarbe: hellgrau;
	Anzeige: Flex;
	Elemente ausrichten: zentrieren;
	Position: absolut;
}
.Bar{
	Breite: 100 %;
	Höhe: 50%;
	Rahmenradius: 5px;
	Hintergrundfarbe: #1abc9c;
	Übergang: alle 0,2 s linear;
}
.Punkt{
	Position: absolut;
	Breite: 12px;
	Höhe: 12px;
	Randradius: 50 %;
	Hintergrundfarbe: hellgrau;
	Cursor: Zeiger;
	Anzeige: Flex;
	Inhalt ausrichten: zentriert;
	Elemente ausrichten: zentrieren;
}
.dot:hover{
	Übergang: alle 0,5 s linear;
	Hintergrundfarbe: #1abc9c;
}
.Punkt.check{
	Hintergrundfarbe: #1abc9c;
}
.dot .txt{
	oben: 100 %;
	Schriftgröße: 12px;
	Position: absolut;
	Breite: 100px;
	Textausrichtung: zentriert;
}
<!DOCTYPE html>
<html>
	<Kopf>
		<meta charset="utf-8">
		<title>Schrittfortschrittsachse</title>
		<script src="js/jquery-3.4.1.min.js"></script>
		<script src="js/bzjdz.js"></script>
		<link href="css/bzjdz.css" rel="externes Nofollow" rel="stylesheet" type="text/css" />
	</Kopf>
	<Text>
		<div id="div">
			
		</div>
		<div id="box">
			<div class="box" id="box1" style="background-color: #1abc9c;">Schritt 1</div>
			<div class="box" id="box2" style="background-color: #3498db;">Schritt 2</div>
			<div class="box" id="box3" style="background-color: #f1c40f;">Schritt 3</div>
			<div class="box" id="box4" style="background-color: #e74c3c;">Schritt 4</div>
			<div class="box" id="box5" style="background-color: #9b59b6;">Schritt 5</div>
		</div>
	</body>
</html>
<Skript>
	$(Funktion(){
		$("#div").Zeitleiste({
			Daten:[
				{name:'Schritt 1',id:'#box1',click:hide},
				{name:'Schritt 2',id:'#box2',click:hide},
				{name:'Schritt 3',id:'#box3',click:hide},
				{name:'Schritt 4',id:'#box4',click:hide},
				{name:'Schritt 5',id:'#box4',click:hide},
			]
		})
	})
	Funktion ausblenden(Element){
		$(".box").ausblenden();
		$(item.id).anzeigen();
	}
</Skript>
$.prototype.timeline = Funktion(op){
	Konsole.log(op.data);
	var $das = $(dies);
	var $tbar =$("<div class='tbar'></div>");
	var $bar =$("<div class='bar'></div>");
	$bar.appendTo($tbar)
	$tbar.appendTo($das);
	var length = op.data.length; //Elementlänge var index = 0; //aktueller Schritt op.data.forEach((item,index)=>{
		var per = getper(index,länge)
		var $dot = $("<div class='dot' data-index='"+index+"'><div class='txt'>"+item.name+"</div></div>");
		$dot.appendTo($tbar);
		$dot.css('links',"calc("+pro+"% - 6px)")
	})
	//Klick-Ereignis $that.find('.dot').click(function(){
		index = parseInt($(this).attr('Datenindex'));
		//Führen Sie die entsprechende Methode aus click();
	})
	klicken();
	Funktion Klick(){
		//Rückruf var item = op.data[index];
		Element.Klick(Element);
		//Animationsstil var per = getper(index,length)
		$bar.css('Breite',pro+'%')
		//Schaltfläche ausgewählt Steuerelement op.data.forEach((item,i)=>{
			wenn(i<=index){
				$tbar.find(".dot[data-index='"+i+"']").addClass('prüfen');
			}anders{
				$tbar.find(".dot[data-index='"+i+"']").removeClass('prüfen');
			}
		})
	}
	Funktion getper(i,l){
		vartemp = 0;
		wenn(i!=0&&i!=l-1){
			temp = i/(l-1)*100//Berechnen Sie die ungefähre Entfernung }else if(i==l-1){
			Temperatur = 100
		}
		Rücklauftemperatur;
	}
}

Erklärung der Ideen

Was Sie tun müssen, ist ganz einfach. Zeichnen Sie eine Zeitleiste, markieren Sie die entsprechenden Punkte und rufen Sie dann den Rückruf korrekt auf, wenn das entsprechende Ereignis ausgelöst wird. Die Zeitleiste wird einfach so gezeichnet. Sobald der Prozentsatz ausgefüllt ist, gibt es nichts weiter. Trennen Sie dann die Punkte, die den Fortschritt ändern, von den Campus-Punkten. Wenn auf die kleinen Punkte geklickt wird, wird die aktuelle Strukturmarkierung geändert und dann wird ein Ereignis ausgelöst, um den Animationseffekt und den Rückruf gemeinsam auszuführen.
Fertig, Rest

Oben finden Sie den detaillierten Inhalt des Implementierungscodes des Plug-Ins für die jQuery-Schrittfortschrittsachse. Weitere Informationen zur jQuery-Schrittfortschrittsachse finden Sie in den anderen verwandten Artikeln auf 123WORDPRESS.COM!

Das könnte Sie auch interessieren:
  • Basierend auf der gemeinsamen Nutzung des Quellcodes des JQuery-Schrittfortschrittsbalkens
  • jQuery+ajax zum Hochladen von Bildern und Anzeigen der Upload-Fortschrittsfunktion [mit PHP-Hintergrundempfang]
  • Beispiel für den manuellen Drag-Control-Fortschrittsbalkeneffekt von jQuery [Test verfügbar]
  • Einfache Verwendung des jQuery NProgress.js-Ladefortschritt-Plugins
  • jquery-file-upload Dateiupload mit Fortschrittsbalkeneffekt
  • jQuery implementiert Beispielcode für verschiebbaren Fortschrittsbalken
  • Implementierung eines Fortschrittsbalkens zum Laden von jQuery-Webseiten

<<:  Tutorial zur Installation der Dekomprimierungsversion von MySQL 8.0.12

>>:  Ausführliches Installationstutorial für MySQL 8.0.12 winx64

Artikel empfehlen

Praktische Erklärung zum Bearbeiten, Speichern und Beenden von Dateien unter Linux

Wie kann ich nach dem Bearbeiten einer Datei in L...

Detaillierte Erläuterung der Galera-Cluster-Bereitstellung im Clustermodus von MySQL

Inhaltsverzeichnis 1: Einführung in Galera-Cluste...

Detaillierte Erklärung, wie Sie mit CSS einige Pixel Leerraum unter einem Bild freigeben können

Kürzlich stellte mir ein Freund eine Frage: Beim ...

50 superpraktische Tools für Webdesigner

Webdesigner zu sein ist nicht einfach. Sie müssen...

CocosCreator klassisches Einstiegsprojekt flappybird

Inhaltsverzeichnis Entwicklungsumgebung Game-Engi...

Lösen Sie das Problem, dass beim Ausführen von Docker zwei Ports gestartet werden, die unterschiedliche Ports belegen

Problembeschreibung: Nach der Ausführung von dock...

Docker-Dateispeicherpfad, Port-Mapping-Betriebsmodus ändern

So erhalten Sie den Container-Startbefehl Der Con...

MySQL 5.7.29 + Win64-Dekomprimierungsversion Installations-Tutorial mit Bildern und Text

Laden Sie die offizielle Website herunter Wählen ...

my.cnf-Parameterkonfiguration zur Optimierung der InnoDB-Engine-Leistung

Ich habe im Internet unzählige my.cnf-Konfigurati...

Beheben Sie das Problem, dass einige Konfigurationsdateien in /etc nach dem Neustart des Docker-Containers zurückgesetzt werden

1. Die drei Dateien /etc/hosts, /etc/resolv.conf ...

Vue realisiert die Funktion zum Hochladen von Fotos auf den PC

In diesem Artikelbeispiel wird der spezifische Co...

So erstellen Sie einen Nginx-Server mit Docker

Betriebsumgebung: MAC Docker-Version: Docker vers...

Das Problem der Verwendung von Slots durch Vue+tsx wird nicht behoben

Inhaltsverzeichnis Vorwort Finden Sie das Problem...

Beispielcode zum Ändern des Stils anderer Tags durch Bewegen der Maus mithilfe von CSS

Vorwort: Soweit ich weiß, kann CSS derzeit nur de...

Ausführliche Erläuterung der gespeicherten MySQL-Prozeduren (in, out, inout)

1. Einleitung Es wird seit Version 5.0 unterstütz...