I. Introduction▲

jQuery est une bibliothèque très complète pour Javascript. Elle vous permettra de faciliter l'écriture de script dans le code HTML des de vos pages Web.
Cette bibliothèque comprend entre autre le parcours et la modification du DOM, la gestion des événements, la manipulation des feuilles de style, la gestion des plugins, AJAX et des utilitaires. Apprenez à intégrer cette bibliothèque, en utilisant une méthode de formation structurée, pas à pas et orientée pratique.
Avec la méthode "Développement Facile", vous allez apprendre à développer des sites web exceptionnels, que vos visiteurs adoreront !
Retrouvez un extrait de la formation gratuite "jQuery Facile", composée de plus de 30 cours professionnels pour vous aider à progresser rapidement avec la maîtrise du jQuery.

II. Créez en 2 temps 3 mouvements un menu accordéon avec le Framework jQuery UI▲

Dans cette vidéo, apprenez à créer très rapidement un menu accordéon avec le widget "accordion" de jQuery UI.
Les menus accordéons sont un ensemble de panneaux que l'utilisateur peut ouvrir et fermer pour une meilleure lisibilité.
Découvrez le widget "accordion" avec ses options, ses méthodes et les événements associés.


Ci-dessous, l'exemple de code

 
Sélectionnez

<!DOCTYPE html> 
<html lang="fr"> 
<head> 
	<!-- 
	/**
	
	  The Initial Developer of the Original Code is
	  Matthieu  - http://www.programmation-facile.com/
	  Portions created by the Initial Developer are Copyright (C) 2013
	  the Initial Developer. All Rights Reserved.
	
	  Contributor(s) :
	
	 */
	
	<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
	 --> 
	<title>jQuery UI</title> 
	<meta charset="UTF-8">
	
	<!--- <link href="jquery-ui-1.10.4/css/ui-lightness/jquery-ui-1.10.4.css" rel="stylesheet"> -->
	<link href="jquery-ui-1.10.4/css/custom-theme/jquery-ui-1.10.4.custom.css" rel="stylesheet">
	<script src="jquery-ui-1.10.4/js/jquery-1.10.2.js"></script>
	<script src="jquery-ui-1.10.4/js/jquery-ui-1.10.4.js"></script>
	
	<script>
	/**
	 * Création d'un menu de type accordion
	 * @return {[type]} [description]
	 */
	$(function()
	{ 
		$("#accordion").accordion(); 
	});  
	
	</script>
	
	
	<style>
	body{
		font-size: 12px;
		font-family: Arial;
	}
	
	p { padding: 10px;} 
	
	/* la largeur du menu */
	#accordion { width: 750px;}
	
	/* la taille du titre de chaque menu */
	h3.ui-accordion-header { font-size: 18px;} 
	
	/* la taille du contenu des panneaux */
	div.ui-accordion-content { font-size: 12px;}
	
	</style>

</head>

