Je peux poster ce que j'ai déjà (directement ici ?)Oui. c'est même fortement conseillé.
Serait il possible de la rendre dynamique ?Sans plus d'informations (c.a.d sans le code) il sera difficile de te répondre... mais à mon avis il ne devrait pas y avoir de soucis.
De cliquer sur le lien ouvrir un script PHP, et renvoyer le résultat dans la fenêtre de notification ?Si tu souhaites utiliser un script PHP pour renseigner des données via Javascript il va te falloir utiliser de l'AJAX (xmlhttprequest)
<html> <head> <title></title> <script type="text/javascript" src="../scripts/jquery.js"></script> <script type="text/javascript" src="../scripts//jquery.notify.js"></script> <script type="text/javascript"> $( document ).ready( function () { $( '.modifi' ).click( function () { var notice = '<div class="notice">' + '<div class="notice-body">' + '<img src="../scripts/notify/purr/info.png" alt="" />' + '<h3>Modifié !!</h3>' + '<p>Lorem ipsum dolor sit amet.</p>' + '</div>' + '<div class="notice-bottom">' + '</div>' + '</div>'; $( notice ).purr( { usingTransparentPNG: true } ); return false; } ); } ); </script> <style type="text/css"> // ICI tout mes CSS ! </style> </head> <body> <div id="test"> <ul> <li><a class="modifi" href="#show">Regular</a></li> </ul></div> </body> </html>
$( '.modifi' ).click( function () { $.ajax({ type: "POST", url:"url_de_ta_page_php", data: "variable1="+mavariable1+"&variableN="+mavariableN , async: false, dataType: "text", success: function(reponse){ // Ici ton code à faire lorsque tu obtiens un résultat // Exemple : alert(reponse); var notice = '<div class="notice">' + '<div class="notice-body">' + '<img src="'+reponse['img']+'" alt="" />' + '<h3>'+reponse['titre']+'</h3>' + '<p>'+reponse['texte']+'</p>' + '</div>' + '<div class="notice-bottom">' + '</div>' + '</div>'; $( notice ).purr( { usingTransparentPNG: true } }, error:function(){ alert('error'); } });
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question<!DOCTYPE html> <html lang="fr"> <head> <meta charset="utf-8"/> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <!-- devrait être : <script src="plugins/notice/notice.js"></script> --> <script> /* id automatique */ var __id_notice = 0; /* crée une notice */ function createNotice(img, title, text) { // incrementation de l'auto id __id_notice++; // récupération du template HTML de la notice var tpl = $('#notice_template').html(); // insertion de l'id tpl = tpl.replace(/@/g, ''+__id_notice); // insertion du src de l'image tpl = tpl.replace('%%notice_img_src%%', img); // insertion du titre tpl = tpl.replace('%%notice_title%%', title); // insertion du texte tpl = tpl.replace('%%notice_text%%', text); // affichage dans l'objet notice_screen // (changer selon... pourrait être body par exemple) $('#body').append( tpl ); // retourne l'id de la boite return __id_notice; } /* efface une notice */ function deleteNotice(id){ /* parce qu'un fade out c'est super sympa */ $('#notice_'+id).fadeOut(200, function(){ /* et on kick la node html */ $('#notice_'+id).remove(); }); } /* charge une notice depuis un fichier peut etre txt, csv, json, ou généré par php etc. */ function loadNotice(){ $.ajax({ type: "GET", url: 'plugins/notice/notice_abc.txt', success: function(result){ // on retourne une chaine CSV par exemple // image|titre|texte var t = result.split('|'); if(t.length == 3) { /* on crée la notice */ createNotice(t[0], t[1], t[2]); } }, error: function(){ /* en cas d'erreur */ } }); } </script> <!-- devrait être : <link href="plugins/notice/notice.css" rel="stylesheet"/> --> <style> /* Styles pour notice */ .notice{ /* fenetre centrée fixe de 320px sur 240 a 600px */ width:320px; height:240px; padding:8px; background-color:#fff; box-shadow:0 0 8px #444; /* fixed, absolute, relative */ position:fixed; /* ne pas modifier le reste */ z-index:10000; /* doit être le plus grand z-index des éléments */ display:block; margin:auto; top:0; left:0; right:0; bottom:0; } .notice header{ } .notice content{ } .notice content > img{ max-width:320px; height:32px; } .notice content > h3{ } .notice content > p{ overflow:auto; max-height:480px; } .notice footer{ } </style> <script> /* test */ $(document).ready(function(){ for(i=0;i<10;i++){ createNotice('https://developers.google.com/_static/af26327896/images/developers-logo.svg', 'Test '+i, 'bla bla bla bla bla'); } }); </script> </head> <body id="body"> <!-- devrait être : /* php include_once("plugins/notice/notice.tpl"); */ --> <content id="notice_template" style="display:none;width:0;height:0;left:-9999px;position:absolute;"> <div id="notice_@" class="notice"> <header> </header> <content> <img id="notice_img_@" src="%%notice_img_src%%" alt="" /> <h3 id="notice_title_@">%%notice_title%%</h3> <p id="notice_text_@">%%notice_text%%</p> </content> <footer> <input type="button" value="fermer" onclick="deleteNotice(@);"/> </footer> </div> </content> </body> </html>
<script type="text/javascript"> $( document ).ready( function () { $( '.modifi' ).click( function () { // A var var1 = encodeURIComponent(document.getElementById("var1").value); var var2 = encodeURIComponent(document.getElementById("var2").value); $.ajax({ // B type: "POST", url:"notification-7-rep.php", data: "var1="+var1+"& var2="+var2 , async: false, dataType: "text", success: function(reponse){ // C // Ici ton code à faire lorsque tu obtiens un résultat // Exemple : // alert(reponse); var notice = reponse; $( notice ).purr( { usingTransparentPNG: true } ); return false; }// FIN C }); // FIN B });// FIN A } ); </script> </head> <body> <div id="example"> <p> </p> <ul> <li><a class="modifi" href="">Notification</a></li> <input name="var2" id="var2" type="hidden" value="40" /> <input name="var1" id="var1" type="hidden" value="ABCDEF" /> </ul> </div><!--end #example--> <div id="resultat"></div> </body> </html>
<script src="jquery.js"></script> <script src="jquery.purr.js"></script> <script>
$(document).ready(function(){ /* note l'utilisation de -> .on('event' note la correction dans notifieGet sur la récupération des valeurs en jquery note la forme de "url" dans ajax note l'utilisation du datatype "html" plutot que "text" note l'utilisation de "console.log" pour le débogage (Firefox / Chrome : click droit sur la page -> examiner -> console) note l'utilisation de .html() pour envoyer la reponse dans le div #notice et enfin l'utilisation de .purr() sur #notice et non sur reponse */ // GET $('#notifieGet').on('click', function(){// A var var1 = encodeURIComponent( $("#var1").val() ); var var2 = encodeURIComponent( $("#var2").val() ); $.ajax({// B type:"GET", url:"notification-7-rep.php?var1="+var1+"&var2="+var2, dataType:"html", success: function(reponse){// C console.log(reponse); $('#notice').html(reponse); $('#notice').purr({ usingTransparentPNG: true }); },// FIN C error: function(){ console.log('Ajax -> erreur'); } });// FIN B });// FIN A /* note les différences de déclaration et utilisation avec un Form post note l'utilisation de .serialize() pour "récupérer" toutes les valeurs du formulaire en une fois note que Success et Error sont exactement les mêmes que précédement */ // POST $('#notifiePost').on('click', function(){// A $.ajax({// B type:$('#notificationPost').attr('method'), url:$('#notificationPost').attr('action'), data:$('#notificationPost').serialize(), dataType:"html", success: function(reponse){// C console.log(reponse); $('#notice').html(reponse); $('#notice').purr({ usingTransparentPNG: true }); },// FIN C error: function(){ console.log('Ajax -> erreur'); } });// FIN B });// FIN A });
</script> </head> <body> <!-- version GET, note la non utilisation de "name" sur var1 et 2 --> <input type="hidden" id="var1" value="ABCDEF" /> <input type="hidden" id="var2" value="40" /> <input type="button" id="motifieGet" value="Notification Get"/> <!-- // --> <!-- version FORM POST, note la non utilisation de "id" sur var1 et 2 --> <form id="notificationPost" method="POST" action="notification-7-rep.php"> <input type="hidden" name="var1" value="GHIJKLMN" /> <input type="hidden" name="var2" value="30" /> <input type="button" id="motifiePost" value="Notification Post"/> </form> <!-- // --> <div id="notice"></div> </body> </html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Notification 7</title> <script type="text/javascript" src="../scripts/jquery-1.11.0.js"></script> <script type="text/javascript" src="../scripts/notify/purr/jquery.purr.js"></script> <script type="text/javascript"> $(document).ready(function(){ /* note l'utilisation de -> .on('event' note la correction dans notifieGet sur la récupération des valeurs en jquery note la forme de "url" dans ajax note l'utilisation du datatype "html" plutot que "text" note l'utilisation de "console.log" pour le débogage (Firefox / Chrome : click droit sur la page -> examiner -> console) note l'utilisation de .html() pour envoyer la reponse dans le div #notice et enfin l'utilisation de .purr() sur #notice et non sur reponse */ // GET $('#motifieGet').on('click', function(){// A var var1 = encodeURIComponent( $("#var1").val() ); var var2 = encodeURIComponent( $("#var2").val() ); $.ajax({// B type:"GET", url:"notification-7-rep.php?var1="+var1+"&var2="+var2, dataType:"html", success: function(reponse){// C console.log(reponse); $('#notice').html(reponse); $('#notice').purr({ usingTransparentPNG: true }); },// FIN C error: function(){ console.log('Ajax -> erreur'); } });// FIN B });// FIN A /* note les différences de déclaration et utilisation avec un Form post note l'utilisation de .serialize() pour "récupérer" toutes les valeurs du formulaire en une fois note que Success et Error sont exactement les mêmes que précédement */ // POST $('#motifieGet').on('click', function(){// A $.ajax({// B type:$('#notificationPost').attr('method'), url:$('#notificationPost').attr('action'), data:$('#notificationPost').serialize(), dataType:"html", success: function(reponse){// C console.log(reponse); $('#notice').html(reponse); $('#notice').purr({ usingTransparentPNG: true }); },// FIN C error: function(){ console.log('Ajax -> erreur'); } });// FIN B });// FIN A }); </script> <style type="text/css"> body { margin: 0; padding: 0; font-family: Georgia; font-size: 0.9em; line-height: 1.4em; } #example { position: relative; width: 500px; padding: 20px; } p { margin: 7px 0 0 0; } #purr-container { position: fixed; top: 0; right: 0; } .notice { position: relative; width: 324px; -khtml-border-radius: 7px; border-radius:7px; -khtml-border-radius: 7px; behavior: url(scripts/PIE.htc); /* POUR IE */ -moz-box-shadow: 2px 2px 20px #888; -webkit-box-shadow: 2px 2px 20px #888; box-shadow:2px 2px 26px #888; background-color:#999; margin-bottom:10px; } .notice .close {position: absolute; top: 12px; right: 12px; display: block; width: 18px; height: 17px; text-indent: -9999px; background: url(../scripts/notify/purr/purrClose.png) no-repeat 0 10px;} .notice-body { min-height: 50px; padding: 22px 22px 0 22px; /*background: url(../scripts/notify/purr/purrTop.png) no-repeat left top;*/ color: #f9f9f9; } .notice-body img {width: 50px; margin: 0 10px 0 0; float: left;} .notice-body h3 {margin: 0; font-size: 1.1em;} .notice-body p {margin: 5px 0 0 60px; font-size: 0.8em; line-height: 1.4em;} .notice-bottom { height: 22px; /*background: url(../scripts/notify/purr/purrBottom.png) no-repeat left top;*/ } </style> </head> <body> <div id="example"> <!-- version GET, note la non utilisation de "name" sur var1 et 2 --> <input type="hidden" id="var1" value="ABCDEF" /> <input type="hidden" id="var2" value="40" /> <input type="button" id="motifieGet" value="Notification Get"/> <!-- // --> <!-- version FORM POST, note la non utilisation de "id" sur var1 et 2 --> <form id="notificationPost" method="POST" action="notification-7-rep.php"> <input type="hidden" name="var1" value="GHIJKLMN" /> <input type="hidden" name="var2" value="30" /> <input type="button" id="motifiePost" value="Notification Post"/> </form> <!-- // --> <div id="notice"></div> </body> </html>