juil 17

Changer de thème jQuery UI selon son humeur

Jquery 1 Comment »

Si comme moi vous avez une interface d’ administration réalisée avec le framework CSS jQuery UI, alors le Theme Switcher Widget est pour vous, il permet de passer d’un thème (officiel) à un autre en un clic !

theme-switcher-jquery-ui
Pour l’intégrer c’est encore très simple comme le montre cet exemple :

<!DOCTYPE html>
<html>
<head>
  <link type="text/css" rel="stylesheet" href="http://jqueryui.com/themes/base/ui.all.css" />
  <script type="text/javascript" src="http://jqueryui.com/js/jquery.js"></script>
 
  <script>
  $(document).ready(function(){
    $('#switcher').themeswitcher();
  });
  </script>
</head>
<body style="font-size:62.5%;">
 
<script type="text/javascript"
  src="http://jqueryui.com/themeroller/themeswitchertool/">
</script>
<div id="switcher"></div>
 
</body>
</html>

Post to Twitter Twitter ce post


juil 17

Animate en jQuery

Jquery No Comments »

Animate est une fonction de jQuery qui permet d’animer un élément du DOM en modifiant son style (couleur, taille, bordures,police,opacité…etc) dans un temps donné.

Exemple:

1
2
3
4
5
6
7
8
9

    $("#go").click(function(){
      $("#block").animate({
        width: "70%",
        opacity: 0.4,
        marginLeft: "0.6in",
        fontSize: "3em",
        borderWidth: "10px"
      }, 1500 );
    });

Vous pouvez assigner tous les styles de cette liste qui sont quantifiable (px, em, %).

Encore trop peu utilisée elle permet pourtant de donner une vraie valeur ajoutée à une animation JavaScript et ce très simplement.

Voici ci-dessous deux scripts plutôt sympa qui utilisent cette fonction:

  • Menu

Article.

menu-ombre-jquery

  • Lever de rideau

Article.

lever-de-rideau

Post to Twitter Twitter ce post

juil 16

Diaporama jQuery avec SlideView

Jquery No Comments »

SlideView est un plugin jQuery qui permet de créer un Diaporama ( slideshow).

Voici la démo.

Documentation et téléchargement.

Exemple de code jQuery :

1

$("#slideshow").slideView();

diaporama-slideshow-jquery

Post to Twitter Twitter ce post

juil 16

Utiliser jQuery et jQuery UI sans charge supplémentaire pour votre serveur

Jquery No Comments »

Utiliser jQuery et jQuery UI sans charge supplémentaires pour votre serveur c’est possible!

En effet Google AJAX Libraries API héberge les librairies suivantes:

  • jQuery
  • jQuery UI
  • Prototype
  • script_aculo_us
  • MooTools
  • Dojo
  • SWFObject
  • Yahoo! User Interface Library (YUI)
  • Ext Core

Ainsi vous pouvez inclure jQuery dans vos pages grâce au code suivant:

<SCRIPT LANGUAGE="Javascript" SRC="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></SCRIPT>

Pour accéder à la liste des librairies hébergées c’est ici.

De plus cela permet aux navigateurs de ne pas télécharger inutilement plusieurs fois la même librairie sur chaque site qui l’utilise, puisqu’une fois jQuery téléchargé sur les serveur de google et mis en cache dans le navigateur, si un autre site utilise le même fichier jQuery hébergé par google, le navigateur n’aura plus à le retélécharger.

Puisque qu’une vidéo vaut mieux que de longs discours :

Pour résumer  : utiliser les fichiers hébergés de Google est bon pour votre serveur(processeur et bande passante) et pour vos visiteurs (bande passante et temps de chargement).

Post to Twitter Twitter ce post

juil 02

Diaporama ou carrousel d’accueil en jQuery

Jquery 5 Comments »

Showcase est un plugin jQuery qui permet de réaliser de jolis diaporamas d’accueil.

Pour voir les démonstrations c’est ici, pour télécharger le plugin c’est ici et la page officielle est ici.

Code :

1
2
3
4

$("#showCase1").showcase({
animation: { type: "fade",  interval: 4500,  stopOnHover: false },
navigator: { item: { width: "4px",  height: "4px" } }
});

