begin process at 2010 03 22 16:33:58
  Trouver un code source :
 
dans
 
Accueil > 

Code

 > 

Javascript / DHTML

 > BOITE HTML/JAVASCRIPT RÉDUCTIBLE

BOITE HTML/JAVASCRIPT RÉDUCTIBLE


 Information sur la source

Note :
Aucune note
Catégorie :Javascript / DHTML Niveau :Débutant Date de création :19/03/2005 Date de mise à jour :20/03/2005 13:19:47 Vu / téléchargé :6 163 / 445

Auteur : nuchoon

Ecrire un message privé
Site perso
Commentaire sur cette source (9)
Ajouter un commentaire et/ou une note

 Description

Cette fonction crée une boite en html avec 3 divs: 1 pour la boite, 1 pour le titre de la boite, 1 pour le contenu de la boite.
On peut aussi passer en argument l'état de la boite, si le contenu doit être affiché ou non, ainsi que l'id du contenu de la boite (nécessaire si on veut que l'état de la boite soit mémorisé d'une page à l'autre).
Si l'id n'est pas fourni, alors il est généré (de façon aléatoire).

Source

  • <?
  • /* fabrique une boite en html avec possibilité de fermer/ouvrir le contenu */
  • function mkHtmlBox($boxtitle,$boxcontent,$boxdisplaystate="",$boxcontentid=""){
  • if($boxcontentid==""){
  • $min=10; /* longueur minimum de l'id */
  • $max=10; /* longueur maximum de l'id */
  • for($i=0;$i<rand($min,$max);$i++)
  • {
  • $num=rand(48,122);
  • if(($num > 97 && $num < 122))
  • {
  • $boxcontentid.=chr($num);
  • }
  • else if(($num > 65 && $num < 90))
  • {
  • $boxcontentid.=chr($num);
  • }
  • else if(($num >48 && $num < 57))
  • {
  • $boxcontentid.=chr($num);
  • }
  • else if($num==95)
  • {
  • $boxcontentid.=chr($num);
  • }
  • else
  • {
  • $i--;
  • }
  • }
  • }
  • if($boxdisplaystate=="closed"){
  • $display="style=\"display:none;\"";
  • }
  • if($boxdisplaystate=="opened"){
  • $display="style=\"display:block;\"";
  • }
  • if($boxdisplaystate==""){
  • if(isset($_COOKIE[$boxcontentid])){
  • $display="style=\"display:$_COOKIE[$boxcontentid];\"";
  • }
  • else{
  • $display="style=\"display:block;\"";
  • }
  • }
  • echo(
  • "<div class=\"box\">"
  • ."<div class=\"box-title\">"
  • ."<a href=\"#\" onClick=\"document.getElementById('$boxcontentid').style.display='block';document.cookie='$boxcontentid=block';\">"
  • ."<img src=\"downarrow.gif\" alt=\"montrer\" border=\"0\" title=\"".BOX_SHOW."\"/></a>"
  • ."<a href=\"#\" onClick=\"document.getElementById('$boxcontentid').style.display='none';document.cookie='$boxcontentid=none';\">"
  • ."<img src=\"uparrow.gif\" alt=\"cacher\" border=\"0\" title=\"".BOX_HIDE."\"/></a>"
  • ."&nbsp;"
  • ."<a href=\"#\" onClick=\"if(document.getElementById('$boxcontentid').style.display=='none'){document.getElementById('$boxcontentid').style.display='block';document.cookie='$boxcontentid=block';}else{document.getElementById('$boxcontentid').style.display='none';document.cookie='$boxcontentid=none';}\" title=\"".BOX_SHOWHIDE."\">".$boxtitle."</a>"
  • ."</div>"
  • ."<div class=\"box-content\" id=\"$boxcontentid\""." ".$display.">"
  • .$boxcontent
  • ."</div>"
  • ."</div>"
  • );
  • }
  • ?>
<?
/* fabrique une boite en html avec possibilité de fermer/ouvrir le contenu */

function mkHtmlBox($boxtitle,$boxcontent,$boxdisplaystate="",$boxcontentid=""){
  
  if($boxcontentid==""){ 
    $min=10; /* longueur minimum de l'id */
    $max=10; /* longueur maximum de l'id */
    
    for($i=0;$i<rand($min,$max);$i++)
    {
      $num=rand(48,122);

    if(($num > 97 && $num < 122))
    {
      $boxcontentid.=chr($num);
    }

    else if(($num > 65 && $num < 90))
    {
      $boxcontentid.=chr($num);
    }

    else if(($num >48 && $num < 57))
    {
      $boxcontentid.=chr($num);
    }

  else if($num==95)
  {
      $boxcontentid.=chr($num);
  }

  else
  {
      $i--;
  }
}
  }
  if($boxdisplaystate=="closed"){
    $display="style=\"display:none;\"";
  }
  if($boxdisplaystate=="opened"){
    $display="style=\"display:block;\"";
  }
  if($boxdisplaystate==""){
    if(isset($_COOKIE[$boxcontentid])){
      $display="style=\"display:$_COOKIE[$boxcontentid];\"";
    }
    else{
      $display="style=\"display:block;\"";
    }
  }
  
  echo(
     "<div class=\"box\">"
    ."<div class=\"box-title\">"
    ."<a href=\"#\" onClick=\"document.getElementById('$boxcontentid').style.display='block';document.cookie='$boxcontentid=block';\">"
    ."<img src=\"downarrow.gif\" alt=\"montrer\" border=\"0\" title=\"".BOX_SHOW."\"/></a>"
    ."<a href=\"#\" onClick=\"document.getElementById('$boxcontentid').style.display='none';document.cookie='$boxcontentid=none';\">"
    ."<img src=\"uparrow.gif\" alt=\"cacher\" border=\"0\" title=\"".BOX_HIDE."\"/></a>"
    ."&nbsp;"
    ."<a href=\"#\" onClick=\"if(document.getElementById('$boxcontentid').style.display=='none'){document.getElementById('$boxcontentid').style.display='block';document.cookie='$boxcontentid=block';}else{document.getElementById('$boxcontentid').style.display='none';document.cookie='$boxcontentid=none';}\" title=\"".BOX_SHOWHIDE."\">".$boxtitle."</a>"
    ."</div>"
    ."<div class=\"box-content\" id=\"$boxcontentid\""." ".$display.">"
    .$boxcontent
    ."</div>"
    ."</div>"
  );
  
}

?>

 Conclusion

Pour générer un id aléatoire j'ai utilisé une fonction (offerte) d'un auteur anglophone. J'ai malheureusement oublié son nom, alors je m'excuse d'avance et je corrigerai si il se reconnait.
Je fourni un fichier d'exemple ainsi que 2 petites images (sinon tout le reste du look c'est en css).
Ah oui... les balises alt font appel à des constantes.
Les améliorations sont bienvenues celà va de soi!

 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

