[poo] fenêtre d'alerte avec des div.

Télécharger le projet
Commenter

Description

L'objet Fenetre (présent dans le zip du projet) crée un div, que j'évoquerais sous le nom de global, il possède une position css "fixed", il prend 100% de la hauteur de la page et 100% de la longueur, par défaut le fond de ce div est transparent, donc invisible, mais une grande partie de ces paramètres sont modifiable. A l'intérieur de ce div il y a un div que j'évoquerais sous le nom de frame, ce div représente la fenêtre à l'intérieur de laquelle seras le message d'alerte et le bouton "fermer". Le div "frame" est divisé en deux autres div un pour le bouton fermer, et un pour le message d'alerte.
Le bouton "fermer" et par défaut initialisé avec l'attribut onclick qui appel une fonction javaScript présente dans l'objet. Il faut donc afficher dans le head entre les balises "script" une fonction imprimant cette fonction javaScript. Cet façon de faire, de fermer la fenêtre via javascript, n'est pas une obligation, il y a une fonction qui permet d'initialiser le bouton fermer avec une url et ainsi désactiver l'attribut onClick du bouton fermer on peut aussi effacer le bouton fermer. La fonction javascript permettant la fermeture et même l'ouverture, si l'élément est en display "none", ce nomme fermeFrame(id) et l'id de l'élément à faire rentrer est par défaut "alertFen". Si vous utilisez la fonction setId() de cet objet, faite le bien avant de définir les fonction javascript.

A la construction cette objet initialise juste l'objet avec des paramètres par défaut qui sont pour la plus part des valeurs css, ainsi il existe des méthode de type Set pour modifier tous ces attribut css.

Source / Exemple : 


