Appeler une fonction javascript

a marqué ce sujet comme résolu.

Bonjour / Bonsoir , Je pense que cet question a du déjà être posé mais je ne trouve pas :

J'ai une fonction dans un fichier javascript EXTERNE et je voudrai l'appeler d'un fichier php ou html :

Je veux faire un systeme de notification pour mon appli

Pour l'instant c'est ce fichier :

jquery.notif.js( cc Grafikart ) : 

 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
(function(event){


    event.notif = function(option){
        event("body").notif(option)
    };

    event.fn.notif = function(option){

        var    settings = {  //Est un tableau contenant le code de la notif


        html:'<div class="notification animated fadeInLeft {{cls}}">          <div class="left">            {{#icon}}            <div class="icon">              {{{icon}}}            </div>            {{/icon}}            {{#img}}            <div class="img" style="background-image:url({{img}});"></div>            {{/img}}          </div>          <div class="right">            <h2>{{title}}</h2>            <p>{{content}}</p>          </div>        </div>',
        icon:"&#8505;",// L'icon par défaut est celui la ( icon sur http://www.entypo.com/characters/)
        timeout:3e3 // Regarde si il y a un timeout qui enleve la notif

    };

    if(option.cls == "error"){  //Si la class est égale à error alors on met l'icon error

        settings.icon = "&#10060;"

    }
    if(option.cls == "success"){ //Si la class est égale à success alors on met l'icon success
        settings.icon = "&#10003;"
    }

    var option = event.extend(settings,option);  // Créer une variable contenant le body à utiliser

    return this.each(function(){  // Renvoie cette fonction
        var    settings = event(this); // Pour simplifier le nom de la variable on la renomme simplement
        var notifs = event("> .notifications",this);   // Recherche si il y a .notifications
        var notif = event(Mustache.render(option.html,option));     // On appel notif quand on rend une notif avec un effet créer par Mustache
        if(notifs.length == 0){   //Si c'est la premiere notification alors on on met l'effet flipInX
            notifs = event('<div class="notifications animated flipInX"/>');
            settings.append(notifs)
        }
        notifs.append(notif);
        if(option.timeout){  //Si il y a un timeout alors on ajoute un timeout a la notif
            setTimeout(function(){
                notif.trigger("click")
            },option.timeout)

        }

        notif.click(function(event){  // Si on click sur une notif alors elle s'éfface

            event.preventDefault();
            notif.addClass("zoomOutUp").delay(500).slideUp(300,function(){
                if(i.siblings().length == 0){

                    r.remove()

                }
                notif.remove()
            })
        })
    })
};


    event("a").click(function(option){
        option.preventDefault();
        $.notif($(this).data())
    })

})(jQuery)

Qui récupere les différentes informations grace à des liens :

 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
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <link rel="stylesheet" href="css/navbar.css">
        <link rel="stylesheet" href="css/notification.css">
        <link rel="stylesheet" href="css/background.css">
        <link rel="stylesheet" href="css/animate.css">
        <link rel="stylesheet" type="text/css" href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
        <title>Onyx</title>

    </head>
    <body>

        <?php include ROOT.DS.'view'.DS.'layout'.DS.'navbar.php'; ?>

        <style type="text/css">
            body{
                background-color: #7FC6BC;
            }
        </style>

      <div class="principal">

     <p>
        <a href="#" data-title="A propos" data-content="Ici mes informations sur la notification">Notification classique</a>
      </p>
      </div>


<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script type="text/javascript" src="JS/mustache.js"></script>
    <script type="text/javascript" src="JS/jquery.notif.js"></script>
</html>

Donc j'arrive a afficher mes notifications avec des liens mais ce que je voudrai c'est afficher des notifications quand je veux et sans lien exemple je viens de me connecter il y a une notification qui me dit "Vous êtes maintenant connecter"

Merci d'avance ,

Cordialement Aituglo

+0 -0

Salut !

Ce que tu cherches pour la notification à la connexion me semble être possible avec l'utilisation de l'événement onDomReady, mais j'ai vu plusieurs fois que cet événement n'est pas toujours lancé au meilleur moment. Et pour ma part, je ne l'utilise pas.

Une des alternatives les plus courantes est d'utiliser une bibliothèque comme MooTools ou jQuery, qui proposent des méthodes pour encapsuler des fonctions et les lancer quand la page a fini de charger. Par exemple, avec jQuery, tu aurais quelque chose comme ça :

1
2
3
4
$(document).ready(function(event) {
    // Ici le code de ta fonction, sans grands changements si ce n'est que
    // l'événement n'est plus le même, et tu pourrais ne plus avoir besoin de le gérer du coup
}

Une fonction JavaScript qui se lancerait dès que la page a fini de se charger, avec jQuery

+0 -0
Connectez-vous pour pouvoir poster un message.
Connexion

Pas encore membre ?

Créez un compte en une minute pour profiter pleinement de toutes les fonctionnalités de Zeste de Savoir. Ici, tout est gratuit et sans publicité.
Créer un compte