Planète jQuery
Planète jQuery Francophone - L'actualité jQuery en français
  • Accueil
  • Top 10
  • Statistiques
  • Inscription
  • Archives
  • Contact

Informations

Planète jQuery est un site visant à regrouper un ensemble de flux RSS de divers sites/blogs parlant de jQuery en français.

N'hésitez pas à nous rejoindre, plus on est de fous plus on jQuery !

Abonnement

Abonnez vous au flux RSS Suivez nous sur twitter

Participer

  • meta Ajouter votre blog

Membres

  • feed  Arnaud-k
  • feed  Babylon-design
  • feed  Berejeb
  • feed  Chez Syl
  • feed  Creatiqfr
  • feed  Creativejuiz
  • feed  Css4Design
  • feed  Damdec
  • feed  Dator
  • feed  Devzonefr
  • feed  Jarodxxx
  • feed  JFPalmier
  • feed  jQuery.info
  • feed  Js4Design
  • feed  Kennyfeed
  • feed  LaFermeDuWeb
  • feed  Les integristes
  • feed  LudiKreation
  • feed  MathieuRobin
  • feed  Megaptery
  • feed  Molokoloco
  • feed  Noviuslabs
  • feed  Prélude
Filtrer les articles :     Articles du jour   -   Articles de la semaine   -   Articles du mois   -   Tous les articles
jQuery 2.0 Released 
0 vote
Par LudiKreation le 25/04/2013 à 11:28

Voilà une bonne semaine que la version 2.0 du célèbre Framework javascript jQuery est sortie. Voici une partie des nouveautés concernant cette version :

  • Fin de la prise en charge de IE 6/7/8 (cependant les version 1.x de jQuery seront toujours supportées)
  • Une taille de librairie réduite. En effet, environ 12% plus légère que la version 1.9.1 (surtout avec le fait de ne plus prendre en charge certaines versions de navigateurs)
  • Personnalisation des builds et réduction de leur taille, ainsi qu’une simplification d’utilisation
  • Appels d’API compatibles avec jQuery 1.9 (cf. http://jquery.com/upgrade-guide/1.9)

jquery

Comme je l’ai dit, pas de panique, on a le temps de s’habituer à cette nouvelle version, car les version 1.x sont toujours soutenues. Par contre, commencez dès à présent à migrer vos développements vers la 2.0, du moins, avant la fin du support des versions antérieures (même si ce n’est pas d’actualité) ;)

Pour en savoir plus sur cette version 2.0 de jQuery, rendez vous sur le billet du blog jQuery traitant de cette actualité.

Site officiel jQuery : jquery.com

Articles qui peuvent vous intéresser :

  • GMAP3 – Plugin jQuery – Facilitez-vous l’intégration de Google Maps
  • Growl – Plugin jQuery – La SimpleBox
  • quickSearch – Plugin jQuery – La recherche facile dans vos listings
  • carouFredSel – Plugin jQuery – Le carrousel customisable
  • Tiny Circleslider – Plugin jQuery – Le slider en cercle original

Haut de page
GMAP3 – Plugin jQuery – Facilitez-vous l’intégration de Google Maps 
1 vote
Par LudiKreation le 14/02/2013 à 12:32

Il y avait quelques temps déjà que je devais vous faire un nouvel article sur le plugin jQuery GMAP3, plugin qui facilite grandement l’intégration de Google Maps sur vos sites web et le tout via le Framework jQuery.

Je vous avais déjà présenté ce plugin jQuery sur d’autres articles du blog, comme sur GMap3 – Plugin jQuery pour API Google Maps 3ème version. Mais GMAP3 a évolué et s’est vu doter d’un nouveau site web depuis.

Certes, Google facilite déjà beaucoup l’intégration de son API sur les sites web, mais via GMAP3 c’est encore plus simple et surtout avec jQuery.

logo-gmap3

