Boite html/javascript réductible

Télécharger le projet
Commenter

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 / Exemple : 


<?
/* 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!
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 (nuchoon)