<!-- *********************************************************************************-->
<!--                                 VERSION AVEC JAVASCRIPT                          -->
<!-- *********************************************************************************-->
<?php
/**


     
  •  ce fichier sert à tester l'objet Fenetre

    •  
  • /

//on inclue le fichier Fenetre.php
include 'Class/Fenetre.php';
//on déclare l'objet
$fenetre=new Fenetre();
//on stock un message avec le lien fermer qui utilise la fonction javascript
$message='
        ceci est une alerte!!!<br>
        <a style="cursor: pointer;" onclick="'.$fenetre->getJavascriptNomFonction().'">
             <strong>fermer</strong>
        </a>
     ';
//on stock le bouton fermer
$boutonFermer="<img src=\"image/fermer.jpg\"/>";
//on met l'alerte en "display:none"
$fenetre->setCssDisplayGlobal("none");
//on ajoute le message
$fenetre->setMessage($message);
//on joute un fond au div global
$fenetre->setCssBackgroundGlobal("image/global.png");
//on ajoute des bordures
$fenetre->setCssBorderFrame(2, "outset", "gray");
//on ajoute la longueur de la frame
$fenetre->setCssWidthFrame(20);
//on ajoute le bouton fermer
$fenetre->setBoutonFermer($boutonFermer);
?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
        <title>Alerte</title>
        <!-- on écrit la fonction javascript de fermeture -->
        <script>
<?php echo $fenetre->getJavascriptFonction();?>
        </script>
    </head>
    <body>
        <!-- on écrit la fenêtre -->
        <?php echo $fenetre->getFenetre()?>
        <h1>Version javascript</h1>
        <!-- le lien qui lance l'alerte grace a la fonction javascript -->
        <a style="cursor: pointer;" onclick="<?php echo $fenetre->getJavascriptNomFonction()?>"><strong>Lancer l'alerte</strong></a>
    </body>
</html>

<!-- *********************************************************************************-->
<!--                                 VERSION SANS JAVASCRIPT                          -->
<!-- *********************************************************************************-->

<?php
/**


     
  •  ce fichier sert à tester l'objet Fenetre

    •  
  • /

//on inclue le fichier Fenetre.php
include 'Class/Fenetre.php';
//on vérifie l'exstence de 'a variable signifiant une alerte
if(isset ($_GET['alert'])) {
    //si elle existe on déclare Fenetre
    $fenetre=new Fenetre();
    //on stock le message d'alerte
    $message='
        ceci est une alerte!!!<br>
        <a href="index.php">
             <strong>fermer</strong>
        </a>
     ';
    //on crée le bouton "fermer"
    $boutonFermer="<img style=\"border:none\" src=\"image/fermer.jpg\"/>";
    //on ajoute le message
    $fenetre->setMessage($message);
    //on met un fond au div global
    $fenetre->setCssBackgroundGlobal("image/global.png");
    //on change les bordures
    $fenetre->setCssBorderFrame(2, "outset", "gray");
    //on change la longueur
    $fenetre->setCssWidthFrame(20);
    //on ajoute le bouton fermer
    $fenetre->setBoutonFermer($boutonFermer);
    //on ajoute une url pour le bouton fermer
    $fenetre->setUrlBoutonFermer("index.php");
    //on récupere l'alerte dans $alerte
    $alert=$fenetre->getFenetre();

}else {//si alerte n'éxiste pas
    $alert="";//on met $alert a vide
}
?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
        <title>Alerte</title>
    </head>
    <body>
        <!-- on écrit l'alerte -->
        <?php echo $alert ?>
        <h1>Version sans javascript</h1>
        <!-- le lien qui lance l'alerte -->
        <a href="index.php?alert=1"><strong>Lancer l'alerte</strong></a>
    </body>
</html>

Conclusion :


Je vous invite a lire la doc présente dans le code de l'objet pour comprendre l'utilité des fonctions. je ne les énumérerais pas toutes je vais juste parler des principales:

> setMessage(): Vous vous en servirez forcément, elle ajoute le message d'alerte dans la fenêtre.
> setCssWidthFrame: avec le nom de cette fonction on sait qu'il s'agit d'une méthode qui modifira le css et qu'il portera sur la valeur width du div frame. En css le width peut etre renseigné en "px" ou "%", ainsi pour toutes méthode modifiant un css de ce type on pourras initialiser en paramètres soit "12px", "12%", 12 (Integer), "12" (String), si ni les "px" ni les "%" ne sont renseigné alors l'objet interprétera la valeur comme des "%".
> setCssBorderFrame(): les bordure du div frame, placé par exemple "5" ou 5 dans $width, si vous placé 0 dans $width alors border sera initialisé à "none".
> setCssBackgroundGlobal: par défaut le div global a un fond transparent, avec cette fonction vous pouvez soit mettre une image au format gif, png, jpg, jpeg, pour d'autre format l'url doit être en absolut, soit mettre une couleur. Moi, en fond de ce div, je place généralement un fichier png avec de la transparence pour atténuer le reste de la page.
> setCssDisplayGlobal: permet d'écrire la fenêtre avec un display none la valeur par défaut étant "block".
> setId(): permet de définir l'id du div global et une partie des id des sous éléments, effectuez cette méthode avant tout appel javascript.
> setBoutonFermer(): permet de définir ce qu'il y aura dans la balise <a> représentant le lien "fermer", donc placé des éléments accepté par les balises <a> par exemple une image <img/>.
> setUrlBoutonFermer(): pour définir une url pour le bouton "fermer" et rendre inopérante la fonction javascript.
> getFenetre(): retourne l'objet dans sa totalité via chaines de caractères.
> getJavascriptNomFonction(). retourne l'appel à la fonction javascript fermeFrame(id), dans le but de pouvoir l'éxecuter éventuellement sur un onclick hors de la class. Par défaut elle retourne ceci: "fermeFrame('alertFen') ".
> getJavascriptFonction(): retourne un chaine de caractères stockant la fonction javascript fermeFrame(id), si vous utilisez la fonction javascript de fermeture il faut afficher cette fonction dans le head entre les balises <script>.
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 (dariumis)