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

Tipps zum Erstellen zweidimensionaler Arrays in JavaScript

Erstellen eines zweidimensionalen Arrays in Js: Z...

Detaillierte Erklärung des Unterschieds zwischen Oracle10-Partitionen und MySQL-Partitionen

Die häufig verwendeten Oracle10g-Partitionen sind...

Detaillierte Erläuterung der Lösung für npm ls-Fehler, die durch das fsevents-Modul unter Linux verursacht werden

Es gibt ein auf dem Mac entwickeltes Projekt, das...

Installation, Aktivierung und Konfiguration von ModSecurity unter Apache

ModSecurity ist ein leistungsstarkes Paketfiltert...

So vermeiden Sie die Duplizierung von Daten beim Einfügen in einen MySql-Batch

Inhaltsverzeichnis Vorwort 1. Einfügen von ignore...

Beispiel für die Integration von Kafka mit Nginx

Hintergrund nginx-kafka-module ist ein Plug-In fü...

Docker Compose-Installationsmethoden in verschiedenen Umgebungen

1. Online-Installation Derzeit habe ich nur die O...

js Canvas realisiert Slider-Verifizierung

In diesem Artikelbeispiel wird der spezifische Co...

Beheben Sie den Fehler beim Starten von MongoDB: Fehler beim Laden gemeinsam genutzter Bibliotheken: libstdc++.so.6: Gemeinsam genutzte Objektdatei kann nicht geöffnet werden:

Beim Starten von MongoDB lautet die Eingabeauffor...

Installieren Sie Windows Server 2019 auf VMware Workstation (Grafisches Tutorial)

Wenn Sie aufgefordert werden, einen Schlüssel ein...

Einführung in Netzwerktreiber für Linux-Geräte

Kabelgebundenes Netzwerk: Ethernet Drahtloses Net...

Grafisches Tutorial zum Konfigurieren eines Protokollservers unter Linux

Vorwort Dieser Artikel stellt hauptsächlich die r...

So konfigurieren Sie die Datei My.ini bei der Installation der MySQL5.6.17-Datenbank

Ich habe kürzlich bei der Entwicklung eines Proje...

Beispielanalyse von Linux-Dateiverwaltungsbefehlen [Berechtigungen, Erstellen, Löschen, Kopieren, Verschieben, Suchen usw.]

Dieser Artikel beschreibt die Linux-Dateiverwaltu...

Detaillierte Verwendung des JS-Arrays für jede Instanz

1. forEach() ist ähnlich wie map(). Es wendet ebe...