<body>

	<header> 
		<h1>Developpement Facile</h1>
	</header>
	
	<div id="accordion"> 
		<h3><a href="#">Présentation</a></h3> 
		<div>Contenu de Présentation<hr>Lorem ipsum dolor sit amet, 
		consectetur adipiscing elit.
		<p>Le Lorem Ipsum est simplement du faux texte employé dans la composition et la mise en page avant impression. Le Lorem Ipsum est le faux texte standard de l'imprimerie depuis les années 1500, quand un peintre anonyme assembla ensemble des morceaux de texte pour réaliser un livre spécimen de polices de texte. Il n'a pas fait que survivre cinq siècles, mais s'est aussi adapté à la bureautique informatique, sans que son contenu n'en soit modifié. Il a été popularisé dans les années 1960 grâce à la vente de feuilles Letraset contenant des passages du Lorem Ipsum, et, plus récemment, par son inclusion dans des applications de mise en page de texte, comme Aldus PageMaker.</p> 
		</div> 
	
		<h3><a href="#">Formations</a></h3> 
		<div>Contenu de Formations<hr>Lorem ipsum dolor sit amet, 
		consectetur adipiscing elit.
		<p>On sait depuis longtemps que travailler avec du texte lisible et contenant du sens est source de distractions, et empêche de se concentrer sur la mise en page elle-même. L'avantage du Lorem Ipsum sur un texte générique comme 'Du texte. Du texte. Du texte.' est qu'il possède une distribution de lettres plus ou moins normale, et en tout cas comparable avec celle du français standard. De nombreuses suites logicielles de mise en page ou éditeurs de sites Web ont fait du Lorem Ipsum leur faux texte par défaut, et une recherche pour 'Lorem Ipsum' vous conduira vers de nombreux sites qui n'en sont encore qu'à leur phase de construction. Plusieurs versions sont apparues avec le temps, parfois par accident, souvent intentionnellement (histoire d'y rajouter de petits clins d'oeil, voire des phrases embarassantes).</p> 
		</div>
	
		<h3><a href="#">Vos Questions</a></h3> 
		<div>Contenu de Vos Questions<hr>Lorem ipsum dolor sit amet, 
		consectetur adipiscing elit.
		<p>Contrairement à une opinion répandue, le Lorem Ipsum n'est pas simplement du texte aléatoire. Il trouve ses racines dans une oeuvre de la littérature latine classique datant de 45 av. J.-C., le rendant vieux de 2000 ans. Un professeur du Hampden-Sydney College, en Virginie, s'est intéressé à un des mots latins les plus obscurs, consectetur, extrait d'un passage du Lorem Ipsum, et en étudiant tous les usages de ce mot dans la littérature classique, découvrit la source incontestable du Lorem Ipsum. Il provient en fait des sections 1.10.32 et 1.10.33 du "De Finibus Bonorum et Malorum" (Des Suprêmes Biens et des Suprêmes Maux) de Cicéron. Cet ouvrage, très populaire pendant la Renaissance, est un traité sur la théorie de l'éthique. Les premières lignes du Lorem Ipsum, "Lorem ipsum dolor sit amet...", proviennent de la section 1.10.32.
	
		L'extrait standard de Lorem Ipsum utilisé depuis le XVIè siècle est reproduit ci-dessous pour les curieux. Les sections 1.10.32 et 1.10.33 du "De Finibus Bonorum et Malorum" de Cicéron sont aussi reproduites dans leur version originale, accompagnée de la traduction anglaise de H. Rackham (1914).</p>
		</div>
	
		<h3><a href="#">Nous Contacter</a></h3> 
		<div>Contenu de Nous Contacter<hr>Lorem ipsum dolor sit amet, 
		consectetur adipiscing elit.
		<p>Plusieurs variations de Lorem Ipsum peuvent être trouvées ici ou là, mais la majeure partie d'entre elles a été altérée par l'addition d'humour ou de mots aléatoires qui ne ressemblent pas une seconde à du texte standard. Si vous voulez utiliser un passage du Lorem Ipsum, vous devez être sûr qu'il n'y a rien d'embarrassant caché dans le texte. Tous les générateurs de Lorem Ipsum sur Internet tendent à reproduire le même extrait sans fin, ce qui fait de lipsum.com le seul vrai générateur de Lorem Ipsum. Iil utilise un dictionnaire de plus de 200 mots latins, en combinaison de plusieurs structures de phrases, pour générer un Lorem Ipsum irréprochable. Le Lorem Ipsum ainsi obtenu ne contient aucune répétition, ni ne contient des mots farfelus, ou des touches d'humour.</p>
		</div> 
	
		<h3><a href="#">Administration</a></h3> 
		<div>Contenu de l'Administration<hr>Lorem ipsum dolor sit amet, 
		consectetur adipiscing elit.
		<p>"Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?"</p>
		</div> 
	</div> 
	
	<br /><br />
	<footer> 
		<hr> 
		<p>Copyright www.Developpement-Facile.com 2014</p>  
	</footer> 
</body> 
</html>

III. Utilisez les possibilités du Framework jQuery UI pour votre menu accordéon▲

Découvrez dans cette vidéo, les options avancées pour personnaliser le menu accordéon que vous aurez créé précédement.


Ci-dessous, l'exemple de code

 
Sélectionnez

<!DOCTYPE html> 
<html lang="fr"> 
<head> 
	<!-- 
	/**
	
	  The Initial Developer of the Original Code is
	  Matthieu  - http://www.programmation-facile.com/
	  Portions created by the Initial Developer are Copyright (C) 2013
	  the Initial Developer. All Rights Reserved.
	
	  Contributor(s) :
	
	 */
	
	<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
	 --> 
	<title>jQuery UI</title> 
	<meta charset="UTF-8">
	
	<!--- <link href="jquery-ui-1.10.4/css/ui-lightness/jquery-ui-1.10.4.css" rel="stylesheet"> -->
	<link href="jquery-ui-1.10.4/css/custom-theme/jquery-ui-1.10.4.custom.css" rel="stylesheet">
	<script src="jquery-ui-1.10.4/js/jquery-1.10.2.js"></script>
	<script src="jquery-ui-1.10.4/js/jquery-ui-1.10.4.js"></script>
	
	<script>
	/**
	 * Création d'un menu de type accordion
	 * @return {[type]} [description]
	 */
	$(function()
	{ 
		$("#activate").button();
		
		// ajoute des icones avec les titres du menu
		var icons = { header: "ui-icon-circle-arrow-e", activeHeader: "ui-icon-circle-arrow-s" };
	
		//var options = { active: false, collapsible: true }; // ferme l'accordion par défaut
		
		/**
		 * le panneau 3 ouvert par défaut
		 * des icones sur les titres
		 * une hauteur fixe avec scrollbar pour le contenu des panneaux
		 * ouverture des panneaux au survol de la souris
		 * @type {Object}
		 */
		//var options = {active: 2, icons: icons, heightStyle: "fill", event: "mouseover"};
		var options = {active: 2, icons: icons, heightStyle: "fill"};
	
	
		//var options = {active: 2, icons: false}; // avec le panneau 3 ouvert par défaut et sans icones
	
		$("#accordion").accordion(options); 
	
		// avec l'option d'ouverture d'un panneau définit
		$("#activate").click(function()
		{ 
			$("#accordion").accordion({active : parseInt($("#choix").val())}); 
		}); 
	});  
	
	</script>
	
	
	<style>
	body{
		font-size: 12px;
		font-family: Arial;
	}
	
	p { padding: 10px;} 
	
	/* la largeur du menu */
	#accordion { width: 750px;}
	
	/* la hauteur des panneaux de l'accordion */
	#box { height: 400px;}  
	
	/* la taille du titre de chaque menu */
	h3.ui-accordion-header { font-size: 15px;} 
	
	/* la taille du contenu des panneaux */
	div.ui-accordion-content { font-size: 11px;}
	
	</style>

