Interagir avec les usagers ...sans utiliser des 'alerts'

Télécharger le projet
Commenter

Description

Voici un petit passe-passe javascript pour interagir avec les usagers, sur un site web ou sur une application web. On utilise bien entendu JQUERY !

Ceci nous permet d'éviter les 'alert' qui sont trop agressifs. Ainsi, on peut informer l'usager du succès, ou de l'échec d'une action qu'il a effectué. On peut aussi tout simplement lui informer qu'une action qu'il exécute est en cours de traitement.

J'ai joinds une page de test HTML très simple, juste pour montrer un exemple d'utilisation.

NOTA: - ce passe-passe peut avoir une utilité lorsqu'on exécute des scripts AJAX. Ca permet une meilleur interaction avec l'usager
- Le fichier page.html est juste une coquille servant de test

Source / Exemple : 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
	<meta name="Author" content="Marcel Tawé.">
    <link rel="stylesheet" type="text/css" href="style.css" />
    <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
    <title>TEST MESSAGEBOX</title>
	
<!--temporaire peut être inclu dans un fichier séparé-->
<script type="text/javascript">
/***************************************************


  • 	Fonctions relatives aux actions sur la page    *

                                                                                                        • /	

	/**inform_user_action_done.


    	 
  •  Fonction exécutée lorsqu'il faut afficher un message de succès, d'échec d'une

    • 	 
  •  opération, ou lorsqu'il faut simplement aviser l'usager de quelque chose.

    • 	 
  •  Cette fonction suppose que l'élement en question existe déjà mais est simplement 

    • 	 
  •  caché. si il n'existe pas, alors il ne se  passe rien, aucune erreur ne survient.

	 *


    	 
  •  @param: element_id 	(string), l'id de l'élément sur lequel on imprime le message

    • 	 
  •  @param: text_message (string), le message à afficher

    • 	 
  •  @param: time 	(int)   , la durée de l'annimation

    • 	 
  • /

	function inform_user_action_done(element_id, text_message, time){
	   //. Setter le texte de l'élément
		$("#"+element_id+"").html(""+text_message +"");
	  //. Montrer la boîte de dialogue
		$("#"+element_id+"").slideDown(time *2);
	  //. Cacher la boîte de message
		$("#"+element_id+"").fadeOut(5*time);
	} 
	
</script>
</head>
<body>
<div id="messageBox-Container"><div id="messageBox"></div></div><!--VOICI CE QUI NOUS INTÉRESSE -->
<div id="main" align="center">
	<div id="panel-left">
        <fieldset>
        </fieldset>
	</div><!-- fin du 'DIV' panel-left-->
	<div id="panel-rigth" align="center">
		<div id="page-title"> 
			<fieldset>
            	<div id="titre"><b>TEST MESSAGEBOX EXEMPLE D'UTILISATION</b></div>
			</fieldset>
		</div> 
		<div id="panel-central"> 
			<fieldset>      
				<script type="text/javascript">
					//--juste pour tests-----
						var text_message= "Information correctement sauvegardées ....<br/> je peux être appelé par un retour AJAX";
						inform_user_action_done("messageBox",text_message,1500);
				</script>
			</fieldset><!-- fin du 'FIELDSET' du 'DIV' panel-central-->
		</div><!-- fin du 'DIV' panel-central-->
	</div><!-- fin du 'DIV' panel-rigth-->
	<!--génération du footer de la page-->
    <div id="footer" align="center"><fieldset></fieldset></div>
</div><!-- fin du div main-->
</body>
</html>
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 (marcelsnews)