2009-09-18 7 views
0

J'ai une forme php. Après que ce formulaire est soumis, si toutes les données sont valides, alors il exécute un script python qui prend 5-10 secondes. Pour cette période d'attente, j'aimerais afficher une barre de progression (.gif) au milieu de l'écran. Si je pouvais aussi "fondre" l'arrière-plan pour que la barre de progression soit comme une couche supérieure et l'arrière-plan comme couche arrière, ce serait génial.chargeur gif centré comme couche supérieure

Merci.

+3

et quelle est la question? vous attendez nous d'écrire le code pour vous? – RageZ

+0

@RageZ - utilisez votre imagination. Je me suis dit qu'il demandait des conseils sur la façon d'y parvenir. – nickf

+0

@nickf ouais tu as raison – RageZ

Répondre

2

Utilisez-vous des bibliothèques javascript, telles que jQuery? Dans n'importe laquelle des bibliothèques, j'imagine qu'il y aurait une douzaine de plugins lightbox flottants. Même si vous ne voulez pas utiliser une bibliothèque, vous pouvez regarder leur code, et au lieu d'afficher un DIV, affichez simplement votre gif, si vous voyez ce que je veux dire.

Il existe même des plugins spécialement conçus à cet effet, tels que le plugin BlockUI pour jQuery.


L'algorithme de base pour faire ce que vous voulez va comme ceci:

  1. Début Ajax demande
  2. affichage image sombre semi-transparent sur toute la page, avec un gif animé au milieu.
  3. Écoute de la réponse Ajax
  4. Enlever le recouvrement et le chargeur gif.

Je suppose que vous avez déjà les étapes 1 et 3 vont bien. L'étape 4 est facile-peasy. L'étape 2 n'est cependant pas aussi facile, mais ne devrait pas être trop difficile. Je ne pourrais pas vous dire le code pour le faire moi-même, puisque je viens d'utiliser des plugins lightbox dans le passé. Jetez un oeil sur Google pour "lightbox simple" ou quelque chose comme ça, car tout ce que vous voulez vraiment, c'est la fonctionnalité la plus élémentaire. Ce billet de blog parle de a CSS-only lightbox ce qui serait un bon point de départ pour vous aider à styliser la superposition.

+0

Merci pour votre réponse. Le problème est que je ne suis pas du tout familier avec Ajax ... (honte à moi). Par conséquent, je n'ai pas 1 et 3 fait. Tout ce que j'ai fait est le .gif que je voudrais utiliser. J'ai parcouru le tutoriel w3schools à travers l'Ajax, mais je n'ai pas compris la plupart. Si vous, ou quelqu'un d'autre, pourriez expliquer comment je peux utiliser Ajax pour ce cas particulier, je serais très reconnaissant. Merci. – nunos

+1

http://www.jquery.com <- sérieux. – nickf

+0

J'ai déjà examiné cela. mais merci pour votre aide de toute façon. – nunos

Questions connexes