</head>

<body>

	<header> 
		<h1>Developpement Facile</h1>
	</header>
	
	<p>
		<label for="choix">Choisissez le panneau à ouvrir</label> 
		<input id="choix"><br> 
		<button type="button" id="activate">Ouvrir</button>
	</p> 
	
	<div id="box">
		<div id="accordion"> 
			<h3><a href="#">Présentation</a></h3> 
			<div>Contenu de Présentation<hr>Lorem ipsum dolor sit amet, 
			consectetur adipiscing elit.
			<p>Le Lorem Ipsum est simplement du faux texte employé dans la composition et la mise en page avant impression. Le Lorem Ipsum est le faux texte standard de l'imprimerie depuis les années 1500, quand un peintre anonyme assembla ensemble des morceaux de texte pour réaliser un livre spécimen de polices de texte. Il n'a pas fait que survivre cinq siècles, mais s'est aussi adapté à la bureautique informatique, sans que son contenu n'en soit modifié. Il a été popularisé dans les années 1960 grâce à la vente de feuilles Letraset contenant des passages du Lorem Ipsum, et, plus récemment, par son inclusion dans des applications de mise en page de texte, comme Aldus PageMaker.</p> 
			</div> 
	
			<h3><a href="#">Formations</a></h3> 
			<div>Contenu de Formations<hr>Lorem ipsum dolor sit amet, 
			consectetur adipiscing elit.
			<p>On sait depuis longtemps que travailler avec du texte lisible et contenant du sens est source de distractions, et empêche de se concentrer sur la mise en page elle-même. L'avantage du Lorem Ipsum sur un texte générique comme 'Du texte. Du texte. Du texte.' est qu'il possède une distribution de lettres plus ou moins normale, et en tout cas comparable avec celle du français standard. De nombreuses suites logicielles de mise en page ou éditeurs de sites Web ont fait du Lorem Ipsum leur faux texte par défaut, et une recherche pour 'Lorem Ipsum' vous conduira vers de nombreux sites qui n'en sont encore qu'à leur phase de construction. Plusieurs versions sont apparues avec le temps, parfois par accident, souvent intentionnellement (histoire d'y rajouter de petits clins d'oeil, voire des phrases embarassantes).</p> 
			</div>
	
			<h3><a href="#">Vos Questions</a></h3> 
			<div>Contenu de Vos Questions<hr>Lorem ipsum dolor sit amet, 
			consectetur adipiscing elit.
			<p>Contrairement à une opinion répandue, le Lorem Ipsum n'est pas simplement du texte aléatoire. Il trouve ses racines dans une oeuvre de la littérature latine classique datant de 45 av. J.-C., le rendant vieux de 2000 ans. Un professeur du Hampden-Sydney College, en Virginie, s'est intéressé à un des mots latins les plus obscurs, consectetur, extrait d'un passage du Lorem Ipsum, et en étudiant tous les usages de ce mot dans la littérature classique, découvrit la source incontestable du Lorem Ipsum. Il provient en fait des sections 1.10.32 et 1.10.33 du "De Finibus Bonorum et Malorum" (Des Suprêmes Biens et des Suprêmes Maux) de Cicéron. Cet ouvrage, très populaire pendant la Renaissance, est un traité sur la théorie de l'éthique. Les premières lignes du Lorem Ipsum, "Lorem ipsum dolor sit amet...", proviennent de la section 1.10.32.
	
			L'extrait standard de Lorem Ipsum utilisé depuis le XVIè siècle est reproduit ci-dessous pour les curieux. Les sections 1.10.32 et 1.10.33 du "De Finibus Bonorum et Malorum" de Cicéron sont aussi reproduites dans leur version originale, accompagnée de la traduction anglaise de H. Rackham (1914).</p>
			</div>
	
			<h3><a href="#">Nous Contacter</a></h3> 
			<div>Contenu de Nous Contacter<hr>Lorem ipsum dolor sit amet, 
			consectetur adipiscing elit.
			<p>Plusieurs variations de Lorem Ipsum peuvent être trouvées ici ou là, mais la majeure partie d'entre elles a été altérée par l'addition d'humour ou de mots aléatoires qui ne ressemblent pas une seconde à du texte standard. Si vous voulez utiliser un passage du Lorem Ipsum, vous devez être sûr qu'il n'y a rien d'embarrassant caché dans le texte. Tous les générateurs de Lorem Ipsum sur Internet tendent à reproduire le même extrait sans fin, ce qui fait de lipsum.com le seul vrai générateur de Lorem Ipsum. Iil utilise un dictionnaire de plus de 200 mots latins, en combinaison de plusieurs structures de phrases, pour générer un Lorem Ipsum irréprochable. Le Lorem Ipsum ainsi obtenu ne contient aucune répétition, ni ne contient des mots farfelus, ou des touches d'humour.</p>
			</div> 
	
			<h3><a href="#">Administration</a></h3> 
			<div>Contenu de l'Administration<hr>Lorem ipsum dolor sit amet, 
			consectetur adipiscing elit.
			<p>"Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?"</p>
			</div> 
		</div> 
	</div> 
	
	<br /><br />
	<footer> 
		<hr> 
		<p>Copyright www.Developpement-Facile.com 2014</p>  
	</footer> 
