Implementierung eines Plug-ins zur Anzeige des Webseitenfortschritts basierend auf jQuery_jquery

Ich glaube, jeder hat ähnliche Website-Funktionen gesehen, die für Benutzer sehr bequem zu verstehen und zu bedienen sind

Das Folgende ist ein Test-Screenshot des Plug-Ins, das zwei Skins bereitstellt

In js geschrieben, können Fortschrittsbalken flexibel generiert werden, um die grafische Darstellung einiger Arbeitsfortschritte zu erleichtern

1. Einfacher Anruf

//Daten für alle Schritte

var stepListJson=[{StepNum:1,StepText:"Erster Schritt"},
{StepNum:2,StepText:"Zweiter Schritt"},
{StepNum:3,StepText:"Der dritte Schritt"},
{StepNum:4,StepText:"Schritt 4"},
{StepNum:5,StepText:"Schritt 5"},
{StepNum:6,StepText:"Schritt 6"},
{StepNum:7,StepText:"Schritt 7"}];

//Welcher Schritt wird gerade ausgeführt

var currentStep=5;
//Neue Werkzeugklasse
var StepTool = new Step_Tool_dc("test","mycall");
//Verwenden Sie Tools, um grafische Darstellungen relevanter Prozessschritte auf der Seite zu zeichnen
StepTool.drawStep(currentStep,stepListJson); //Rückruffunktion
Funktion mycall(restult){
// alarm(“mycall“ result.value“:“ result.text);
StepTool.drawStep(result.value,stepListJson);
//TODO...Hier können Sie den Code eingeben, um nach dem Klickschritt
die entsprechenden Daten zu laden }

2. Benutzerdefinierte Skin-Modifikation

Das Plug-in bietet zwei Sätze von Dermatologie-Optionen. Wenn es Ihre Anforderungen nicht erfüllen kann, können Sie den CSS-Code selbst schreiben

HTML-Code

Code kopieren Der Code lautet wie folgt:

Aktueller Schritt:StepRegenerieren