Barre de progression

Soyez le premier à donner votre avis sur cette source.

Vue 29 801 fois - Téléchargée 3 429 fois

Description

Implémentation d'une barre de progression entièrement personnalisable dynamiquement, à insérer dans vos pages html.
Ce programme utiliser la librairie LayerAccess (ecrite par une personne qui a eu la mauvaise idée de ne pas signer son oeuvre) qui devrait être cross-browser.
L'exemple a été testé sur IE et NS.

Source / Exemple :


var progressBarValue;
var progressBarWidth;
var progressBarFG = '#9999FF';
var progressBarBG = '#FFFFFF';
var progressBarBorderColor = '#000000';
var progressBarBorderWidth = 1;

function initProgressBar(width)
{
	setProgressBar(0);
	progressBarWidth = width;
	document.write('<div id="progressBar">here will be the progress bar</div>');
	dispProgressBar();
	return true;
}

function dispProgressBar()
{
	var html = '';
	var td1 = '';
	var td2 = '';
	var val = getProgressBar();
	if (val == 0) {
		td1 = '';
		td2 = '<td width="100%" align="center">0 %</td>';
	}
	else if (val == 100) {
		td1 = '<td width="100%" bgColor="' + progressBarFG + '" align="center">100&nbsp;%</td>';
		td2 = '';
	}
	else if (val > 50) {
		td1 = '<td width="' + val + '%" bgColor="' + progressBarFG + '" align="center">' + val + '&nbsp;%</td>';
		td2 = '<td width="' + (100-val) + '%">&nbsp;</td>';
	}
	else {
		td1 = '<td width="' + val + '%" bgColor="' + progressBarFG + '">&nbsp;</td>';
		td2 = '<td width="' + (100-val) + '%" align="center">' + val + '&nbsp;%</td>';
	}
	html = '<table border="' + progressBarBorderWidth + '" ';
	html += 'width="' + progressBarWidth + '" ';
	html += 'borderColor="' + progressBarBorderColor + '" ';
	html += 'bgColor="' + progressBarBG + '" ';
	html += 'cellpadding="5" cellspacing="0">';
	html += '<tr>' + td1 + td2 + '</tr></table>';
	writeToLayer('progressBar', html);
}

function setProgressBar(value)
{
	if (value < 0) {
		progressBarValue = 0;
	}
	else if (value > 100) {
		progressBarValue = 100;
	}
	else {
		progressBarValue = value;
	}
	return true;
}

function getProgressBar()
{
	return progressBarValue;
}

Conclusion :


Pour voir un exemple de fonctionnement:
http://naholyr.free.fr/html/progressbar.html

notez que c'est à cette adresse que les éventuelles nouvelles versions seront publiées.

Codes Sources

A voir également

Ajouter un commentaire

Commentaire

ronanry
Messages postés
191
Date d'inscription
lundi 25 novembre 2002
Statut
Membre
Dernière intervention
22 décembre 2009
-
sous mozilla 1.3 ca marche aussi.....
(ca clippe un peu mais ca marche)

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.