</body> 
</html>

IV. Profitez d'AJAX avec votre menu accordéon et le Framework JavaScript jQuery UI▲

Grâce à AJAX vous aller pouvoir très simplement renseigner les panneaux de votre menu accordéon .


Ci-dessous, l'exemple de code.
Le fichier principal :

 
Sélectionnez

<!DOCTYPE html> 
<html lang="fr"> 
<head> 
	<!-- 
	/**
	
	  The Initial Developer of the Original Code is
	  Matthieu  - http://www.programmation-facile.com/
	  Portions created by the Initial Developer are Copyright (C) 2013
	  the Initial Developer. All Rights Reserved.
	
	  Contributor(s) :
	
	 */
	
	<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
	 --> 
	<title>jQuery UI</title> 
	<meta charset="UTF-8">
	
	<!--- <link href="jquery-ui-1.10.4/css/ui-lightness/jquery-ui-1.10.4.css" rel="stylesheet"> -->
	<link href="jquery-ui-1.10.4/css/custom-theme/jquery-ui-1.10.4.custom.css" rel="stylesheet">
	<script src="jquery-ui-1.10.4/js/jquery-1.10.2.js"></script>
	<script src="jquery-ui-1.10.4/js/jquery-ui-1.10.4.js"></script>
	
	<script>
	
	/**
	 * Création d'un menu de type accordion
	 * @return {[type]} [description]
	 */
	$(function()
	{ 
		// ajoute des icones avec les titres du menu
		var icons = { header: "ui-icon-circle-arrow-e", activeHeader: "ui-icon-circle-arrow-s" };
	
		//var options = { active: false, collapsible: true }; // ferme l'accordion par défaut
		
		/**
		 * le panneau 3 ouvert par défaut
		 * des icones sur les titres
		 * une hauteur fixe avec scrollbar pour le contenu des panneaux
		 * animation ouverture et fermeture des panneaux en ms
		 * @type {Object}
		 */
		var options = {icons: icons, heightStyle: "fill", animate: 400 };
	
	
		$("#accordion").accordion(options); 
	
	});  
	
	
	/**
	 * Activation du chargement via AJAX du contenu de l'accordion
	 * @return {[type]} [description]
	 */
	$(function()
	{
	     $( "#accordion" ).accordion({
	        collapsible: true,
	        active : false,
	        cache: true,// gestion du cache
	
	        activate: function (e, ui) {
	          	$url = $(ui.newHeader[0]).children('a').attr('href');
		  		
		  		$.get($url, function (data) {
		     		$(ui.newHeader[0]).next().html(data);
	          	});
	        }
	     });
	});
	
	</script>
	
	
	<style>
	body{
		font-size: 12px;
		font-family: Arial;
	}
	
	p { padding: 10px;} 
	
	/* la largeur du menu */
	#accordion { width: 750px;}
	
	/* la hauteur des panneaux de l'accordion */
	#box { height: 400px;}  
	
	/* la taille du titre de chaque menu */
	h3.ui-accordion-header { font-size: 15px;} 
	
	/* la taille du contenu des panneaux */
	div.ui-accordion-content { font-size: 11px;}

</style>

</head>

