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

Details zur MySQL-Sortierfunktion

Inhaltsverzeichnis 1. Problemszenario 2. Ursachen...

Detaillierte Erläuterung der Tomcat-Kernkomponenten und der Anwendungsarchitektur

Inhaltsverzeichnis Was ist ein Webcontainer? Die ...

Lösung für den ES-Speicherüberlauf beim Starten von Docker

Fügen Sie die Datei jvm.options zur Elasticsearch...

HTML-Tabellen-Markup-Tutorial (18): Tabellenkopf

<br />Die Kopfzeile bezieht sich auf die ers...

Erkunden Sie die Eigenschaften und Ausdrücke verschiedener Räume in HTML (empfohlen)

I. Überblick Beim Schreiben von HTML-Vorlagen wer...

Beispiel für die Verwendung der setInterval-Funktion in React

Dieser Artikel basiert auf der Windows 10-Systemu...

Analyse des Prinzips von Vue nextTick

Inhaltsverzeichnis Ereignisschleife miscroTask (M...

Der Abstand zwischen mehreren Divs mit Inline-Block unterscheidet sich von der Programmiermethode

Als ich mich mit Inline-Blöcken beschäftigte, stel...

Einführung in den strikten Modus von JavaScript verwenden Sie strikt

Inhaltsverzeichnis 1. Übersicht 1.1 Was ist der s...

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

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

So ändern Sie Farben und Designs in Vim unter Linux

Vim ist ein Texteditor, den wir unter Linux sehr ...

Grafisches Tutorial zur Installation und Konfiguration von MySQL 8.0.13

In diesem Artikel finden Sie das Installations- u...

HTML-Versionsdeklaration DOCTYPE-Tag

Wenn wir den Quellcode einer normalen Website öff...

Linux-Swap-Partition (ausführliche Erklärung)

Inhaltsverzeichnis linux 1. Was ist SWAP 2. Was p...

Erklären Sie den Unterschied zwischen Iframe und Frame in HTML anhand von Beispielen

Ich weiß nicht, ob Sie das Frameset-Attribut in I...