Barre de progression

Télécharger le projet
Commenter

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.
Télécharger le projet

Codes Sources

A voir également

S'inscrire maintenant

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.

Du même auteur (naholyr)