<body>

	<header> 
		<h1>Developpement Facile</h1>
	</header>
	
	<div id="box">
		<div id="accordion"> 
			<h3><a href="07-presentation.html">Présentation</a></h3> 
			<div><p>Chargement en cours...</p></div>
	
			<h3><a href="07-formation.html">Formations</a></h3> 
			<div><p>Chargement en cours...</p></div>
	
			<h3><a href="07-questions.html">Vos Questions</a></h3> 
			<div><p>Chargement en cours...</p></div>
	
			<h3><a href="07-nous-contacter.html">Nous Contacter</a></h3> 
			<div><p>Chargement en cours...</p></div>
	
			<h3><a href="07-admin.html">Administration</a></h3> 
			<div><p>Chargement en cours...</p></div> 
		</div> 
	</div> 
	
	<br /><br />
	<footer> 
		<hr> 
		<p>Copyright www.Developpement-Facile.com 2014</p>  
	</footer> 
</body> 
</html>

Le fichier 07-presentation.html :

 
Sélectionnez

<h2>Accueil</h2>
<p>Le Lorem Ipsum est simplement du faux texte employé dans la composition et la mise en page avant impression. Le Lorem Ipsum est le faux texte standard de l'imprimerie depuis les années 1500, quand un peintre anonyme assembla ensemble des morceaux de texte pour réaliser un livre spécimen de polices de texte. Il n'a pas fait que survivre cinq siècles, mais s'est aussi adapté à la bureautique informatique, sans que son contenu n'en soit modifié. Il a été popularisé dans les années 1960 grâce à la vente de feuilles Letraset contenant des passages du Lorem Ipsum, et, plus récemment, par son inclusion dans des applications de mise en page de texte, comme Aldus PageMaker.</p>

Le fichier 07-formation.html :

 
Sélectionnez

<h2>Formations</h2>
<p>On sait depuis longtemps que travailler avec du texte lisible et contenant du sens est source de distractions, et empêche de se concentrer sur la mise en page elle-même. L'avantage du Lorem Ipsum sur un texte générique comme 'Du texte. Du texte. Du texte.' est qu'il possède une distribution de lettres plus ou moins normale, et en tout cas comparable avec celle du français standard. De nombreuses suites logicielles de mise en page ou éditeurs de sites Web ont fait du Lorem Ipsum leur faux texte par défaut, et une recherche pour 'Lorem Ipsum' vous conduira vers de nombreux sites qui n'en sont encore qu'à leur phase de construction. Plusieurs versions sont apparues avec le temps, parfois par accident, souvent intentionnellement (histoire d'y rajouter de petits clins d'oeil, voire des phrases embarassantes).</p>

Le fichier 07-questions.html :

 
Sélectionnez

<h2>Vos Questions</h2>
<p>Contrairement à une opinion répandue, le Lorem Ipsum n'est pas simplement du texte aléatoire. Il trouve ses racines dans une oeuvre de la littérature latine classique datant de 45 av. J.-C., le rendant vieux de 2000 ans. Un professeur du Hampden-Sydney College, en Virginie, s'est intéressé à un des mots latins les plus obscurs, consectetur, extrait d'un passage du Lorem Ipsum, et en étudiant tous les usages de ce mot dans la littérature classique, découvrit la source incontestable du Lorem Ipsum. Il provient en fait des sections 1.10.32 et 1.10.33 du "De Finibus Bonorum et Malorum" (Des Suprêmes Biens et des Suprêmes Maux) de Cicéron. Cet ouvrage, très populaire pendant la Renaissance, est un traité sur la théorie de l'éthique. Les premières lignes du Lorem Ipsum, "Lorem ipsum dolor sit amet...", proviennent de la section 1.10.32.

L'extrait standard de Lorem Ipsum utilisé depuis le XVIè siècle est reproduit ci-dessous pour les curieux. Les sections 1.10.32 et 1.10.33 du "De Finibus Bonorum et Malorum" de Cicéron sont aussi reproduites dans leur version originale, accompagnée de la traduction anglaise de H. Rackham (1914).</p>

Le fichier 07-nous-contacter.html :

 
Sélectionnez

<h2>Nous Contacter</h2>
<p>Plusieurs variations de Lorem Ipsum peuvent être trouvées ici ou là, mais la majeure partie d'entre elles a été altérée par l'addition d'humour ou de mots aléatoires qui ne ressemblent pas une seconde à du texte standard. Si vous voulez utiliser un passage du Lorem Ipsum, vous devez être sûr qu'il n'y a rien d'embarrassant caché dans le texte. Tous les générateurs de Lorem Ipsum sur Internet tendent à reproduire le même extrait sans fin, ce qui fait de lipsum.com le seul vrai générateur de Lorem Ipsum. Iil utilise un dictionnaire de plus de 200 mots latins, en combinaison de plusieurs structures de phrases, pour générer un Lorem Ipsum irréprochable. Le Lorem Ipsum ainsi obtenu ne contient aucune répétition, ni ne contient des mots farfelus, ou des touches d'humour.</p>

