Je viens de mettre en ligne un petit tutorial sur jQuery, et comment s’en servir basiquement.
Les explications sont simples et basiques, et peuvent être utiles aux débutants, newbies, amateurs, ou tout simplement aux curieux.
L’adresse :
http://www.remy-solnais.com/tutoriaux/jquery-le-framework-javascript/
Bonne lecture …
Javascript possède une merveilleuse fonction dont ne se pas assez : la fonction prototype.
« Kesako » me direz vous ?
Le fonction prototype est une fonction Javascript permettant de définir une méthode/fonction Javascript comme « native » à un objet.
Exemple :
String.prototype.maFonction = function(){
alert(this);
}
Nous nous retrouvons alors avec une jolie nouvelle fonction associée à chaque variable de type String.
L’avantage du prototypage est de permettre une gestion des méthodes « propres » et correcte ainsi que de typer les fonctions. Ainsi, nous pouvons prototyper certains de nos objets perso.
Je vous laisse réfléchir aux étendus de cette fonction …
Source : http://chris4403.blogspot.com/2008/01/jquery-cheatsheet-wallpaper.html
Comme promis, voilà la suite sur jQuery et ses plugins.
Dans ce billet, nous allons abordé le fameux plugin « datePicker », plugin permettant de gérer facilement un calendrier JavaScript.
Pour cela, il vous faut :
- le moteur de script jQuery : jQuery 1.3.2 min
- le plugin datePicker : datePicker
- le patch français : datePicker-fr
- le style css : css-datePicker
Cette version de datePicker est modifié afin de faciliter son utilisation. Les paramètres du datePicker sont « francisé ».
La première des choses à faire, c’est de place les include HTML JavaScript dans la balise head, ou mieux, en bas de page (afin d’optimiser le chargement de la page).
<script type="text/javascript" src="ui.datepicker.js" mce_src="ui.datepicker.js"></script>
<script type="text/javascript" src="ui.datepicker-fr.js" mce_src="ui.datepicker-fr.js"></script>
Le css, quant à lui, doit être inclu dans le header HTML :
<link type="text/css" rel="stylesheet" href="ui.datePicker.css" mce_href="ui.datePicker.css" />
Pour ce qui est du code HTML à mettre en place :
<input type="text" name="maDate" id="maDate" class="date_input" value="" />
Le code JavaScript permettant l’initialisation du calendrier datePicker :
jQuery(document).ready(function() {
jQuery.datepicker.setDefaults(jQuery.datepicker.regional['fr']);
jQuery("#maDate").mousedown(function(){
jQuery("#maDate").datepicker('change', {dateFormat: 'dd-mm-yy', firstDay:1 }).attr("readonly","readonly");
});
});
Cette ligne permet d’attendre la fin du chargement de la page pour lancer le code JavaScript suivant :
jQuery(document).ready(function() {});
Cette ligne permet de spécifier le fichier de langue utilisé :
jQuery.datepicker.setDefaults(jQuery.datepicker.regional['fr']);
Cette ligne permet de définir les paramètres du calendrier lorsqu’il y aura un clic dans le champ de saisie :
jQuery("#maDate").mousedown(function(){
jQuery("#maDate").datepicker('change', {dateFormat: 'dd-mm-yy', firstDay:1 }).attr("readonly","readonly");
});
Ici, dans notre cas, le champ de saisie »maDate » devient seulement lisible, et ne peut être modifié manuellement.
La date affiché est au format français, mais peut être modifié dans le paramètrage du datePicker.
Si vous souhaitez ajouter des bornes au datePicker, il suffit, dans les paramètres, d’ajouter ces codes (nombre en jours par rapport à today) :
minDate:'-36500', maxDate:'+36500'
En PHP, lorsque vous récupérer la date français, il vous faut la reconvertir en date US (pour MySQL par exemple), vous pouvez utiliser cette petite fonction :
static function dateFr($sDate, $sType=''){
@date_default_timezone_set('Europe/Paris');
switch($sType){
case "fr2my" : // renvoi une date simple en anglais
$sDateReturn = ereg_replace('^([0-9]{1,2})-([0-9]{1,2})-([0-9]{2,4})$', '\\3-\\2-\\1', $sDate);
break;case "my2fr": // renvoi une date simple en français
if(!empty($sDate)&&$sDate!="0000-00-00")
$sDateReturn = substr($sDate,8,2).'-'.substr($sDate,5,2).'-'.substr($sDate,0,4);
else
$sDateReturn = '';
break;case "my2frTxt" : // renvoi une date simple texte en français
if(!empty($sDate)&&$sDate!='0000-00-00'){
setlocale(LC_TIME, "fr_FR@euro","fr_FR","fr","FR");
$sDateReturn=strftime("%d %B %Y",strtotime($sDate));
}
else
$sDateReturn = '';
break;
case « my2frTxtShort » : // renvoi une date simple texte en français
if(!empty($sDate)&&$sDate!=’0000-00-00′){
setlocale(LC_TIME, « fr_FR@euro », »fr_FR », »fr », »FR »);
$sDateReturn=strftime(« %d %b %Y »,strtotime($sDate));
}
else
$sDateReturn = »;
break;
case « my2frTxtTime » : // renvoi une date et l’heure texte en français (avec le « à »)
if(!empty($sDate)){
setlocale(LC_TIME, « fr_FR@euro », »fr_FR », »fr », »FR »);
$sDateReturn=strftime(« %d %B %Y à %H:%M »,strtotime($sDate));
}
else
$sDateReturn = $sDate;
break;
case « my2frTxtFull » : // renvoi une date et l’heure basique en français (sans le « à »)
if(!empty($sDate)){
setLocale(LC_TIME, « fr_FR@euro », »fr_FR », »fr », »FR »);
$sDateReturn = strftime(« %d %B %Y %H:%M:%S »,strtotime($sDate));
}
else
$sDateReturn = $sDate;
break;
case « frTxt » : // renvoi la date/time actuelle dont les critères sont spécifiés dans $sDate
setLocale(LC_TIME, « fr_FR@euro », »fr_FR », »fr », »FR »);
$sDateReturn = strftime($sDate,time());
break;
case « my2Picker » : // renvoi une date formaté pour le datePicker new Date(2005, 1 – 1, 26)
list($yTmp,$mTmp,$dTmp)=explode(« - »,$sDate);
$dateTmp=mktime(0,0,0,$mTmp,($dTmp+1),$yTmp);
$sDateReturn= »new Date(« .date(‘Y’,$dateTmp). », « .(date(‘n’,$dateTmp)-1). », « .date(‘d’,$dateTmp). ») »;
break;
default: // n’effectué aucune opération sur la date
if($sDate==’0000-00-00′){
$sDateReturn = »;
}
else{
$sDateReturn = $sDate;
}
break;
}// end swicth
return $sDateReturn;
}//end function dateFr
Il vous suffira d’appeler comme ceci :
dateFr($_REQUEST['maDate'], 'fr2my');
En espérant avoir apporté un peu d’aide …. vous pouvez toujours laisser vos commentaires, réflexion, et correction !
J’ai eu l’occasion dans mon boulot de découvrir JQUERY, la fameuse librairie JavaScript permettant d’appliquer des actions sur des évènements.
A force de l’utiliser et de la « défoncer » dans tous les sens, je commence à connaître quelques techniques d’utilisation et d’optimisation. A savoir, cette librairie à l’avantage d’être compatible avec tous les navigateurs.
Sa mise en place passe par l’inclusion HTML de la librairie (<script type= »text/javascript » src= »jquery.js » mce_src= »jquery.js »></script>), et permet d’accèder à une liste de fonctions et méthodes assez intéressante. Je citerai rapidement :
L’utilisation de plugin additionnels permet d’étendre les possbilitées :
JQUERY permet facilement d’accèder à l’arbre DOM de la page JavaScript, de mettre en place des Triggers/Ecouteur sur des évènements liés à des objets de l’arbre.
Exemple :
$(document).ready(function(){
});
Ce code permet d’executer des actions lorsque la page est correctement chargée. Ainsi, on va pouvoir ajouter des triggers sur des balises.
$('#maDiv').click(function(){
$this.hide();
}
Ce trigger permet, lorsqu’on clique sur l’élément dont l’id sera ‘maDiv’ de le masquer.
La suite va venir, avec de vrais exemples et des démos.