En plus de pouvoir utiliser toutes les méthodes natives à l’API fournie par Google, GMAP3 va vous permettre, entre autre, de :

  • Customiser vos maps
  • Créer vos menus contextuels
  • D’ajouter des recherches d’adresses avec auto-completion
  • Créer vos marqueurs sur les maps
  • Afficher le streetview de manière différente
  • etc…

Le tout aisément, sans compter les méthodes comme : overlays, clusters, callbacks, events etc… présentes dans de nombreux plugins jQuery.

L’utilisation de base de ce plugin jQuery :

Intégration des librairies qui vont être utilisées (jQuery, googlemaps et gmap3)

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript"
src="http://maps.google.com/maps/api/js?sensor=false&amp;language=en">
<script type="text/javascript" src="js/gmap3.min.js"></script>

Le code jQuery pour l’affichage d’une map Google Maps :

$("#my_map").gmap3();

La balise div d’accueil de la map :

<div id="my_map"></div>

Puis un peu de CSS minimum pour donner une dimension à la balise div d’accueil :

#my_map{
 height: 350px;
 width: 600px;
}

Vous l’aurez compris, c’est simple, vous avez une page de démo via ce lien afin de voir une partie de ce que l’on peut faire avec ce plugin jQuery.

Site officiel du plugin jQuery GMAP3 : http://gmap3.net
Documentation GMAP3
Téléchargement GMAP3

Articles qui peuvent vous intéresser :

  • Growl – Plugin jQuery – La SimpleBox
  • quickSearch – Plugin jQuery – La recherche facile dans vos listings
  • carouFredSel – Plugin jQuery – Le carrousel customisable
  • Tiny Circleslider – Plugin jQuery – Le slider en cercle original
  • jNotify – Plugin jQuery – La notification à portée de clic

Haut de page
Growl – Plugin jQuery – La SimpleBox 
3 votes
Par LudiKreation le 23/01/2013 à 14:57

Growl est un plugin jQuery extrêmement simple qui peut, peut-être, vous être utile pour un petit effet de box d’information sur votre site internet.

Avec Growl, vous allez pouvoir créer des petites box qui attireront l’œil de l’internaute le moment souhaité.

growl-plugin-jquery-js

Vous pouvez voir et télécharger le plugin jQuery Growl depuis ce lien

Et voir une démo par ici

Voici l’utilisation (simple) d’usage de ce plugin :

$.Growl.show(content, {
    //settings
    "icon": false,
    "title": false,
    "cls": "",
    "speed": 500,
    "timeout": 3000
});

Il suffit de regarder le code source du fichier “index” fourni par le créateur pour comprendre l’utilisation aisée de ce petit plugin jQuery.

Bon code à tous ;)

Articles qui peuvent vous intéresser :

  • quickSearch – Plugin jQuery – La recherche facile dans vos listings
  • carouFredSel – Plugin jQuery – Le carrousel customisable
  • Tiny Circleslider – Plugin jQuery – Le slider en cercle original
  • jNotify – Plugin jQuery – La notification à portée de clic
  • DropDown Menu – Plugin jQuery – Menu déroulant simple et efficace

Haut de page
quickSearch – Plugin jQuery – La recherche facile dans vos listings 
1 vote
Par LudiKreation le 16/01/2013 à 17:07

Après un long silence, je reviens avec de nouveaux articles pour 2013 !

Aujourd’hui, je vous fait découvrir (ou redécouvrir) un plugin jQuery qui va vous permettre de créer un petit moteur de recherche rapide pour vos listings sous forme de tableaux (balise table) ou de listes à puce (balise ul>li).

En effet, parfois, nous avons de longues listes de contenu où un moteur de recherche en javascript serai le bienvenue pour augmenter l’accessibilité et le coté pratique de vos pages web.

Ce plugin jQuery, c’est quickSearch, et il s’utilise de la manière suivante :

Admettons que nous avons une table sous cette forme :

<table id="table_example">
<thead>
    <tr>
        <th>Email</th>
        <th>Id</th>
        <th>Phone</th>
        <th>Date</th>
    </tr>