showcase-diaporama-jquery

Post to Twitter Twitter ce post

juin 19

jQuery Gesture capture les mouvements de souris

Javascript, Jquery No Comments »

jQuery Gestures est un plugin jQuery qui capture les mouvements de souris (clic gauche enfoncé ou non) de vos visiteurs; aussi ce système peut être intéressent pour réaliser des interfaces compatibles avec les nouveaux écrans tactiles ( de bureaux ou mobiles ).

Il détecte les différents mouvements possibles : vers la gauche, vers la droite, vers le haut, le bas, mouvements circulaires, zigzag…etc; ces mouvements deviennent ainsi des évènements .

Pour tester ce plugin c’est ici.

Exemple de code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

$(function(){
 
	$('*').gestures({
 
		callback:function(gesture)
		{
			if(gesture.string == 'circle')
			{
				alert('Circled!');
			}
			else if(gesture.string == 'zig-zag')
			{
				alert('Zig-Zagged!');
			}
		}
 
	});
 
});

gesture-jquery-plugin

Post to Twitter Twitter ce post

juin 13

jQuery UI passe en version 1.7.2

Actualité, Javascript, Jquery No Comments »

Après quelques semaines de repos, jQuery UI passe en version 1.7.2!

Au programme :

  • Correction de bugs
  • Nouveaux Thèmes

Même si cette version n’apporte pas plus que des corrections de bugs(mis à part les nouveaux thèmes), cela fait quand même plaisir de voir que jQuery UI reprend de l’activité ;-)

Pour voir les changements depuis la dernière version c’est ici.

jquery-ui-

Post to Twitter Twitter ce post

juin 12

Lecteur MP3 en jQuery

Javascript, Jquery No Comments »

jPlayer est un plugin jQuery qui permet de lire des MP3 dans votre page Web!

Et là je vois la question venir : « Comment ce fait-il que Javascript se mette du jour au lendemain à lire les MP3 ?? »

Et bien en fait ce plugin se sert d’un flash invisible sur la page qui permet la lecture des MP3!

Plusieurs styles de lecteurs sont possibles :

  • Lecteur simple avec gestion du son.
  • Lecteur de playlist
  • Lecteur texte
  • Lecteur avec barre de progression (jolijoli)
  • Et le dernier arrivé : Lecteur compatible avec les thèmes  jQueryUI

Pour le tester et télécharger c’est ici.lecteur-mp3-jquery-ui

lecteur-mp3-jqueryjquery-lecteur-player-mp3

Post to Twitter Twitter ce post

juin 03

Menu avec effet FishEye ou oeil de poisson avec jQuery

Javascript, Jquery No Comments »

En anglais FishEye ou en français Oeil de poisson c’est cet effet qui est utilisé pour le menu de Mac OS.

Ce plugin jQuery nommé jqDock donne un effet  loupe au passage de la souris sur les icônes d’un menu.

fisheye-dock-menu-oeil-de-poisson-loupe

Télécharger ce plugin.

Post to Twitter Twitter ce post

mar 13

Menu contextuel avec jQuery

Jquery 2 Comments »

jQuery Context Menu Plugin est comme son nom l’ indique un plugin jQuery qui va vous permettre d’intégrer à votre site un menu contextuel. Ce menu s’affichera par exemple lorsqu’ un utilisateur fera un clic droit sur votre page ou une zone définie de votre page.

menu-contextuel-click-droit-jquery-plugin

Code HTML:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

<ul id="myMenu" class="contextMenu">
    <li class="edit">
        <a href="#edit">Edit</a>
    </li>
    <li class="cut separator">
        <a href="#cut">Cut</a>
    </li>
    <li class="copy">
        <a href="#copy">Copy</a>
    </li>
    <li class="paste">
        <a href="#paste">Paste</a>
    </li>
    <li class="delete">
        <a href="#delete">Delete</a>
    </li>
    <li class="quit separator">
        <a href="#quit">Quit</a>
    </li>
</ul>

Code jQuery:

1
2
3
4
5
6

$(document).ready( function() {
   $("#selector").contextMenu({menu: 'myMenu'},
      function(action, el, pos) {
         alert('Action: ' + action);
   });
});

Post to Twitter Twitter ce post

Previous Entries