Archives par mot-clé : Javascript

Menu accordéon facile en jQuery

Publié dans Javascript | Laisser un commentaire
08 Avr 2010

Et je continue avec ma série jQuery ! Aujourd’hui, l’idée est de réaliser un menu accordéon plutôt cool : Démo menu accordéon. En voici le code HTML :

<dl>
	<dt>Titre 1</dt>
		<dd>Exemple 1</dd>
		<dd>Exemple 2</dd>
		<dd>Exemple 3</dd>
		<dd>Exemple 4</dd>
	<dt>Titre 2</dt>
		<dd>Exemple 1</dd>
		<dd>Exemple 2</dd>
		<dd>Exemple 3</dd>
	<dt>Titre 3</dt>
		<dd>Exemple 1</dd>
		<dd>Exemple 2</dd>
		<dd>Exemple 3</dd>
		<dd>Exemple 4</dd>
		<dd>Exemple 5</dd>
	<dt>Titre 4</dt>
		<dd>Exemple 1</dd>
		<dd>Exemple 2</dd>
	<dt>Titre 5</dt>
		<dd>Exemple 1</dd>
		<dd>Exemple 2</dd>
		<dd>Exemple 3</dd>
		<dd>Exemple 4</dd>
		<dd>Exemple 5</dd> </dl>

Continuer la lecture →

Javascript

Action lors de la modification d’un champ : change(function)

Publié dans Javascript | Laisser un commentaire
07 Avr 2010

En ce moment, je fais quelques tests avec jQuery histoire d’améliorer un petit peu mon niveau dans ce framework avec lequel j’ai déjà bidouillé quelques fois. Aujourd’hui, j’ai simplement cherché à effectuer une action lorsqu’un utilisateur modifie la valeur d’un champ : Démo modification d’un champ. Pour cela, il suffit d’utiliser la méthode change(function) de jQuery sur le champ en question. Voyons un exemple. D’abord le code HTML :

<form action="" method="post">
<fieldset>
	<legend>Élévation au carré</legend>
	<label for="nbElement">Nombre à élever au carré :</label>
	<input type="text" name="nbElement" id="nbElement" size="4" value="12"  />
	<br />
	<span id="max"></span>
</fieldset>
</form>

Continuer la lecture →

Utiliser une fonction PHP avec jQuery à l’aide de get

Publié dans Javascript | 3 commentaires
01 Fév 2010

En ce moment, je m’amuse un petit peu avec jQuery et l’Ajax. C’est un domaine dans lequel, je ne me sens vraiment pas à l’aise, donc j’essaie de faire des progrès. Aujourd’hui, je suis tout content car j’ai réussi à utiliser une fonction PHP avec jQuery en utilisant les principes d’Ajax ! J’ai découvert la méthode get() dans jQuery, et c’est exactement ce que je cherchais.

Démarche générale

J’ai un formulaire contenant un champ titre et un champ url. Le champ url contient normalement le titre mais parsé par une fonction PHP maison parserUrl(). Pour faciliter la vie de l’utilisateur, je voulais ajouter un petit bouton « Actualiser » à côté du champ Url, afin de pouvoir actualiser l’url avec un nouveau titre à n’importe quel moment. Voici un démo pour voir le fonctionnement : démo Utiliser une fonction PHP avec jQuery.

Démo utilisation get() en jQuery

Démo utilisation get() en jQuery

Continuer la lecture →

Des bords arrondis, sans images, avec les CSS3

Publié dans HTML et CSS | 2 commentaires
23 Déc 2009

Je suis actuellement en train de faire le design d’un nouveau site, et pour la première fois, je me suis amusé un petit peu avec les CSS 3. Je n’ai utilisé que des bords arrondis (border-radius), et des effets d’ombres (box-shadow), et je suis impressionné par ce que l’on peut faire en quelques lignes. Quand je pense aux transitions, aux couleurs RGBa (pour gérer la transparence facilement), les arrières-plans multiples, j’ai vraiment hâte que les navigateurs l’implémentent ! Il est déjà possible de tester un rendu temporaire en utilisant les préfixes -moz- (pour Firefox), et -webkit- (pour Safari et Google Chrome), et sans préfixe pour Opéra à partir de la version 10.5 . Pour Internet Explorer, il faut se rabattre sur les créations anciennes ou nouvelles des développeurs de Microsoft, qui, quand elles existent, ne suivent pas de standard particulier. Welcome in the real world!

Un peu d’arrondi pour la douceur

Nous allons commencer par voir comment réaliser des bords arrondis sans utiliser d’images. Et en ajoutant une petite image pour la déco quand même, on va créer la chose suivante :


Continuer la lecture →

Uploadify : uploader facilement avec Jquery

Publié dans Javascript | 2 commentaires
20 Oct 2009

Voilà déjà quelques temps que j’entretiens, en parallèle de mon script « toolbar BBcode » un script d’upload de fichiers. Il contient une interface d’administration bien complète, et l’interface utilisateur permet d’uploader facilement un ou plusieurs fichiers à la fois, en renommant, écrasant, sélectionnant un dossier particulier, et bien sûr la gestion des fichiers déjà uploadés permet d’en faire autant. Récemment, en apprenant des notions d’Ajax, j’ai même appris à faire des uploads sans rechargement de pages, c’est beaucoup plus zoulie !

Continuer la lecture →

Joomla est-il réellement la bonne solution

Publié dans Informations | Laisser un commentaire
04 Mai 2009

J’ai actuellement 3 projets de cours qui se rapprochent de leur version finale. (enfin, en théorie ;-)) Dans les jours qui viennent, je vais donc avoir plus de temps pour trimer des heures dessus, que pour cogiter 30 minutes sur Joomla. Je suis en train de réfléchir actuellement sur le choix de Joomla pour héberger ce blog. Je ne connaissais pas ce CMS auparavant, et maintenant que j’en aperçois les contours, je me rends bien compte que ce n’est pas ce que je recherche pour animer et utiliser quotidiennement un site comme celui-ci. Trop long, trop lourd. J’envisage (peut-être) de mettre en pause l’apprentissage de Joomla quelques temps pour passer à un autre CMS que j’utiliserai pour ce blog. Je reprendrai alors sûrement Joomla plus tard puisqu’il est très demandé par des entreprises, c’est donc un outils à bien connaitre. Enfin, j’avoue que je préfèrerai me pencher sur la programmation orientée objet en PHP, ou sur le framewrok jQuery pour Javascript. Ces deux notions sont aussi très demandés dans le milieu professionnel et cela me parait plus intéressant. Mais bon, on verra ! Tout ceci n’est qu’au stade de la réflexion, et en attendant, je continuerai à bidouiller sur Joomla.