</thead>
<tbody>
    <tr>
        <th>devo@flexomat.com</th>
        <td>66672</td>
        <td>941-964-8535</td>
        <td>14/12/1988</td>
    </tr>
    <tr>
        <th>henry@mountdev.net</th>
        <td>35889</td>
        <td>941-964-9543</td>
        <td>19/1/1974</td>
    </tr>
    <tr>
        <th>found@mountdev.net</th>
        <td>03519</td>
        <td>941-964-1599</td>
        <td>6/8/2000</td>
    </tr>
[...]
</table>

Il vous faut ajouter un champ de formulaire pour les entrées de recherches, comme suit :

<form action="#">
    <input type="text" name="search" id="id_search" />
</form>

Puis initier le plugin jQuery, comme ceci dans sa version de base :

$('input#id_search').quicksearch('table#table_example tbody tr');

De là, une recherche se fera directement sur votre listing et seuls les champs avec le contenu de la recherche apparaitront.

plugin-jquery-quicksearch-code

Il y a de nombreuses options, afin d’optimiser ou de configurer la recherche, comme activer la recherche sur une ou plusieurs colonnes spécifiques, préciser les sélecteurs, ajouter des délais etc…

Pour télécharger le plugin jQuery quickSearch et avoir plus d’informations cliquez sur ce lien
Pour voir des exemples et démonstrations cliquez sur celui-ci

J’en profite aussi pour vous souhaiter une bonne année à tous ! :)

Articles qui peuvent vous intéresser :

  • carouFredSel – Plugin jQuery – Le carrousel customisable
  • Tiny Circleslider – Plugin jQuery – Le slider en cercle original
  • jNotify – Plugin jQuery – La notification à portée de clic
  • DropDown Menu – Plugin jQuery – Menu déroulant simple et efficace
  • Flux Slider – Plugin jQuery – La transition d’image à effets multiples

Haut de page
carouFredSel – Plugin jQuery – Le carrousel customisable 
1 vote
Par LudiKreation le 17/10/2012 à 17:01

Je reviens avec un plugin jQuery permettant de réaliser un carrousel de manière efficace, rapide et adapté au besoin. En effet, carouFredSel est un plugin jQuery qui va vous permettre tout cela.

jquery-carousel-js-carouFredSel

Voici sa mise en place basique :

1- Appel des librairies qui vont être utilisées soit : jQuery et le plugin lui même :

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

2- Les images (si vous souhaitez utiliser des images) qui intégreront le carrousel. Mais vous pouvez y mettre du texte, une liste à puce ou tout autre élément html :

<div id="foo">
    <img src="img1.jpg" width="300" />
    <img src="img2.jpg" width="300" />
    <img src="img3.jpg" width="300" />
    <img src="img4.jpg" width="300" />
    <img src="img5.jpg" width="300" />
    <img src="img6.jpg" width="300" />
    <img src="img7.jpg" width="300" />
    <img src="img8.jpg" width="300" />
</div>

3- Lancement du plugin et votre carrousel devient effectif !!

$(document).ready(function() {

    // Using default configuration
    $("#foo").carouFredSel();

});

C’est simple, surtout si vous avez quelques notions d’utilisation du framework javascript jQuery (jquery.com).

Bien entendu, il existe de multiples options et moyens de customisation (voir la configuration).

Pour utiliser ce plugin jQuery, voici le lien direct vers le site carouFredSel : http://caroufredsel.dev7studios.com et le lien vers le téléchargement : http://dev7studios.com/downloads/60

Démo : http://caroufredsel.dev7studios.com/examples/basic-carousels.php

Articles qui peuvent vous intéresser :

  • Tiny Circleslider – Plugin jQuery – Le slider en cercle original
  • jNotify – Plugin jQuery – La notification à portée de clic
  • DropDown Menu – Plugin jQuery – Menu déroulant simple et efficace
  • Flux Slider – Plugin jQuery – La transition d’image à effets multiples
  • 50 Plugins jQuery pour vos sites web !

Haut de page
Liste de tous les plugins jQuery testés sur le blog 
3 votes
Par LudiKreation le 15/08/2012 à 10:11

