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

Beispiel zum Hochladen eines Docker-Images in ein privates Repository

Das Image kann problemlos direkt in das öffentlic...

So implementieren Sie mehrere Parameter in el-dropdown in ElementUI

Aufgrund der zunehmenden Anzahl von Schaltflächen...

Detaillierte Erklärung häufig verwendeter Stile in CSS3 [Grundlegende Text- und Schriftstile]

Zusammenfassung: Damit Ihre Webseite schöner auss...

Schnelle Implementierung der Schritte zur Bereitstellung von Docker-Images in Intellij IDEA

Inhaltsverzeichnis 1. Docker ermöglicht Fernzugri...

Tutorial zur HTML-Tabellenauszeichnung (10): Zell-Padding-Attribut CELLPADDING

Unter Zellenabstand versteht man den Abstand zwis...

Was macht die MySQL-Datenbank?

MySQL ist ein relationales Datenbankverwaltungssy...

Zusammenfassung der Unterschiede zwischen SQL und NoSQL

Hauptunterschiede: 1. Typ SQL-Datenbanken werden ...

Vollständige Analyse des Vue-Diff-Algorithmus

Inhaltsverzeichnis Vorwort Vue-Aktualisierungsans...

CSS realisiert den Effekt „Eckschnitt + Rahmen + Projektion + Farbverlauf im Inhaltshintergrund“

Verwenden Sie einfach CSS, um alle Effekte von Ec...

Einführung des Code-Prüftools stylelint zum Erfahrungsaustausch

Inhaltsverzeichnis Vorwort Text 1. Installieren S...

Anleitung zur Vermeidung von Docker Win Ping-Fehlern bei Containern

Über Win Docker-Desktop möchte ich mich mit der C...

Detailliertes Tutorial zum Bereitstellen einer benutzerdefinierten Apollo-Umgebung mit Docker-Compose

Inhaltsverzeichnis Was ist das Apollo Configurati...

Detailliertes Tutorial zum Erstellen einer privaten Nextcloud-Cloud-Speichernetzwerkfestplatte

Nextcloud ist ein Open Source- und kostenloses Ne...

Eine kurze Erläuterung der richtigen Vorgehensweise bei der Wiederherstellung von MySQL-Tabellenbereichen

Inhaltsverzeichnis Vorbemerkungen Reproduktion de...

Lösen Sie das Problem der Installation des Tenda U12-WLAN-Netzwerkkartentreibers auf Centos7

Lösungsprozess: Methode 1: Die Standard-Kernelver...