Articles suivants »

Archive pour la catégorie 'Framework'

Plugin jQuery : "Sparks" le plugin qui fait des étincelles !

Jeudi 28 mai 2009

Aujourd'hui je vous présente le plugin jQuery "Sparks" qui signifie "étincelles".

Ce plugin est trés graphique et plutôt sympa au premier coup d'oeil j'ai cru a du flash...

rf_sparks

Le site http://redflex.co.uk/ utilise ce plugin vous pouvez donc vous rendre là bas pour voir une démonstration.

On peut modifier le nombre d'étincelles a notre guise avec différentes images... Comme l'explique son auteur sur le site officiel du plugin.

Voir la démonstration

Voir le site officiel

Publié dans Code, Framework, jQuery | Aucun commentaire »

Création d'un nouveau projet web.

Lundi 25 mai 2009

ProjectDeploy.org est un site web qui permet de créer une structure de base pour votre projet web.

picture-14

Par exemple on peut choisir si on fait nos page en html 4.01 ou xhtml 1.0, si on veut faire du transitional ou du strict, si on utilise du css, si on veut inclure du jquery, des plugins etc...

Bref vous définissez vos options et lorsque vous avez fini cliquez sur "deploy!". A ce moment la vous pourez télécharger un fichier zip avec une "structure" de base pour votre projet.

Publié dans CSS, Code, Framework, jQuery, xHTML | Aucun commentaire »

Animons nos page avec jQuery

Dimanche 24 mai 2009

Aujourd'hui un exemple pour animer vos pages web grâce à jQuery.

Nous allons utiliser la fonction .animate() celle-ci permet de modifier le css d'un ou plusieurs élément(s) de votre page.

Dans cet exemple nous allons travailler avec cinq liens qui vont nous permettre de faire bouger une balise html <p>.

Dans la balise body placez :

<a href="javascript:void(0)" onclick="anim1();">anim1();</a>
<a href="javascript:void(0)" onclick="anim2();">anim2();</a>
<a href="javascript:void(0)" onclick="anim3();">anim3();</a>
<a href="javascript:void(0)" onclick="anim4();">anim4();</a>
<a href="javascript:void(0)" onclick="anim5();">anim5();</a>
<p id="p1">Paragraph with some text</p>

Puis dans le head ajouter la bibliotheque jQuery ainsi que nos différentes fonctions :

<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript">
function anim1(){
	$("#p1").animate(
		{
			paddingLeft:"100px",
			paddingTop:"0px"
		},
		1000
	);
}
function anim2(){
	$("#p1").animate(
		{
			paddingLeft: "200px",
			paddingTop:"0px"
		},
		1000
	);
}
function anim3(){
	$("#p1").animate(
		{
			paddingLeft:"200px",
			paddingTop:"100px"
		},
		1000
	);
}
function anim4(){
	$("#p1").animate(
		{
			paddingLeft:"100px",
			paddingTop:"100px"
		},
		1000
	);
}
function anim5(){
	$("#p1").animate(
		{
			paddingLeft: "200px",
			paddingTop:"0px"
		},
		1000
	);
}
</script>

La premiere ligne inclus la librairie jQuery : "jquery-1.3.2.min.js". Ensuite j'ai créer 5 fonctions qui modifieront #p1 comme en CSS la balise avec l'id qui sera égale à p1 soit une balise avec id="p1".
Avec la fonction animate je modifie une ou plusieurs valeurs de CSS pour pouvoir déplacer mon élément sur ma page.
N'hésitez pas à ajouter des commentaires si vous avez besoin de plus d'explications.

Voir la démonstration

Une seconde démonstration. Dans celle-ci j'ai ajouté la fonction fadeTo() qui permet de modifier l'opacité du texte.
Voir la démonstration 2

Publié dans CSS, Code, Framework, jQuery, xHTML | Aucun commentaire »

jQuery : On commence...

Samedi 23 mai 2009

Voilà le premier article sur jQuery. Mais qu'est-ce que jQuery ?
jQuery est un "framework" javascript qui permet d'utiliser le DOM, et d'agrémenter vos pages par des animations, ou différentes fonctionnalités AJAX.

Pour utiliser jQuery nous allons dans un premier temps télécharger la librairie sur le site officiel.

Ensuite ajouter la dans votre page html entre les balises <head> et </head> grâce à


<script type="text/javascript" src="jquery.js"></script>

Maintenant nous pouvons utiliser jQuery grâce à : $(...)

Ceci $() va nous permettre d'utiliser les différentes fonctions de jQuery.
Par exemple si dans notre page nous avons <div id="mondiv">contenu de mon div</div> je vais pouvoir selectionner cet element avec jQuery.
$("#mondiv") va nous permettre de selectionner notre element comme en CSS #mondiv selectionnera la balise avec l'id correspondant.

Exemple de page html avec l'utilisation de jQuery qui permet de cacher l'élément.


<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
</head>
<body>
<div id="mondiv">contenu de mon div</div>
<script>$("#mondiv").hide(slow)</script>
</body>
</html>

Publié dans CSS, Code, Framework, jQuery, xHTML | Aucun commentaire »