Voici un billet sur le blog qui sera mis à jour régulièrement et où je répertorie tous les plugins jQuery que l’on trouve sur le blog. C’est donc, une liste bien complète avec pour l’instant plus de 50 plugins jQuery.

plugins-jquery

Les incontournables
jQuery UI

Traitements de textes
quickSearch
jQuery Validation
Select Text Searcher
MarkItUp !
jqIsoText

Effets
Growl
carouFredSel
jNotify
Facebox
jQuery Slick Plugin
DropDown Menu
jPages
msdropdown
SuperFish
Image Cube
jQuery Approach
(mb)Extruder
Pajinate
jQuery Pagination plugin
jQuery Masonry
TipTip
Quicksand
ClueTip

Images
Tiny CirleSlider
Flux Slider
Zoombox
jQuery Favicon Notifier
jCoverflip
s3Slider
Chocolat
Glisse
Skitter
Easy Image Zoom
Zoomy
Cycle
Sponsor Flip Wall
Easy Gallery
ColorBox
MaxImage
JLoupe
JQuery Infinite Carousel
AnythingSlider
YoxView
jqFancyTransitions
CropZoom

Réseaux communautaires / Outils API / Jeux
jQuery AutoSuggest Plugin
pp3Diso
jTwitter
jQuery QRCode
GMap
gComplete
jSocial

API / Utiles
GMAP 3 (dernier article en date sur GMAP3)
GMAP 3
PlupLoad
FullCalendar

Vous pouvez vous abonner à cette page, je commenterai à chaque fois que je la mettrai à jour.

Pour tout ce qui est des plugins jQuery vous pouvez suivre des articles en Français issues de plusieurs blogs de développeurs via le site planete-jquery.fr

Bon code à tous ;)

Haut de page
Tiny Circleslider – Plugin jQuery – Le slider en cercle original 
2 votes
Par LudiKreation le 03/08/2012 à 23:43

Aujourd’hui pour la présentation d’un autre plugin jQuery, je vous fais découvrir Tiny Circleslider, un plugin jQuery plutôt original et qui change des sliders beaucoup plus classiques que l’on commence à voir fleurir sur la toile (ce qui est une bonne chose d’ailleurs). Mais avec Tiny Circleslider, vous allez pouvoir proposer à vos visiteurs, un défilement d’images dans un cercle et de manière fluide et agréable.

tiny-circleslider-plugin-jquery

Afin de vous faire une idée, voici le lien vers le site, d’où vous pourrez admirer plusieurs démonstrations.

Ce plugin jQuery peut être paramétré avec diverses options et il fonctionne sur Iphone, Android et Ipad.

Pour l’utiliser, voici la méthode :

L’appel javascript avec jQuery :

$('#rotatescroll1').tinycircleslider();

Et les balises qui seront impactées par le plugin jQuery :

<div id="rotatescroll1">
    <div class="viewport">
        <ul class="overview">
            <li><img src="images/SF1.jpg" alt="" /></li>
            <li><img src="images/SF2.jpg" alt="" /></li>
            <li><img src="images/SF3.jpg" alt="" /></li>
            <li><img src="images/SF4.jpg" alt="" /></li>
            <li><img src="images/SF5.jpg" alt="" /></li>
            <li><img src="images/SF6.jpg" alt="" /></li>
            <li><img src="images/SF7.jpg" alt="" /></li>
            <li><img src="images/SF8.jpg" alt="" /></li>
            <li><img src="images/SF9.jpg" alt="" /></li>
            <li><img src="images/SF10.jpg" alt="" /></li>
            <li><img src="images/SF11.jpg" alt="" /></li>
            <li><img src="images/SF12.jpg" alt="" /></li>
            <li><img src="images/SF13.jpg" alt="" /></li>
            <li><img src="images/SF14.jpg" /></li>
            <li><img src="images/SF15.jpg" /></li>
        </ul>
    </div>

    <div class="overlay"></div>
    <div class="thumb"></div>
</div>

Et vous aurez votre effet de slider version cercle.

