Vorbereitung

Voraussetzung ist das die Libraries Prototype und script.aculo.us sowie die Datei rct_progress.js richtig eingebunden sind.

<head>
<script type="text/javascript" src="/js/prototype.js"></script>
<script type="text/javascript" src="/js/scriptaculous.js"></script>
<script type="text/javascript" src="/js/rct_progress.js"></script>
</head>
 

Grundlegende Syntax

Grundsätzlich sollte ein Objekt der Klasse ProgressBar erzeugt werden und auf diesem dann die Methode start() aufgerufen werden.

<script type="text/javascript" charset="utf-8">
	var bar = new ProgressBar('id_of_progress_bar', 'id_of_container', options);
	bar.start();
</script>
 
<div style="margin-top: 20px; height: 20px" id="demo-wrapper">
	<div style="" id="id_of_container">
		<img src="/img/progress.png" id="id_of_progress_bar" height="12" width="0"><br>
	</div>
</div>

Die Parameter im Überblick:
id_of_progress_bar
Bezeichnet das Element das die eigentliche Progress Bar enthält. Das kann entweder eine Grafik oder ein Div-Element mit entsprechener Hintergrundfarbe sein.

id_of_container
Das Div-Element das die Progress umschliesst. Sinnvoll wenn die Progress Bar zunächst nicht sichtbar sein soll. Wird eingeblendet sobald die Progress Bar start. Kann auch null sein, falls nicht benötigt.

options
Die Optionen werden als Object übergeben. Beispiel:

var bar = new ProgressBar('bar', null, {length: 200, height: 22, width: 0});
Folgende Parameter stehen zur Verfügung.
  • offset Breite der Progress Bar beim Start
  • length Gesamtlänge
  • width Breite der Progress Bar. Nur sinnvoll wenn die Progress Bar sich vertical bewegt
  • height Höhe der Progress Bar. Nur sinnvoll wenn die Progress Bar sich horizontal bewegt
  • duration Dauer in Sekunden, bis die Progress Ihre volle Länge erreicht hat
  • direction horizontal | vertical
    Die Richtung in der sich die Progress Bar bewegt
  • loadingMessage default: 'loading-message'
    ID des Elements dass bei laufendem Ajax Request angezeigt wird
  • successMessage default: 'success-message'
    ID des Elements dass nach einem erfolgreichem Ajax Request angezeigt wird
  • failureMessage default: failure-message
    ID des Elements dass im Falle eines gescheiterten Ajax Requests angezeigt wird
  • successMessageDuration default: 3 Sekunden
    Solange wird nach einem Ajax Request die Erfolgsmeldung angezeigt
  • failureMessageDuration default: 5 Sekunden
    Solange wird nach einem Ajax Request die Fehlermeldung angezeigt, falls erforderlich

Verwendung in Ajax Requests

Beim Einsatz in Ajax Request ist es notwendig auf die verschiedenen Ereignisse zu reagieren.
Dazu stehen die Methoden success und failure zur Verfügung.
Ein Beispiel:

<script type="text/javascript" charset="utf-8">
var bar = new RctProgress('progress', 'loading-message', {length: 150, height: 2, width: 0} );
bar.start();
 
var url = '/path/to/ajax';
 
new Ajax.Request(url, {
	method: 'get',
  	onSuccess: function(transport) {
		// Aufruf der Method success() bei erfolgreichem Ajax Request	
		bar.success();
  	},
	onFailure: function(transport){
		// Aufruf der Method failure() bei gescheitertem Ajax Request		
		bar.failure();
	}
 
});	
 
</script>
 
<div id="loading-message" class="loading-message" style="display: none; margin-top: 3px">
	<div class="message-label">Lade...</div>
	<img src="/img/progress.png" id="progress" ><br />
</div>
 
<div id="success-message" class="success-message" style="display: none">
	<div class="message-label">
	Aktion erfolgreich	</div>
 
</div>	
 
<div id="failure-message" class="failure-message" style="display: none">
	<div class="message-label">
	Aktion erfolgreich	</div>
</div>