20 mars 2005 13:19:49 :
Changement de "initié" vers "débutant".

 Sources du même auteur

Source avec Zip Source avec une capture LECTEUR/GESTIONNAIRE DE MP3
Source avec Zip Source avec une capture GALERIE AJAX ET REDIMENSIONNEMENT D'IMAGE EN PHP

 Sources de la même categorie

BOUTON POUR SITE WEB PAYMENT par Tom56340
Source avec Zip Source avec une capture PETIT CLIENT + AJAX + PHP par kiki67100
Source avec Zip Source avec une capture BOÎTE À ONGLETS / MENUS ET SOUS-MENUS / JAVASCRIPT / PHP / D... par Heirem
Source avec Zip Source avec une capture JUKEBOX EN LIGNE par Flachy Joe
Source avec Zip Source avec une capture ONGLET GÉNÉRÉ EN PHP ET REQUETE AJAX par djmmix

Commentaires et avis

Commentaire de Anthomicro le 19/03/2005 15:32:27

J'adore le code initié comme ça, tout le monde maîtrise PHP sur le bout des doigts si ce code est initié...

<? à remplacer par <?php

if(($num > 97 && $num < 122)) (et accessoirement toutes les vérifs basées sur ce modèle) : à remplacer par ça (pour les parenthèses) :