Retrouvez le plugin jQuery Tiny Circleslider

Et vous, que pensez vous de cet effet ?

Articles qui peuvent vous intéresser :

  • jNotify – Plugin jQuery – La notification à portée de clic
  • DropDown Menu – Plugin jQuery – Menu déroulant simple et efficace
  • Flux Slider – Plugin jQuery – La transition d’image à effets multiples
  • 50 Plugins jQuery pour vos sites web !
  • pp3Diso – Plugin jQuery – l’affichage et la gestion d’une carte 2D isométrique

Haut de page
jNotify – Plugin jQuery – La notification à portée de clic 
2 votes
Par LudiKreation le 23/07/2012 à 16:21

Aujourd’hui, un plugin jQuery qui se veut simple, mais pratique. En effet, vous avez toujours besoin sur vos sites internet dynamiques de notifier des éléments à vos utilisateurs. Par exemple, “Enregistrement effectué“, “Image correctement téléchargée” ou même “Désolé, cette action est impossible“.

warning jQuery

Pour se faire on utilise des boites de dialogue qui annoncent ce genre de message. jNotify, va vous permettre de faire ça très simplement et rapidement, avec diverses options comme le délais d’affichage, une action de fermeture etc…

Vous pouvez vous procurer le plugin via ce lien (.zip) et l’utiliser ainsi :

Appel des librairies

<!---// load the jNotify CSS stylesheet //--->
<link type="text/css" href="css/jquery.jnotify.css" rel="stylesheet" media="all" />

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

Puis l’utiliser ainsi :

$.jnotify("Notification par défaut.");

Bien entendu, y mettre dans une action de clic ou autre pour faire apparaitre la notification.
Par exemple :

$("#notify").click(function () {
      $.jnotify("hello World");
    });

Quand vous cliquerez sur l’élément avec l’id #notify, vous allez avoir une notification par défaut disant : “Hello World”.

Évidemment, il existe plusieurs options et syntaxes, que l’on peut utiliser ainsi :

$.jnotify(message, [options]);
$.jnotify(message, delay);
$.jnotify(message, sticky);
$.jnotify(message, type, [delay/sticky]);

Pour toutes les options et plus d’exemples, je vous laisse vous rendre sur le site du plugin : http://www.givainc.com/labs/jnotify_jquery_plugin.htm

Articles qui peuvent vous intéresser :

  • DropDown Menu – Plugin jQuery – Menu déroulant simple et efficace
  • Flux Slider – Plugin jQuery – La transition d’image à effets multiples
  • 50 Plugins jQuery pour vos sites web !
  • pp3Diso – Plugin jQuery – l’affichage et la gestion d’une carte 2D isométrique
  • jPages – Plugin jQuery – Pagination à effet pour vos sites web

Haut de page
Flux Slider – Plugin jQuery – La transition d’image à effets multiples 
2 votes
Par LudiKreation le 10/07/2012 à 17:02

Flux slider est un plugin jQuery très inspiré du plugin jQuery Nivo Slider et qui va vous permettre des transitions d’images poussées notamment avec des effets 3D, mais surtout avec une grande fluidité apportée par l’utilisation des transitions CSS3 associées à ce plugin.

flux-slider-plugin-jquery-css3

Actuellement le plugin Flux Slider fonctionne sur :

– Safari
– Chrome
– iOS
– Blackberry Playbook
– Firefox 4
– Opera 11

Bien entendu le plugin n’est viable que sur les navigateurs supportant le CSS3 (soit tous les navigateurs récents).

Exemple d’utilisation simple :

<div id="slider">
    <img src="img/avatar.jpg" alt="" />
    <img src="img/ironman.jpg" alt="" title="Ironman Screenshot" />
    <a href=""><img src="img/imagewithlink.jpg" alt="" /></a>
    <img src="img/tron.jpg" alt="" />
</div>

Ci-dessus les éléments html qui s’exécuteront avec des transitions.

puis l’instanciation de Flux Slider :

$(function(){
    window.myFlux = $('#slider').flux();
});

