jQuery Step-By-Step-Wizard

Aug 9, 2008

jQuery Step-By-Step-Wizard

Categories: Featured, JavaScript and jQuery

Written By: admin

You’ll find an english summary below

Ein Step-By-Step-Wizard, zu Deutsch “Schritt für Schritt Editor” ist eine Darstellungsmittel, um Benutzer Scritt für Schritt durch einen Prozess, zum Beispiel das ausfüllen eines langen Formulares, zu leiten. Der Prozess wird dadurch für den Benutzer vereinfacht und er erhält einen Überblick darüber, in welchen Teil des Prozesses er sich zu jedem gegebenen Zeitpunkt befindet.

Besonders praktisch wird ein solcher Step-By-Step-Wizard, wenn er ohne Seitenreload funktioniert, also zum Beispiel in JavaScript implementiert ist. Das hier vorgestellte Script basiert auf dem JavaScript Framework jQuery und erstellt aus einer beliebigen Anzahl Elemente einen “Schritt für Schritt Editor”.

Diesmal agiert der ganze Blog-Eintrag als Demonstration des Scriptes. Das ist der erste Schritt des Step-By-Step-Wizards. Zum nächsten kommst du über die Navigation oben rechts.

Im Grunde funktioniert das Script, indem du definierst, welches Element zu einem solchen Wizard umgeformt werden soll. In diesem Beispiel handelt es sich um einige DIV’s mit der Klasse “stepByStepWizard”:

<div class="stepByStepWizard">Text...</div>

Natürlich können auch einfach alle Paragraphen, Tabellen, Bilder o.Ä umgeformt werden.

Wie gesagt, das Script basiert auf jQuery, ist also in JavaScript geschrieben. Jeder Benutzer ist in der Lage in seinem Browser JavaScript auszuschalten, und ca. 12% tun dies auch. Auf das Script hat das aber nur insofern Auswirkungen, als es nicht ausgeführt wird. Teste es doch einfach mal, indem du JavaScript ausschaltest!

Sämtliches Zusatz-HTML wie die Titelleiste oder die Navigation wird vom Script erstellt. Benutzer ohne JavaScript merken nicht einmal, dass normalerweise ein Wizard vor Ihnen stünde. Die einzelnen Schritte werden dann untereinander angezeigt.

Im Grunde einfach einen Wizard erstellen. Wie du diesen gestaltest bleibt allerdings dir überlassen (CSS). Im Script kannst du ein paar Kleinigkeiten definieren: Umzuwandelndes Element, Startposition, ob vorhergehende Schritte wieder ausgeblendet werden sollen, ob die aktuelle Position angezeigt werden soll, ob die Titel der Schritte angezeigt werden sollen sowie die Texte für “Schritt 1 von x” + “vorwärts” + “zurück”.

Wenn du weitere Funktionen benötigen solltest kannst du diese sicher leicht selber implementieren.

Damit das Script funktioniert benötigst du sowohl das jQuery Framework wie auch das Step-By-Step-Wizard-Script.

Zusätzliches HTML wird keines benötigt (du brauchst natürlich Elemente, die du später umformen kannst.

1. In der Datei “stepByStepWizard.js” die “User specific variables” nach eigenen Bedürfnissen anpassen.

2. JavaScript:

<script src="path/to/stepByStepWizard.js" type="text/javascript"></script>

3. CSS (nach belieben zu verändern):

/************************************************
*	Step by step wizard			*
************************************************/
.floatLeft { float: left; }
.floatRight { float: right; }
.clearBoth { clear: both; }
.showCurrentStepNmbrDIV {
	color: #000000;
	border-bottom: 3px double #999;
	font-weight: bold;
	font-size: 13px;
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 5px 0px;
	width: 90%;
	height: 14px;
	background-color: #CEE1EF;
	border-top: 1px solid #999;
}
 
.stepByStepWizard {
	padding: 10px;
	border-bottom: 1px solid #999;
	background-color: #EAF3FA;
}
 
.stepByStepWizardNavigation {
	color: #000000;
	border-bottom: 3px double #999;
	font-weight:  bold;
	font-size: 13px;
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 5px 0px;
	width: 10%;
	height: 14px;
	background-color: #CEE1EF;
	border-top: 1px solid #999;
}
 
.stepByStepWizard_goto {
	width: 20px;
}
 
.showNavigationLinksForwardDIV {
	cursor: pointer;
	float: right;
	width: 15px;
}
 
.showNavigationLinksBackDIV {
	cursor: pointer;
	float: right;
	width: 15px;
}

Du kannst das Script kostenfrei einsetzen und nach deinen Bedürfnissen verändern, solange der Copyright-Hinweis unverändert bleibt. Wenn du Änderungen am Script vornimmst, so füge bitte unter dem Copyright-Hinweis eine Zeile mit deinen Veränderungen ein und vergiss nicht auch deinen Namen zu nennen. Das Script darf verbreitet werden, solange es kostenfrei bleibt.

English summary:
The script above shows a step by step wizard written with jQuery. It’s absolute unobtrusive (try it disabling JavaScript) and fully customizable (via CSS). You can use the script on you own site. Note that the script itself actually is written in english, so editing it won’t be big deal.

If you chose to run the script on your site you need to install it. That’s done in three simple steps:
First of all you need to insert the above JavaScript file into you website:

<script src="path/to/stepByStepWizard.js" type="text/javascript"></script>

In a second step you’re going to build the markup for your wizard. You can convert anything into such a wizard, but in this example we’ll stick with some DIV’s + a given class (stepByStepWizard). If you want to construct a wizard with three steps, all you have to write is:

<div class="stepByStepWizard">Step 1</div>
<div class="stepByStepWizard">Step 2</div>
<div class="stepByStepWizard">Step 3</div>

The last thing left to do ist to define some CSS. We’ll use the CSS for the wizard above, but you can modify it to look like the rest of your site:

/************************************************
*	Step by step wizard			*
************************************************/
.floatLeft { float: left; }
.floatRight { float: right; }
.clearBoth { clear: both; }
.showCurrentStepNmbrDIV {
	color: #000000;
	border-bottom: 3px double #999;
	font-weight: bold;
	font-size: 13px;
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 5px 0px;
	width: 90%;
	height: 14px;
	background-color: #CEE1EF;
	border-top: 1px solid #999;
}
 
.stepByStepWizard {
	padding: 10px;
	border-bottom: 1px solid #999;
	background-color: #EAF3FA;
}
 
.stepByStepWizardNavigation {
	color: #000000;
	border-bottom: 3px double #999;
	font-weight:  bold;
	font-size: 13px;
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 5px 0px;
	width: 10%;
	height: 14px;
	background-color: #CEE1EF;
	border-top: 1px solid #999;
}
 
.stepByStepWizard_goto {
	width: 20px;
}
 
.showNavigationLinksForwardDIV {
	cursor: pointer;
	float: right;
	width: 15px;
}
 
.showNavigationLinksBackDIV {
	cursor: pointer;
	float: right;
	width: 15px;
}

You’re done! If you wish to change standard texts, starting step or which element should be transformed, open the script and edit the section “User specific variables”. If you encounter any problems or have a question just leave a comment.

Shinmen Says:
September 11th, 2008 at 6:08 pm

Hey mate, i made your menu a litle bit configurable, ’cause now all the general config depends on the page you put the wizard menu. Its not the big thing i did but i think is very usefull, you made a great work with your menu. Send me a email if you want to see what ive done. Take care and keep it going, you saved my life XD.