Le fichier 07-admin.html :

 
Sélectionnez

<h2>Administration</h2>
<p>"Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?"</p>

V. Créez en 2 lignes de code un magnifique calendrier avec le Framework jQuery UI▲

Vous verrez dans cette vidéo, comment créer rapidement un calendrier avec la méthode datepicker() de jQuery UI.
Découvrez toutes les options associées à cette méthode.


Ci-dessous, le code du calendrier.

 
Sélectionnez

<!DOCTYPE html> 
<html lang="fr"> 
<head> 
	<!-- 
	/**
	
	  The Initial Developer of the Original Code is
	  Matthieu  - http://www.programmation-facile.com/
	  Portions created by the Initial Developer are Copyright (C) 2013
	  the Initial Developer. All Rights Reserved.
	
	  Contributor(s) :
	
	 */
	
	<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
	 --> 
	<title>jQuery UI</title> 
	<meta charset="UTF-8">
	
	<!--- <link href="jquery-ui-1.10.4/css/ui-lightness/jquery-ui-1.10.4.css" rel="stylesheet"> -->
	<link href="jquery-ui-1.10.4/css/custom-theme/jquery-ui-1.10.4.custom.css" rel="stylesheet">
	<script src="jquery-ui-1.10.4/js/jquery-1.10.2.js"></script>
	<script src="jquery-ui-1.10.4/js/jquery-ui-1.10.4.js"></script>
	
	<!-- recupere les langues pour la traduction du calendrier -->
	<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/i18n/jquery-ui-i18n.min.js"></script> 
	
	<script>
	
	/**
	 * Création d'un calendrier
	 * @return {[type]} [description]
	 */
	$(function() 
	{  
		// définit les options par défaut du calendrier
		$.datepicker.setDefaults({ 
			showButtonPanel: true,// affiche des boutons sous le calendrier
			showOtherMonths: true, // affiche les autres mois
			selectOtherMonths: true // possibilités de sélectionner les jours des autres mois
			});
	
		//$("#calendar").datepicker(); // affiche le calendrier par défaut
		$("#calendar").datepicker($.datepicker.regional["fr"]); // affiche le calendrier en fr 
	
	});
	
	
	</script>
	
	
	<style>
	body{
		font-size: 12px;
		font-family: Arial;
	}
	
	/* modifie la taille du calendrier */
	div.ui-datepicker { font-size: 13px;} 
	
	</style>

</head>

<body>

	<header> 
		<h1>Developpement Facile</h1>
	</header>
	
	<p><label for="calendar">Choisissez votre Date :</label> 
	<input type="text" id="calendar"></p>
	
	<br /><br />
	<footer> 
		<hr> 
		<p>Copyright www.Developpement-Facile.com 2014</p>  
	</footer> 
</body> 
</html>

VI. Personnalisez le widget calendrier à votre image avec le Framework JavaScript jQuery UI partie 2▲

Dans cette vidéo, vous verrez comment personnaliser graphiquement votre calendrier jQuery.


Ci-dessous, l'exemple de code.

 
Sélectionnez

<!DOCTYPE html> 
<html lang="fr"> 
<head>
	<!-- 
	/**
	
	  The Initial Developer of the Original Code is
	  Matthieu  - http://www.programmation-facile.com/
	  Portions created by the Initial Developer are Copyright (C) 2013
	  the Initial Developer. All Rights Reserved.
	
	  Contributor(s) :
	
	 */
	
	<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
	 -->  
	<title>jQuery UI</title> 
	<meta charset="UTF-8">
	
	<!--- <link href="jquery-ui-1.10.4/css/ui-lightness/jquery-ui-1.10.4.css" rel="stylesheet"> -->
	<link href="jquery-ui-1.10.4/css/custom-theme/jquery-ui-1.10.4.custom.css" rel="stylesheet">
	<script src="jquery-ui-1.10.4/js/jquery-1.10.2.js"></script>
	<script src="jquery-ui-1.10.4/js/jquery-ui-1.10.4.js"></script>
	
	<!-- recupere les langues pour la traduction du calendrier -->
	<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/i18n/jquery-ui-i18n.min.js"></script> 
	
	<script>
	
	/**
	 * Création d'un calendrier
	 * @return {[type]} [description]
	 */
	$(function() 
	{  
		/**
		 * Positionne le calendrier
		 * @param  {[type]} input [description]
		 * @return {[type]}       [description]
		 */
		$("#calendar").datepicker({
		    beforeShow: function (input, inst) {
		        setTimeout(function () {
		            inst.dpDiv.css({
		                top: 100,
		                left: 200
		            });
		        }, 0);
		    }
		});
	
		
		/**
		 * Ouvre le calendrier dans une fenetre de dialogue centrée
		 * @return {[type]} [description]
		 */
		$("#calendar").focus(function() { 
			// définit les options par défaut du calendrier
			$.datepicker.setDefaults({ 
				showButtonPanel: true,// affiche des boutons sous le calendrier
				showOtherMonths: true, // affiche les autres mois
				selectOtherMonths: true, // possibilités de sélectionner les jours des autres mois
				numberOfMonths: 2 // affiche plusieurs mois
				});
			$(this).datepicker("dialog", null, updateDate, $.datepicker.regional["fr"]); 
		});
	
	
	
		/**
		 * Mets à jour la date dans le champ texte
		 * @param  {[type]} date [description]
		 * @return {[type]}      [description]
		 */
		function updateDate(date) { 
			$("#calendar").val(date); 
		} 
	
	});
	
	
	
	</script>
	
	
	<style>
	body{
		font-size: 12px;
		font-family: Arial;
	}
	
	/* modifie la taille du calendrier */
	div.ui-datepicker { font-size: 13px;} 
	
	</style>