Bien entendu, il existe de nombreuses options qu’il est possible de découvrir sur le Github du plugin jQuery Flux Slider

Vous pouvez admirer la démo du plugin via ce lien

Et télécharger le plugin en cliquant sur ce lien là

A savoir qu’une version plugin WordPress existe aussi.

Articles qui peuvent vous intéresser :

  • Zoombox – Plugin jQuery – Zoomez sur vos images
  • 50 Plugins jQuery pour vos sites web !
  • pp3Diso – Plugin jQuery – l’affichage et la gestion d’une carte 2D isométrique
  • jPages – Plugin jQuery – Pagination à effet pour vos sites web
  • DropDown Menu – Plugin jQuery – Menu déroulant simple et efficace

Haut de page
Zoombox – Plugin jQuery – Zoomez sur vos images 
2 votes
Par LudiKreation le 13/06/2012 à 18:55

Ce n’est pas parce qu’on a déjà fait le tour de 50 plugins jQuery qu’il faut s’arrêter là, non ?

Aujourd’hui je vous présente une nouvelle création française en jQuery, c’est Zoombox. Un plugin jQuery qui va vous permettre de réaliser des effets lightbox sur vos images, photos, contenus, médias etc… sur vos sites web.

zoombox-jquery-plugin

Ce que l’on peut faire avec zoombox :

- permet d’intégrer dans les effets : Images, animations Flash, videos Youtube, videos Dailymotion, Iframe, contenu HTML
- le rendu est aisément customisable via le css
- il est possible de grouper les galeries
- il est possible de naviguer dans les galeries via les flèches du clavier et de fermer la box via le bouton esc
- etc…

Utilisation de Zoombox :

Intégration des librairies js, jquery et zoombox :

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

Appel de la feuille de style css :

<link href="js/zoombox/zoombox.css" rel="stylesheet" type="text/css" media="screen" />

Lancement du plugin (appel de base) :

<script type="text/javascript">
jQuery(function($){
    $('a.zoombox').zoombox();
     
});
</script>

Puis les éléments html qui seront visés par le plugin :

/* Classic link */
<a href="http://www.ludikreation.com" class="zoombox">Site ludiKreation</a>
 
/* You can group links into 'galleries' with the keyword zgallery{galleryname} */
<a href="Firstlink" class="zoombox zgallery1">Link</a>
<a href="SecondLink" class="zoombox zgallery1">Link</a>
<a href="ThirdLink" class="zoombox zgallery1">Link</a>
<a href="Fourthlink" class="zoombox zgallery1">Link</a>
 
/* You can also specify a with and a height */
<a href="VideoLink" class="zoombox w500 h400"/>

3 versions différentes dans cet exemple :
- Un lien de base
- Une galerie
- Et une vidéo

Il existe plusieurs options pour customiser et modifier l’affichage :

$('a.zoombox').zoombox({
        theme       : 'zoombox',        //available themes : zoombox,lightbox, prettyphoto, darkprettyphoto, simple
        opacity     : 0.8,              // Black overlay opacity
        duration    : 800,              // Animation duration
        animation   : true,             // Do we have to animate the box ?
        width       : 600,              // Default width
        height      : 400,              // Default height
        gallery     : true,             // Allow gallery thumb view
        autoplay : false                // Autoplay for video
    });

En fait, l’auteur a réalisé une vidéo pour la mise en place du plugin. Pratique et sympa, non ?

Je vous la partage ;)


Présentation Zoombox V2 par Grafikart

Site du plugin
Télécharger le plugin
Documentation

Articles qui peuvent vous intéresser :

  • 50 Plugins jQuery pour vos sites web !
  • pp3Diso – Plugin jQuery – l’affichage et la gestion d’une carte 2D isométrique
  • jPages – Plugin jQuery – Pagination à effet pour vos sites web
  • DropDown Menu – Plugin jQuery – Menu déroulant simple et efficace
  • Glisse – Plugin jQuery – Faites défiler vos images

Haut de page
Page suivante »
Propulsé par le BilboPlanet Retour au début