if($num > 97 AND $nom < 122)

Ensuite tu sais que $nom est toujours de type numérique, antant remplacer le double égal par un triple :

if($num===95)

Ensuite les echo avec des doubles quotes sont inappropriés ici vu que t'es obligé de les échapper dans les attributs html, autant faire ceci :

    echo '<div class="box">
<div class="box-title">
<a href="#" onClick="document.getElementById(\'',$boxcontentid,'\').style.display=\'block\';document.cookie=\'',$boxcontentid=block,'\';">
<img src="downarrow.gif" alt="montrer" title="',BOX_SHOW,'" /></a>[...]';

a +

Commentaire de Cyberboy2054 le 19/03/2005 20:25:20

Ca change quoi le AND à la place du && ?
Ensuite tu peux expliquer ce que fait le === ?
C'est sympa de dire "c'est 1000 fois mieux de faire comme ca" afin d'aider les autres à progresser mais si ya pas d'explications ca sert à rien...

Commentaire de Anthomicro le 19/03/2005 20:36:46

le AND c'est pas bien grave, c'est juste une question de style, tu peux laisser le && (comparaison bit à bit)

Ensuite le === vérifie le type de ta variable, c'est à dire que si tu as une variable de type string (qui a pour valeur 1) et une autre variable de type int qui a également la valeur 1, ce test te retournera vrai :

if($var1==$var2) tandis que ce test if($var1===$var2) te retournera faux car les deux variables n'ont pas le même type. Le second test est plus rapide à traiter car les variables ne sont pas converties.

a +

Commentaire de Anthomicro le 19/03/2005 20:37:18

Puis pour les explications désolé, je croyais que c'était de l'initié ^^

Commentaire de ghostahjay le 20/03/2005 10:36:51

Juste pour dire que ton script est vraiment pas mal et peut aider dans beaucoup de projets qui a un menu multi-niveau et qui utilise PHP. En ce qui concerne le 'AND', tu pousse Anthomicro ;p
Merci pour cette source !

Commentaire de nuchoon le 20/03/2005 13:18:00

Pour la qualification "initié"... ben c'est juste parce que "débutant" je trouvais que ça ne collait pas. En plus c'est extrêmement flou comme truc. C'est quoi "initié"? on explique ce que ça veut dire quelque part?
Maintenant si c'est si grave que ça il y a peut-être moyen qu'un webmestre modifie le bousin...

Pour parler de choses plus intéressantes, est-ce qu'il y a moyen sur ce site de mettre à jour une contribution? J'aurai bien aimé redonner un zip avec toutes les modifications suggérées.

Commentaire de nuchoon le 20/03/2005 13:18:44

euh... j'ai rien dit, je viens de voir le lien là-haut... :-)

Commentaire de arnal69130 le 23/03/2005 17:25:36

salut nuchoon,
T'aurais pas une ptite capture d'écran stp ?

Commentaire de nuchoon le 23/03/2005 21:10:06

non mais ya un exemple (une version amélioré, le cookie prévaut sur l'argument "closed" ou "opened") ici: www.nuchoon.com

 Ajouter un commentaire




Nos sponsors


Appels d'offres

Sondage...

Comparez les prix

CalendriCode

Mars 2010
LMMJVSD
1234567
891011121314
15161718192021
22232425262728
293031    

Consulter la suite du CalendriCode

 
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 : 1,170 sec (4)

Nous contacter | Annoncer sur CodeS-SourceS | Mentions légales