</head>

<body>

	<header> 
		<h1>Developpement Facile</h1>
	</header>
	
	<p><label for="calendar">Choisissez votre Date :</label> 
	<input type="text" id="calendar"></p>
	
	<br /><br />
	<footer> 
		<hr> 
		<p>Copyright www.Developpement-Facile.com 2014</p>  
	</footer> 
</body> 
</html>

VII. Couplez votre calendrier avec la puissance AJAX avec le Framework JavaScript jQuery UI partie 3▲

Apprenez à associer votre calendrier jQuery avec AJAX pour associer du code extérieur à votre page.


Ci-dessous, le code vue dans la vidéo.

 
Sélectionnez

<!DOCTYPE html> 
<html lang="fr"> 
<head>
<!-- 
/**

  The Initial Developer of the Original Code is
  Matthieu  - http://www.programmation-facile.com/
  Portions created by the Initial Developer are Copyright (C) 2013
  the Initial Developer. All Rights Reserved.

  Contributor(s) :

 */

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
 --> 
<title>jQuery UI</title> 
<meta charset="UTF-8">

<!--- <link href="jquery-ui-1.10.4/css/ui-lightness/jquery-ui-1.10.4.css" rel="stylesheet"> -->
<link href="jquery-ui-1.10.4/css/custom-theme/jquery-ui-1.10.4.custom.css" rel="stylesheet">
<script src="jquery-ui-1.10.4/js/jquery-1.10.2.js"></script>
<script src="jquery-ui-1.10.4/js/jquery-ui-1.10.4.js"></script>

<!-- receupere les langues pour la traduction du calendrier -->
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/i18n/jquery-ui-i18n.min.js"></script> 

<script>

/**
 * Création d'un calendrier
 * @return {[type]} [description]
 */
$(function() 
{  
	// définit les options par défaut de tous les calendriers
	$.datepicker.setDefaults($.datepicker.regional["fr"]);  // affiche le calendrier en fr 

	// définit les options par défaut du calendrier
	$.datepicker.setDefaults({ 
		showButtonPanel: true,// affiche des boutons sous le calendrier
		showOtherMonths: true, // affiche les autres mois
		selectOtherMonths: true, // possibilités de sélectionner les jours des autres mois
		showOn: "button", 			// affiche le calendrier via un bouton image
		buttonImage: "10-calendar-icon.png", 
		buttonImageOnly: true,
		changeMonth: true, // listes déroulantes pour les mois et les années
		changeYear: true,
		yearRange: "-1:+3",// le nombre d'année disponible dans la liste déroulante
		//defaultDate: "16-05-2014",// la date par défaut sélectionnée dans le calendrier
		firstDay: 1, // premier jour le lundi
		beforeShowDay: $.datepicker.noWeekends, // masque les week end
		showWeek: true, // affiche les semaines

		duration: "fast", // ajoute une animation sur le calendrier
		showAnim: "slide", 
		showOptions: {direction: "left"}
		/*minDate: "+3", // les dates sélectionnables (minimum et maximum)
		maxDate: "+13" */
		});

	//$("#calendar").datepicker();

	/**
	 * Gestion d'une date de départ et d'une date de retour
	 * @param  
	 * @return {[type]}       [description]
	 */
	$("#calendar_from").datepicker({ 
		onClose: function(date) { 
			$("#calendar_to").datepicker("option", "minDate", date); 
		} 
	}); 

	$("#calendar_to").datepicker(); 


	/**
	 * Communication avec PHP via AJAX lors de la sélection de la date
	 * @param  
	 * @return {[type]}              [description]
	 */
	$("#calendar").datepicker ({ 
		onSelect : function (dateTexte){ 
			var data = {date : dateTexte}; 
			$.ajax ({ // appel du script php
				url : "10-ajax.php", 
				data : data, 
				complete : function (xhr, result){ 
					// si il y a une erreur
					if (result != "success")
					{
						$("#confirmation").html ("<b>Erreur durant votre résevertion, veuillez recommencer plus tard.</b>") ; // ajout de la reponse php sous forme HTML	
						return; 	
					} 
					var retour = xhr.responseText; 
					$("#confirmation").html (retour) ; // ajout de la reponse php sous forme HTML
				} 
			}); 
		} 
	}); 

});

