begin process at 2012 05 28 10:44:35
  Trouver un code source :
 
dans
 
[ Dernières recherches ]
Accueil > 

Code

 > 

Trucs & Astuces

 > INTERAGIR AVEC LES USAGERS ...SANS UTILISER DES 'ALERTS'

INTERAGIR AVEC LES USAGERS ...SANS UTILISER DES 'ALERTS'


 Description

Cliquez pour voir la capture en taille normale
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

  • <!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>
<!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>


 Fichier Zip

Les Membres Club peuvent télécharger directement un fichier contenu dans le zip sans télécharger le zip en entier !

Télécharger le zip


 Historique

17 mars 2010 23:54:52 :
J'ai juste enlever les fonctions inutiles qui ne faisaient pas partie du passe-passe.

 Sources du même auteur

REGEX FOR GEOGRAPHICAL COORDINATE + VALIDATION
Source avec Zip MODIFICATION DYANAMIQUE DES PARAMÈTRES D'UNE FONCTION D'UN [...
Toutes les sources de marcelsnews

 Sources de la même categorie

Source avec Zip Source avec une capture OPTIONS PENDANT LE DÉBOGAGE par avictatum
Source avec Zip Source avec une capture TROUVER UN CONTROLE "ACTIF" DANS UN FORM par didierdeco91
Source avec Zip Source avec une capture RESISTANCES ÉQUIVALENTES par besqueut
Source avec Zip Source avec une capture JACALENDAR par raffika
Source avec Zip EXPORTER LES IMAGES DE WORD ET D' EXCEL par Le Pivert
Toutes les sources de la catégorie Trucs & Astuces

Commentaires et avis

Commentaire de willeraser le 17/03/2010 17:04:24

je scrollais, sans réellement lire, mais d'un coup........j'ai flashé sur ça :


  function offligth_element(element_id){
//.
if ($("#"+element_id+"").length){
//. changer sa couleur
$("#"+element_id+"").css({background:"#E3E8F3", backgroundColor:"#E3E8F3"});
}
else{/*on ne fait rien*/}




je savais même pas que c'était possible de pondre autant de choses horribles en si peu de lignes de code xD

Commentaire de marcelsnews le 17/03/2010 17:25:57

heuh .....qu'y a-t-il de si horrifiant ? ....peux-tu un peu éclaircir ton point de vue stp ?
Car en effet, la raison pour laquelle je publie ces bouts de codes, c'est pour aider du monde et surtout mon amélioration personnelle !

En passant, je ne suis pas si avancé que ca en programmation web !
De plus, ce bout de css(celui qui a attiré ton attention) n'a rien à voir avec ce que j'ai publier. Je l'ai juste laissé dans le css pour inspirer le monde le cas échéant.

So argumente ta critique stp ;)

Commentaire de Astalavista le 17/03/2010 19:48:15

à mon avis, ton "else" ne sert a rien, de plus, jQuery est bien fait, regarde un peut leur code source, il vérifie si l'élément existe avant d'appliquer une modification, donc une de tes fonctions put se définir par :
function offligth_element(element_id){
$("#" + element_id).css({background:"#E3E8F3", backgroundColor:"#E3E8F3"});
}

Il y a aussi ta fonction suivante qui ne sert à rien :
$(document).ready(function(){});
Qui peut même se réduire à :
$(function(){});
Et qui normalement devrais entouré toutes tes fonctions principales vu qu'elles ne peuvent être exécuté uniquement quand ton document est chargé ...
J'ai pas finit de lire tout ton code source, mais a mon avis, toi non plus :D
Je ne le note pas, je vais attendre que tu l'ai refait ...
Bonne prog

Commentaire de marcelsnews le 17/03/2010 23:48:28

Yo Altalavista.

First of all, merci pour tes spécifications. Ta critique est bien constructive pour mon édification ;)
Il est vrai que je n'utilise que les fonctions de haut niveau de JQuery, et que je n'ai, honnêtement pas, scruter réelement le code source :-(.

Il faut quand même noter que j'ai  extrait du css et des bouts de codes ci et là d'un plus gros projet sur lequel je travaille. C'est pour cette raison qu'il y a encore des coquilles telles le fameux "$(document).ready(function(){})"; auquel, normalement dans mon projet, je fais des binding de certains "element_id" avec mes fonctions (telles "function offligth_element()").

Merci encore pour tes critiques, notemment celui du 'else', je me disais que ca n'a pas vraiment d'incidence sur les performences :-( est ce le cas ?

Je vais donc nettoyer le code et laisser uniquement ce qui a rapport avec le passe-passe en question.

Thanks ;)

 Ajouter un commentaire

Nos sponsors


Sondage...

Comparez les prix


Apple iPhone 4 Noir (32 Go)
Entre 1290€ et 1333€

Visiter le guide achat

CalendriCode

Mai 2012
LMMJVSD
 123456
78910111213
14151617181920
21222324252627
28293031   

Consulter la suite du CalendriCode

A découvrir
 
Développement réalisé par Nicolas SOREL (Nix) avec l'aide de : Cyril DURAND et Emmanuel (EBArtSoft), Merci à Vincent pour ses précieux conseils.
CodeS-SourceS.com© Toute reproduction même partielle est interdite sauf accord écrit du Webmaster
CodeS-SourceS.com© est une marque déposée tous droits réservés

Google Coop CodeS-SourceS Google Coop CodeS-SourceS
Temps d'éxécution de la page : 0,468 sec (4)

Nous contacter | Annoncer sur CodeS-SourceS | Mentions légales
Outils Convertisseur VB/C# Snippets et scripts Outils en ligne La ToolBox
Communauté Programmation Photographie Technologie Newsgroups Emploi Forum Blogs
Guide d'achat Téléphonie mobile Image et son Informatique Bureautique Jeux vidéo
Logiciels Internet & Réseau Développement Market Android Jeux & Loisirs Graphisme Multimédia Sécurité Pilotes
Loisirs Cartes virtuelles Vidéos droles Jeux en ligne Géoguide AndroLib (Android Market)