[DOM] Script Mini Calendrier [Fait]

**dark_vidor** · 09/02/2009, 19h08

Bonjour,

J'utilise ce script pour un mini calendrier : http://www.team-gt5net.com/~championnat/inc/calendar.js

Je l'utilise ici : http://www.team-gt5net.com/~championnat/epreuve.php Après avoir cliquer sur Editer

Le calendrier est appelé via les champs comme ceci :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<input onClick="javascript:show_calendar(this);" name="date_debut" value="<?php echo date('Y-m-d', strtotime($event['date_debut'])) ?>" readonly="readonly" style="cursor: text" />

Je voudrais rajouter le fait que si on clique ailleurs que sur le calendrier celui ci se masque

Comment faire ?

Merci

**StAfX** · 10/02/2009, 17h47

ce qu'il faut c'est que ton calendrier disparaisse dès que ta souris n'est plus dessus, donc en mettant un onmouseover sur l'élément d'à côté, (donc sur chaque tableau) du genre:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
<table onmouseover="cache_calendar();"
border=0 cellpadding=0 cellspacing=0 style="background-color: #DDDDDD; margin: 10px 0; padding: 20px; border: 1px solid #000000;">

ceci devrait te satisfaire, si tu as besoin d'aide pour faire ta fonction cache_calendar() donne nous ta fonction show_calendar() et on pourra peut-être t'aider

Stef

PS: ton code n'est pas très propre, il faudrait séparer le style (css) du contenu (html), mais au moins saute des lignes!!!

**Bovino** · 10/02/2009, 17h50

A la rigueur, celui-ci le fait

**franculo_caoulene** · 10/02/2009, 18h08

Salut,

Je me suis justement fait ce genre d'évènement cette après-midi :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
<!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" lang="fr">
<head>
   <title>faire disparaître un élément en cliquant ailleurs</title>
   <meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
   <style type="text/css">
      .div {width:200px;height:200px;background:#ccc;}
   </style>
</head>
<body>
   <div class="div"></div>
   <script type="text/javascript">
   var Utils = {
   DOM: {
      getElementsByClassName: function(classe, noeud, balise) {
         var elements = [];
         if (document.getElementsByClassName) elements = document.getElementsByClassName(classe);
         else {
            if (noeud === undefined || noeud === null) { noeud = document; }
            if (balise === undefined || balise === null) { balise = "*"; }
            var elementsAParcourir = noeud.getElementsByTagName(balise);
            var pattern = new RegExp("(^|\\s)" + classe + "(\\s|$)");
            for (var i = 0, imax = elementsAParcourir.length; i < imax; i++) {
               if (pattern.test(elementsAParcourir[i].className)) elements.push(elementsAParcourir[i]);
            }
         }
         return elements;
      }
   },
   Evenement: {
      ajouter: function(elm, evt, fn) {
         if (document.addEventListener) {
           if (elm.nodeType===1 || elm.nodeType===9) {
               elm.addEventListener(evt, function(e) {
                  if (!fn(e)) e.preventDefault();
               }, false);
            } else {
               for (var i = 0, imax = elm.length; i < imax; i++) {
                  elm[i].addEventListener(evt, function(e) {
                     if (!fn(e)) e.preventDefault();
                  }, false);
               }
            }
         } else if (document.attachEvent) {
            if (elm.nodeType===1 || elm.nodeType===9) {
               var r = elm.attachEvent("on" + evt, fn);
               return r;
            } else {
               for (var i = 0, imax = elm.length; i < imax; i++) {
                  var r = elm[i].attachEvent("on" + evt, fn);
                  return r;
               }
            }
         }
      }
   }
   };
   Utils.Evenement.ajouter(document, "click", function(e) {
      var elm = e.target || event.srcElement;
      if (elm.className.indexOf("div")==-1) {
         var elms = Utils.DOM.getElementsByClassName("div");
         for (var i=0, imax=elms.length;i<imax;i++) {
            elms[i].style.display="none";
         }
      }
   });
   </script>
</body>
</html>

Ce qui est intéressant c'est surtout getElementsByClassName et ce qu'il y a après la ligne Utils.Evenement.ajouter(document, "click", function(e) {
L'idée étant d'affecter à l'élément (ou aux éléments) une classe CSS, de retrouver ces éléments dans le DOM grâce à cette classe, puis de les faire disparaître.

**dark_vidor** · 10/02/2009, 18h59

Envoyé par Bovino

A la rigueur, celui-ci le fait

non

fonctionne pas

@ franculo_caoulene : aurais tu un exemple pour ton script ?

j'ai rajouté une fonction hide_calendar ... au clic sur un x dans le calendrier reste a généralisé à l'ensemble de la page tout clic sur autre chose que le div calendar dois masquer le calendar

**Bovino** · 10/02/2009, 19h44

Envoyé par dark_vidor

non

fonctionne pas

C'est que tu n'as probablement pas été jusqu'au bout... http://www.developpez.net/forums/d64...x/#post3902313

**franculo_caoulene** · 10/02/2009, 19h57

Un exemple pour mon script? C'est une blague? Mon script EST un exemple. Tu copies/colles, clique sur le div, puis en dehors du div et tu vois ce qui se passe.

**dark_vidor** · 15/02/2009, 15h09

Bon ça fait une bonne semaine que je galère la dessus mais en fait c'est tout simple

Il suffisait bien de détecter un clic en dehors de la zone calendrier... ce qui ce traduit par une perte du focus sur le input, ce qui signifie l'utilisation de onBlur

c'était tout simple, ça existe déjà tout fait en html !

mon champs date prends donc ces 'attributs'

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<input onClick="javascript:show_calendar(this);" onBlur="javascript:hide_calendar();" name="date_debut" value="0000-00-00" readonly="readonly" style="cursor: text" />

y'avais rien à inventer en JS ou autre

FACILE !

[DOM] Script Mini Calendrier [Fait]

JavaScript

Vue hybride

Discussions similaires

Partager

Partager