/**
 * Affiche les différents formats des dates
 * @return {[type]} [description]
 */
$(function() { 
	$("#calendar1").datepicker({dateFormat: "mm-dd-yy", appendText: " mm-dd-yy - défaut ango-saxon"}); 
}); 

$(function() { 
	$.datepicker.setDefaults($.datepicker.regional["fr"]); 
	$("#calendar2").datepicker({dateFormat: "dd-mm-yy", appendText: " dd-mm-yy - défaut français"}); 
}); 

$(function() { 
	$("#calendar3").datepicker({dateFormat: "yy-mm-dd", appendText: " yy-mm-dd"}); 
}); 

$(function() { 
	$("#calendar4").datepicker({dateFormat: "@", appendText: " timestamp Unix"}); 
}); 

$(function() { 
	$("#calendar5").datepicker({dateFormat: "!", appendText: " ticks Windows"}); 
}); 

$(function() { 
	$("#calendar6").datepicker({dateFormat: $.datepicker.COOKIE, appendText: " COOKIE"}); 
}); 

$(function() { 
	$("#calendar7").datepicker({dateFormat: "'Le' d 'du mois de' MM yy", appendText: " avec du texte"}); 
});

</script>


<style>
body{
	font-size: 12px;
	font-family: Arial;
}

/* modifie la taille du calendrier */
div.ui-datepicker { font-size: 13px;} 

</style>

</head>

<body>
	<header> 
		<h1>Developpement Facile</h1>
	</header>
	
	<p><label for="calendar">Choisissez votre Date :</label> 
	<input type="text" id="calendar"></p>
	
	<div id="confirmation"></div> 
	<br />
	
	<p><label for="calendar_from">Date de départ</label> 
	<input type="text" id="calendar_from" name="calendar_from"></p> 
	
	<p><label for="calendar_to">Date de retour</label> 
	<input type="text" id="calendar_to" name="calendar_to"></p> 
	
	<br /><br />
	
	<p><label for="calendar1">Date :</label> 
	<input type="text" id="calendar1"></p> 
	
	<p><label for="calendar2">Date :</label> 
	<input type="text" id="calendar2"></p> 
	
	<p><label for="calendar3">Date :</label> 
	<input type="text" id="calendar3"></p> 
	
	<p><label for="calendar4">Date :</label> 
	<input type="text" id="calendar4"></p> 
	
	<p><label for="calendar5">Date :</label> 
	<input type="text" id="calendar5"></p> 
	
	<p><label for="calendar6">Date :</label> 
	<input type="text" id="calendar6"></p> 
	
	<p><label for="calendar7">Date :</label> 
	<input type="text" id="calendar7" style="width: 200px;"></p> 
	
	
	<br /><br />
	
	<footer> 
		<hr> 
		<p>Copyright www.Developpement-Facile.com 2014</p>  
	</footer> 
</body> 
</html>

Enregister l'image suivante pour l'exemple de code : 10-calendar-icon.png

Le code php :

 
Sélectionnez

<!-- 
/**

  The Initial Developer of the Original Code is
  Matthieu  - http://www.programmation-facile.com/
  Portions created by the Initial Developer are Copyright (C) 2013
  the Initial Developer. All Rights Reserved.

  Contributor(s) :

 */

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
 -->
<? 
	$date = $_REQUEST["date"]; 
	$texte = "Votre r&eacute;servation du <b> $date </b> est confirm&eacute;e"; 
	$texte = utf8_encode($texte); 
	echo ($texte); 
?>

VIII. Recevez gratuitement la formation "jQuery UI Facile"▲

Si vous souhaitez aller plus loin dans la création de sites Web exceptionnel, vous pouvez recevoir gratuitement la formation "jQuery UI Facile" avec des cours pas à pas, accompagnés des codes source commentés.
Ainsi, vous progressez à votre rythme, avec un suivi personnalisé et individuel. Vous avez la possibilité de poser toutes vos questions techniques sous chaque cours.
Vous allez ainsi découvrir comment utiliser le framework jQuery et l'integrer à vos page Web pour les rendre exceptionnels.

Formation jQuery UI Facile !
Cliquez simplement ici pour recevoir gratuitement la Formation jQuery UI Facile !Cliquez simplement ici pour recevoir gratuitement la Formation jQuery UI Facile !

IX. Remerciements▲

Merci beaucoup à l'équipe de rédaction de Developpez.com de contribuer à la diffusion de ce tutoriel.
J'adresse également un merci tout particulier à Jean-PhilippeJean-Philippe pour sa relecture orthographique.