Magix cjQuery, une bibliothèque php pour intégrer jQuery - tutoriel jQueryMagix cjQuery est une bibliothèque écrite en PHP 5.
Elle permet d’effectuer le contrôle de vos données échangé dans les champs de formulaire.
Elle peut être intégrée dans tout type de conception, et est compatible avec différents framework.2017-10-05T19:12:23+02:00gerits aurelienurn:md5:fc9a43498ab43d68ba6c26764a7e06acDotcleardéveloppement de la boite à outil javascript jimagineurn:md5:2351160a84265289952aac9da044150c2011-11-16T13:52:00+01:002011-11-16T14:09:33+01:00aurelien geritstutoriel jQueryajax jQueryjQueryrequete ajaxévènements jQuery<p>Depuis un petit moment,
je développe une <strong>boite à outils javascript</strong> qui intègre des helpers jQuery bien pratique.<br />
En sommes, cette boite permettra d'utiliser des fonctions prêt à l'emploi qui utilisent des <strong>plugins jQuery</strong> pré configuré.<br />
Bien entendu la plupart des plugins sont entièrement écrit pour l'occasion sauf dans certain cas tel que <strong>gmap3</strong> ou encore <strong>jquery forms</strong>.</p> <p>Prenons un exemple,<br />
imaginons que je souhaite faire une <a href="https://magix-cjquery.com/pages/requete-ajax-jquery-de-type-post" hreflang="fr" title="Requête Ajax Post">requête ajax</a> avec une notification à la style twitter !!
Dans un cas classique,
je dois écrire la requête complète avec le callback et ensuite afficher à un endroit quelconque la notification mise en forme, mais avec la boite à outils vous effectuez la procédure mais en une seule ligne.
Sachant que tous les callbacks restent 100% personnalisable.</p>
<h3>Exemple de requête post :</h3>
<h4>Requête simple avec notification par défaut</h4>
<pre>[javascript]
$.nicenotify({
ntype: "ajax",
uri: '/test.php',
typesend: 'post',
noticedata: 'm_name='+$('#m_name').val()
});
</pre>
<h4>Requête avec paramètres supplémentaire et personnalisation de la notification</h4>
<pre>[javascript]
$.nicenotify({
ntype: "ajax",
uri: '/test.php',
typesend: 'post',
noticedata: 'm_name='+$('#m_name').val()
beforeParams:function(){
$(":submit").hide();
$('<span class="min-loader"><img src="/img/loader/min-loader.gif" /></span>').insertAfter(':submit');
},
successParams:function(e){
$('.min-loader').remove();
$(":submit").show();
$.nicenotify.initbox(e,{
time: null,
reloadhtml:false,
delay: 3000
});
}
});
</pre>
<h4>Quels avantages par rapport à l'utilisation de ajax natif ?</h4>
<p>L'utilisation de la fonction ajax native est beaucoup plus longue à écrire dans le cas présent,<br />
nicenotify effectue tous les tests nécessaire et retourne les erreurs sans oublier le callback dans une notification à la style twitter.<br />
Dans un cas plus particulier, si j'ai besoin de créer une carte googlemap qui récupère les données GPS et permet en plus de modifier les points via le déplacement du marqueur sa devient plus complexe et long à écrire.
Une série de fonctions prêt à l'emploi son déjà intégrée et créer une tel carte ne nécessite que très peu de code.</p>
<h3>Exemple avec une carte simple utilisant les données longitude et latitude :</h3>
<pre>[javascript]
var confcontent = $('#city').val()+'<br />'+$('#country').val();
var tabconfig = {
latitude : $('#lat').val(),
longitude : $('#lng').val(),
zoom : 15,
content: confcontent
};
jm_map._baselatLng('#my_map',tabconfig,false);
</pre>
<p>Bien d'autres outils sont disponible et toujours en développement.
<strong>Jimagine</strong> sera entièrement intégré dans <a href="http://www.magix-cms.com" hreflang="fr" title="Magix cms">magix cms</a> et son développement est assuré par <a href="http://www.magix-dev.be" hreflang="fr" title="Création de sites avec magix cms">Magix dev</a>.</p>https://magix-cjquery.com/post/2011/11/16/d%C3%A9veloppement-de-la-boite-%C3%A0-outil-javascript-jimagine#comment-formhttps://magix-cjquery.com/feed/atom/comments/127jquery ui dialog avec soumission de formulaire ajaxurn:md5:fd4d0c4fd167b9b48176cb2c10e437642010-08-01T12:34:00+02:002010-09-09T22:47:12+02:00aurelien geritstutoriel jQueryajax jQuerygestionnaire d évènementsjQuery-UI-Dialogrequete ajax<p>La création d'une boite de dialogue ajax devient très simple avec <strong>jQuery UI dialog</strong>.
Il nous faut tout d'abord un élément pour appeler notre boite de dialogue ainsi qu'un conteneur.</p> <pre>[html]
<div class="edit-ma-boite">Click dans ma boite</div>
Notre div conteneur:
<div id="monid" title="Ajouter un truc"></div>
</pre>
<p>Notre élément HTML s'occupe de faire l'appel au click de notre boite de dialogue.
Utilisons la fonction live de jQuery avec un évènement click</p>
<pre>[javascript]
$('.edit-ma-boite').live("click",function(){
/*Notre script ici*/
});
</pre>
<p>Nous devons ensuite configurer l'url dans une variable pour appeler notre boite de dialogue.</p>
<pre>[javascript]
var monurl = "/mapage.html";
</pre>
<p>La fonction load de jQuery va nous aider à charger la boite de dialogue dans notre conteneur avec un ID "#monid".
Imaginons que notre page externe "mapage.html" contient un formulaire.</p>
<pre>[html]
<form action="" method="post">
<fieldset>
<table>
<tr>
<td>
<label for="truc_much">Nom de mon truc:</label>
</td>
<td>
<input type="text" id="truc_much" name="truc_much" class="ui-widget-content" size="30" value="" />
</td>
</tr>
</table>
</fieldset>
</form>
</pre>
<p>Notre fonction load:</p>
<pre>[javascript]
$("#monid").load(monurl, function() {
//Script pour la boite de dialogue
})
</pre>
<p>Nous devons désormais configurer notre boite de dialogue ainsi que la requête ajax POST pour notre formulaire et ce avec jquery form.</p>
<pre>[javascript]
$(this).dialog({
height: 'auto',
width:'auto',
modal: true,
position: 'center',
overlay: {
backgroundColor: '#000',
opacity: 0.5
},
buttons: {
'Envoyer': function() {
$("#monid form").ajaxSubmit({
url: monurl,
type: "post",
error: function(){
alert("theres an error with AJAX");
},
beforeSubmit:function(){},
success: function(e){}
});
$(this).dialog('close');
},
Cancel: function() {
$(this).dialog('close');
}
}
});
</pre>
<p>Notre script s'occupe d'ouvrir une boite de dialogue avec un formulaire, et effectue la requête ajax POST de notre formulaire si on click sur le bouton envoyer.
Simple mais efficace, a adapter suivant vos besoins mais la pratique reste identique.
Notre script jquery complet:</p>
<pre>[javascript]
$('.edit-ma-boite').live("click",function(){
var monurl = "/mapage.html";
$("#monid").load(monurl, function() {
$(this).dialog({
height: 'auto',
width:'auto',
modal: true,
position: 'center',
overlay: {
backgroundColor: '#000',
opacity: 0.5
},
buttons: {
'Envoyer': function() {
$("#monid form").ajaxSubmit({
url: submitcat,
type: "post",
error: function(){
alert("theres an error with AJAX");
},
beforeSubmit:function(){},
success: function(e){}
});
$(this).dialog('close');
},
Cancel: function() {
$(this).dialog('close');
}
}
});
});
});
</pre>
<p>Je joins un exemple complet sur ce tutoriel avec quelques légère différence sur le nom des ID et class CSS<br />
Télécharger notre exemple de <a href="https://magix-cjquery.com/download/65">dialog ajax</a></p>https://magix-cjquery.com/post/2010/08/01/jquery-ui-dialog-avec-soumission-de-formulaire-ajax#comment-formhttps://magix-cjquery.com/feed/atom/comments/101rollover jquery compatible ie6 une correction attendueurn:md5:833c312e5d48f416874cc195554a1ecc2009-06-16T15:34:00+02:002009-06-16T21:27:41+02:00aurelien geritstutoriel jQueryhover avec jQueryjquery effetsjQuery eventrollover jQuerytutoriel jQueryévènements jQuery<p><img src="https://magix-cjquery.com/public/presentation/magicalhover-bug-ie6.png" alt="magicalhover-bug-ie6.png" style="float:left; margin: 0 1em 1em 0;" title="magicalhover-bug-ie6.png, juin 2009" />
MagicalHover est désormais <strong>compatible avec internet explorer 6</strong>.<br />
Un bug d'affichage étais présent en permanence faute du ALT animé.<br />
Celui-ci est corrigé et permet la configuration de nouveaux paramètres pour l'animation ainsi qu'un petit mode débogue.<br />
J'espère en ravir plus d'un avec ce correctif tellement attendu, ma pauvre boîte mail étais saturé concernant ce bug :D</p> <p>Désormais, la configuration se présente comme ceci :</p>
<pre>[javascript]
$('ul.thumb li').magicalHover({
speedView:200,
speedRemove:400,
altAnim:true,
speedTitle:500,
debug:false
});
</pre>
<p><img src="https://magix-cjquery.com/public/presentation/maghover.png" alt="maghover.png" title="maghover.png, juin 2009" /><br />
PS: <strong>Patience pour le portage de cette version dans magix cjQuery</strong></p>https://magix-cjquery.com/post/2009/06/16/rollover-jquery-compatible-ie6-une-correction-attendue#comment-formhttps://magix-cjquery.com/feed/atom/comments/54un joli rollover sur vos images avec jQueryurn:md5:07d00646f9014ce05adc0b8f1ff7a4712009-05-01T13:50:00+02:002011-01-04T19:03:01+01:00aurelien geritstutoriel jQuerygestionnaire d évènementshover avec jQueryjQuery eventrollover jQuerytutoriel jQueryévènements jQuery<p><img src="https://magix-cjquery.com/public/presentation/magicalhover-logo.jpg" alt="magicalhover-logo.jpg" style="float:left; margin: 0 1em 1em 0;" title="magicalhover-logo.jpg, mai 2009" />Un nouveau plugin jQuery viens de voir le jour,
MagicalHover permet d'avoir un joli effet <a href="http://magicalhover.magix-cjquery.com/" hreflang="fr">rollover avec jQuery</a> sur vos images ou galerie.<br />
Très simple d'utilisation avec des fichiers compressé au maximum pour une rapidité d'exécution sans pareille.<br /></p> <p>Compatible sur la plupart des navigateurs, il vous permettra d'avoir une animation digne d'un joli flash tout en restant idéal pour votre référencement.<br />
<em>Afin que Google image ne reste pas indifférent</em><br /></p>
<h2>Pour utilisé cette petite merveille :</h2>
<pre>[javascript]
$('ul.thumb li').magicalHover({
speedView:200,
speedRemove:400,
speedTitle:500
});
</pre>
<p><strong>Bien entendu ce plugin sera intégré dans l'API de magicjQuery afin de créer en quelque minutes une galerie d'image entièrement animé.</strong></p>
<h2>Pour le télécharger :</h2>
<ul>
<li>Sur la page officiel des <a href="http://plugins.jquery.com/project/magical" hreflang="fr">plugins jQuery</a></li>
<li>Sur la page de <a href="http://magicalhover.magix-cjquery.com/" hreflang="fr">magicalhover</a></li>
</ul>
<p><img src="https://magix-cjquery.com/public/presentation/maghoverb1.png" alt="maghoverb1.png" title="maghoverb1.png, juin 2009" /></p>https://magix-cjquery.com/post/2009/05/01/un-joli-rollover-sur-vos-images-avec-jQuery#comment-formhttps://magix-cjquery.com/feed/atom/comments/43tutoriel jquery une boite a idee pour vous aidezurn:md5:588ba9beb583a3b72c01bea0320d53ad2009-03-28T11:24:00+01:002009-03-28T11:24:40+01:00aurelien geritstutoriel jQuerydocumentationmagix cjQueryredactiontutoriel jQuerytutoriel magixcjQuery<p><img src="https://magix-cjquery.com/public/presentation/help.png" alt="help.png" style="float:left; margin: 0 1em 1em 0;" title="help.png, mar. 2009" />
J'ai beaucoup d'idée sur la conception de tutoriel pour jQuery, internet en regorge<br />
Peut être ne trouvez vous pas chaussure aux pieds ? <br />
Je lance alors une boîte à idée pour les tutoriels jQuery qui servirons également pour l'utilisation de la librairie.<br />
Les sujets sont très nombreux, il ne faut en aucun cas s'égarer du droit chemin de la conception clair et propre.<br /></p> <p>Les tutoriels seront classés suivant le degré de difficulté, allant du simple effets visuel au plus complexe.<br />
On en apprend tous les jours, <br />
c'est pour cette raison que je teste de multiple cas dans la réalisation de progiciel pour entreprise demandant parfois des choses surprenante.<br />
Heureusement jQuery tu es la pour nous aidé. <br /></p>https://magix-cjquery.com/post/2009/03/28/tutoriel-jquery-une-boite-a-idee-pour-vous-aidez#comment-formhttps://magix-cjquery.com/feed/atom/comments/36ouvrir une nouvelle fenetre avec jQueryurn:md5:62b8f246bec76dcb65488ede5d4057842009-03-23T20:10:00+01:002009-03-23T22:58:51+01:00aurelien geritstutoriel jQuerymagix cjQuerypop up jQuerytutoriel jQuerytutoriel magixcjQuerywindow.open<p>Premier tutoriel sur jQuery<br />
Afin de m’échauffer, <br />
voici comment remplacer le bon vieux target:_blank non valide XHTML dans votre site.</p> <pre>[html]
<a href=”monsite.com/mapage.html” target=”_blank”>monsite</a>
</pre>
<p>Voici ma petite fonction très pratique pour remédier à la validation w3c n'étant pas possible avec target</p>
<pre>[javascript]
/*
* Simple jQuery targetblank
* @version 2008-18-10
* @since 2008-18-10
* @copyright Copyright (c) 2008 clashdesign.net and clashdesign.be, Inc. http://www.clashdesign.net
* @author gerits aurelien
* @license MIT http://www.opensource.org/licenses/mit-license.php
*/
(function(){
$.fn.target = function(){
return $('.targetblank').click( function() {
window.open(
$(this).attr('href') );
return false;
});
}
})(jQuery);
</pre>
<p>On l'utilise très simplement</p>
<pre>[javascript]
<script type="text/javascript">
$(document).ready(function() {
$('a').target();
});
</script>
</pre>
<pre>[html]
<a href="http://jquery.com" class="targetblank">jquery</a>
</pre>
<p>En langage Magix :</p>
<pre>[PHP]
$fjquery = magixcjQuery::startFunction();
$fjquery .= '$.fn.target = function(){
return '.magixEvent::jClick(
'.targetblank','window.open('.magixAttributes::jAttr(
'this','name','href',false).
');return false;').'}';
$fjquery .= magixcjQuery::endFunction();
</pre>
<p>Une fois le langage plus évolué, on pourra construire une fonction en une seul ligne.<br />
<em>Note : Les fonctions sont déjà en correction afin de raccourcir les paramètres un maximum</em></p>https://magix-cjquery.com/post/2009/03/22/ouvrir-une-nouvelle-fenetre-avec-jQuery#comment-formhttps://magix-cjquery.com/feed/atom/comments/33