1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
|
<?xml version="1.0" encoding="UTF-8" ?>
<rdf:RDF
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
xmlns:admin="http://webns.net/mvcb/"
xmlns:cc="http://web.resource.org/cc/"
xmlns:content="http://purl.org/rss/1.0/modules/content/"
xmlns="http://purl.org/rss/1.0/">
<channel rdf:about="http://planete-jquery.fr">
<title>Planète jQuery : l'actualité jQuery, plugins jQuery et tutoriels jQuery en français</title>
<description>Planète jQuery Francophone - L'actualité jQuery en français</description>
<link>http://planete-jquery.fr</link>
<dc:language>fr</dc:language>
<dc:creator>Damien Decaux</dc:creator>
<dc:rights></dc:rights>
<dc:date>2013-03-20T04:16:30+00:00</dc:date>
<admin:generatorAgent rdf:resource="http://planete-jquery.fr" />
<items>
<rdf:Seq>
<rdf:li rdf:resource="http://www.mathieurobin.com/2013/03/chroniques-jquery-episode-108/"/>
<rdf:li rdf:resource="http://www.lafermeduweb.net/billet/powertip-des-tooltips-aux-fonctionnalites-avancees-1516.html"/>
<rdf:li rdf:resource="http://www.mathieurobin.com/2013/03/chroniques-jquery-episode-107/"/>
<rdf:li rdf:resource="http://www.megaptery.com/2013/03/tooltipster-tooltip-jquery-moderne-flexible.html"/>
<rdf:li rdf:resource="http://www.lafermeduweb.net/billet/spectrum-un-colorpicker-jquery-tres-complet-1527.html"/>
<rdf:li rdf:resource="http://www.mathieurobin.com/2013/02/chroniques-jquery-episode-106/"/>
<rdf:li rdf:resource="http://www.lafermeduweb.net/billet/fancy-input-donnez-du-style-a-vos-input-et-textarea-en-css3-1525.html"/>
<rdf:li rdf:resource="http://js.4design.tl/diyslider-slider-leger-et-personnalisable-1524"/>
<rdf:li rdf:resource="http://www.mathieurobin.com/2013/02/chroniques-jquery-episode-105/"/>
<rdf:li rdf:resource="http://blog.ludikreation.com/2013/02/14/gmap3-plugin-jquery-facilitez-vous-lintegration-de-google-maps/"/>
<rdf:li rdf:resource="http://www.lafermeduweb.net/billet/threesixty-slider-un-plugin-jquery-de-slider-d-image-a-360-1520.html"/>
<rdf:li rdf:resource="http://www.mathieurobin.com/2013/02/comment-bien-choisir-vos-plugins/"/>
<rdf:li rdf:resource="http://www.mathieurobin.com/2013/02/chroniques-jquery-episode-104/"/>
<rdf:li rdf:resource="http://www.megaptery.com/2013/02/vague-du-web-3.html"/>
<rdf:li rdf:resource="http://js.4design.tl/parcourir-le-dom-en-php-avec-simple-html-dom-1578"/>
<rdf:li rdf:resource="http://chez-syl.fr/2013/02/jquery-1-9-et-browser/"/>
<rdf:li rdf:resource="http://chez-syl.fr/2013/02/site-du-zero-notifications-1-5-3/"/>
<rdf:li rdf:resource="http://www.lafermeduweb.net/billet/image-picker-une-selectbox-combinee-a-des-images-avec-jquery-1512.html"/>
<rdf:li rdf:resource="http://www.megaptery.com/2013/01/blackandwhite-images-noir-blanc-jquery.html"/>
<rdf:li rdf:resource="http://www.mathieurobin.com/2013/01/chroniques-jquery-episode-103/"/>
</rdf:Seq>
</items>
</channel>
<item rdf:about="http://www.mathieurobin.com/2013/03/chroniques-jquery-episode-108/"><title>MathieuRobin : Chroniques jQuery, épisode 108</title><link>http://www.mathieurobin.com/2013/03/chroniques-jquery-episode-108/</link><dc:date>2013-03-11T09:06:01+00:00</dc:date><dc:language>fr</dc:language><dc:creator>MathieuRobin</dc:creator><dc:subject></dc:subject><description></description><content:encoded><![CDATA[<p>Hello tout le monde ! Alors que je m’apprête à pondre un second coup de gueule contre Darty, la chronique, elle, continue sans soucis. Rien d’officiel ceci dit.</p>
<p>On a le droit à <a title="jQuery Mobile 1.3: What's New?" href="http://www.elated.com/articles/jquery-mobile-1-3-whats-new/" target="_blank">un topo très complet et intéressant</a>, en anglais, de la part de l’équipe de elated sur la sortie de jQuery Mobile 1.3. Je vous le conseille franchement.</p>
<p>Un énième site pour répertorier les plugins vient de voir le jour. Il a pour mérite d’être plutot bien réalisé et de regrouper plus de 600 plugins. J’espère qu’ils continueront d’alimenter la liste, <a title="unheap" href="http://www.unheap.com/" target="_blank">unheap</a> fait désormais partie de mes sources de plugins. Merci à tous les twittos qui en ont parlé et qui m’ont permis de découvrir ce service.</p>
<p>Comme souvent, <a title="Tooltipster, une tooltip jQuery moderne et flexible | Megaptery" href="http://www.megaptery.com/2013/03/tooltipster-tooltip-jquery-moderne-flexible.html" target="_blank">Megaptery</a> a su nous dégoter une jolie petite perle. <a title="Tooltipster" href="http://calebjacob.com/tooltipster/" target="_blank">Tooltipster</a> est un plugin de tooltip très complet et qui permet une énorme personnalisation via CSS. Personnellement, je préfère de loin ce plugin à celui de Twitter Bootstrap.</p>
<p>C’est tout pour cette semaine, j’espère avoir le temps de bloguer sur d’autres choses cette semaine. Vous pouvez retrouver l’ensemble des liens de cette chronique sur <a title="Episode 108 sur Evernote" href="https://www.evernote.com/pub/mathrobin/episode108" target="_blank">un carnet dédié sur Evernote</a>.</p>
<p>Dernière petite chose, que pensez vous de cette chronique ? Que voulez vous de différent ? Avez-vous des choses à proposer ? J’aimerais bien avoir vos avis.</p>
<p><a href="http://www.mathieurobin.com/?flattrss_redirect&id=2917&md5=06cd0e0a951f4ba114c0db43ce27b944" title="Flattr" target="_blank"><img src="http://www.mathieurobin.com/wp-content/plugins/flattr/img/flattr-badge-large.png" alt="flattr this!" /></a></p><p><br/><i>Article original de <a href="http://www.mathieurobin.com/2013/03/chroniques-jquery-episode-108/" title="Voir l'article original">MathieuRobin</a><br/>Aller sur <a href="http://planete-jquery.fr" title="">Planète jQuery</a></i></p>]]></content:encoded></item><item rdf:about="http://www.lafermeduweb.net/billet/powertip-des-tooltips-aux-fonctionnalites-avancees-1516.html"><title>LaFermeDuWeb : PowerTip - Des tooltips aux fonctionnalités avancées</title><link>http://www.lafermeduweb.net/billet/powertip-des-tooltips-aux-fonctionnalites-avancees-1516.html</link><dc:date>2013-03-07T09:15:00+00:00</dc:date><dc:language>fr</dc:language><dc:creator>LaFermeDuWeb</dc:creator><dc:subject></dc:subject><description></description><content:encoded><![CDATA[<div>
<a href="http://www.lafermeduweb.net/billet/powertip-des-tooltips-aux-fonctionnalites-avancees-1516.html">
<img style="border: 1px solid #000000;" src="http://www.lafermeduweb.net/images/billets/2013-03/powertip_topBillet.jpg" alt="PowerTip - Des tooltips aux fonctionnalités avancées" />
</a>
</div>
<div>PowerTip est une bibliothèque jQuery permettant de créer des tooltips avec des fonctionnalités avancées.</div><p><br/><i>Article original de <a href="http://www.lafermeduweb.net/billet/powertip-des-tooltips-aux-fonctionnalites-avancees-1516.html" title="Voir l'article original">LaFermeDuWeb</a><br/>Aller sur <a href="http://planete-jquery.fr" title="">Planète jQuery</a></i></p>]]></content:encoded></item><item rdf:about="http://www.mathieurobin.com/2013/03/chroniques-jquery-episode-107/"><title>MathieuRobin : Chroniques jQuery, épisode 107</title><link>http://www.mathieurobin.com/2013/03/chroniques-jquery-episode-107/</link><dc:date>2013-03-06T09:08:23+00:00</dc:date><dc:language>fr</dc:language><dc:creator>MathieuRobin</dc:creator><dc:subject></dc:subject><description></description><content:encoded><![CDATA[<p> Salut à tous ! Semaine difficile, écriture compliquée par la fatigue, ce billet est pourtant un des plus intéressants que j’ai pu écrire dans cette chronique. Je vous laisse découvrir pourquoi :</p>
<p>Sortie de <strong>la beta 2 de jQuery 2.0 !</strong></p>
<p><a title="jQuery 2 beta 2 released !" href="http://blog.jquery.com/2013/03/01/jquery-2-0-beta-2-released/" target="_blank">L’annonce</a> a été faite vendredi par Dave Methvin. Bien entendu, le support de IE 6, 7 et 8 a été supprimé. Vous devrez donc faire quelque chose de ce genre si vous souhaitez migrer et continuer de supporter ces navigateurs :</p>
<pre><!--[if lt IE 9]>
<script src="jquery-1.9.1.js"></script>
<![endif]-->
<!--[if gte IE 9]><!-->
<script src="jquery-2.0.0b2.js"></script>
<!--<![endif]--></pre>
<p>Au delà de ça, je vous laisse regarder le lien ci-dessus, trop de détails pour vous les détailler ici et je manque malheureusement de temps. Cette version amène énormément de changements, la migration risque d’être délicate. Le lien contient le changelog complet.</p>
<p>Autre information officielle, le déroulement de jQuery Europe le 23 et 24 février dernier à Vienne. J’avais raté l’information mais mon amie <a title="Twitter - agcolom" href="https://twitter.com/agcolom/status/306474805652242433" target="_blank">Anne-Gaëlle Colom m’a permis de rattraper ce manque</a>. Voilà le <a title="jQuery Europe 2013" href="http://events.jquery.org/2013/eu/" target="_blank">lien officiel</a> sur l’évènement, vous trouverez <a title="jQuery Europe: Top International Developers Meet in Vienna" href="http://www.prnewswire.co.uk/news-releases/jquery-europe-top-international-developers-meet-in-vienna-192987771.html" target="_blank">un article assez intéressant</a> sur le sujet chez PR Newswire UK.</p>
<p>L’agence de presse déléguée sur place a partagé ses photos. Dans l’ordre <a title="jQuery Europe: Internationale Top-Software-Entwickler tagten in Wien" href="http://www.apa-fotoservice.at/galerie/3891" target="_blank">celles du vendredi</a> et <a title="jQuery Europe: Internationale Top-Software-Entwickler tagten in Wien" href="http://www.apa-fotoservice.at/galerie/3894" target="_blank">celles du samedi</a>. Et celles de Gentics Software <a title="jQuery Europe 2013 friday" href="http://www.flickr.com/photos/genticssoftware/sets/72157632829497070/" target="_blank">le vendredi</a> et <a title="jQuery Europe 2013 saturday" href="http://www.flickr.com/photos/genticssoftware/sets/72157632832438993/" target="_blank">le samedi</a>.</p>
<p>Je n’ai pas eu le temps de me pencher là dessus, mais le weekend dernier, la conférence <a title="jQueryTO - Toronto's jQuery Conference" href="http://jqueryto.com/" target="_blank">jQueryTO</a> a eu lieu à Toronto.</p>
<p>Avant de continuer, je remercie donc Anne-Gaëlle pour toutes ces informations que je n’avais pas pu glaner.</p>
<p>Un <a title="Try jQuery" href="http://try.jquery.com/" target="_blank">tutoriel imposant</a> côté officiel a été publié et me fait un peu penser aux tutoriels de la <a title="Khan Academy" href="https://www.khanacademy.org/" target="_blank">KhanAcademy</a> ou encore comme <a title="Try GitHub" href="http://try.github.com/levels/1/challenges/1" target="_blank">le tutoriel pour GitHub</a>.</p>
<p>Passons aux plugins, avec une grosse fournée cette semaine. La palme revient à Stéphanie Walter. Son <a title="Des pixels et du code 51" href="http://www.inpixelitrust.fr/blog/des-pixels-et-du-code-51/" target="_blank">épisode 51</a> était très riche pour ma propre chronique.</p>
<p><a title="Use hook" href="http://usehook.com/" target="_blank">Hook.js</a>, un plugin pour faire comme une sorte de pull-to-refresh, comme sur Twitter. Ce plugin séduit pas mal en ce moment, il a aussi eu le droit à un article chez <a title="Hook.js - Adoptez le "pull to refresh" dans vos pages web" href="http://www.lafermeduweb.net/billet/hook-js-adoptez-le-pull-to-refresh-dans-vos-pages-web-1530.html" target="_blank">La Ferme du Web</a>.</p>
<p><a title="Toolbar.js" href="http://paulkinzett.github.com/toolbar/" target="_blank">Toolbar.js</a>, une sorte de barre d’outils, très simple, mais reste efficace.</p>
<p>Dans les autres outils, on peut compter :</p>
<p><a title="JSZip" href="http://stuk.github.com/jszip/" target="_blank">JSZip</a>, pour zipper et dézipper via JavaScript.</p>
<p><strong>Edit du 6 mars 2013 : </strong>apparemment cette bibliothèque a quelques soucis majeurs, voire le commentaire de check_ca (<a title="http://www.mathieurobin.com/2013/03/chroniques-jquery-episode-107/#comment-3073" href="http://www.mathieurobin.com/2013/03/chroniques-jquery-episode-107/#comment-3073" target="_blank">http://www.mathieurobin.com/2013/03/chroniques-jquery-episode-107/#comment-3073</a>)</p>
<p><a title="MetTile" href="http://codecanyon.net/item/mettile-a-package-of-jquery-metro-ui-tiles/full_screen_preview/4158455?ref=jqueryrain" target="_blank">MetTile</a>, un ensemble de tuiles graphiques pour simuler l’interface de Metro, la dernière UI de Microsoft. Et pour une fois, ce kit est vraiment réussi.</p>
<p><a title="jQuery.IO" href="https://github.com/sporto/jquery_io.js" target="_blank">jQuery.IO</a>, un plugin qui permet de basculer de façon aisée d’un format de données à un autre.</p>
<p>Encore une fois, les liens de cette chronique sont disponibles sur <a title="Episode 107" href="https://www.evernote.com/pub/mathrobin/episode107" target="_blank">un carnet Evernote dédié</a>.</p>
<p><a href="http://www.mathieurobin.com/?flattrss_redirect&id=2904&md5=e8dbf8c0244dc3e076185639db4d52e3" title="Flattr" target="_blank"><img src="http://www.mathieurobin.com/wp-content/plugins/flattr/img/flattr-badge-large.png" alt="flattr this!" /></a></p><p><br/><i>Article original de <a href="http://www.mathieurobin.com/2013/03/chroniques-jquery-episode-107/" title="Voir l'article original">MathieuRobin</a><br/>Aller sur <a href="http://planete-jquery.fr" title="">Planète jQuery</a></i></p>]]></content:encoded></item><item rdf:about="http://www.megaptery.com/2013/03/tooltipster-tooltip-jquery-moderne-flexible.html"><title>Megaptery : Tooltipster, une tooltip jQuery moderne et flexible</title><link>http://www.megaptery.com/2013/03/tooltipster-tooltip-jquery-moderne-flexible.html</link><dc:date>2013-03-03T20:57:20+00:00</dc:date><dc:language>fr</dc:language><dc:creator>Megaptery</dc:creator><dc:subject></dc:subject><description></description><content:encoded><![CDATA[<p><strong>Tooltipster</strong> est un plugin jQuery qui permet de mettre en place des infobulles, aussi appelées « tooltip », au rollover sur n’importe quel élément HTML. Facile à prendre en main, le script est moderne et flexible avec une interface totalement customisable.</p>
<p><span></span></p>
<h3>Une infobulle à base de CSS</h3>
<p>Le plugin génère des infobulles simples et élégantes dont le style est entièrement <strong>personnalisable via CSS</strong> (typographie, couleur, padding, ombres, etc) et met à disposition plusieurs paramètres de configuration : position de la tooltip par rapport à la souris, délai d’apparition, largeur automatique ou fixe, affichage et couleur de la flêche, placement « intelligent » pour éviter les collisions… etc. Plusieurs thèmes CSS sont disponibles pour skinner vos tooltips, que vous pouvez bien sûr modifier à votre convenance.</p>
<p><img src="http://www.megaptery.com/wp-content/uploads/2013/03/tooltipster_jquery.jpg" alt="tooltipster_jquery" class="aligncenter size-full wp-image-5312" /></p>
<p>Le contenu de l’infobulle peut provenir de différentes sources (en brut dans le JS, <em>title</em> d’un lien, ou encore appel AJAX) et il existe des fonctions de callback. On retrouve également un paramètre <em>animation</em> qui détermine la manière dont l’infobulle apparaît en arrivée et en sortie, le tout géré en full CSS via les transitions CSS3 (sauf pour IE). Vous pouvez donc modifier ou créer vos propres animations via la feuille de style fournie avec le script. Vous l’aurez compris, le plugin est assez <strong>modulable</strong>.</p>
<h3>Mise en place d’une infobulle</h3>
<p>On commence par inclure jQuery et le plugin Tooltipster (feuille de style et script JS) que vous pouvez télécharger aussi bien sur le site officiel du plugin que sur GitHub :</p>
<pre>
<link rel="stylesheet" type="text/css" href="css/tooltipster.css" />
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.tooltipster.min.js"></script>
</pre>
<p>On définit une classe CSS (ici <em>tooltip</em>) à appliquer sur les éléments HTML sur lesquels on veut afficher les infobulles. Par défaut, Tooltipster utilise l’attribut <em>title</em> pour remplir la bulle, que ce soit une <em>div</em>, une image ou un lien. A noter que le script nous permet d’utiliser n’importe quelle balise HTML dans l’attribut <em>title</em>. Vous pouvez par exemple insérer des images, à condition de spécifier ses dimensions dans les attributs <em>width</em> et <em>height</em>, ou des balises de formatage de texte.</p>
<pre>
<a title="Megaptery, explorez les profondeurs du web" href="http://www.megaptery.com/" class="tooltip">
<img src="http://www.megaptery.com/megaptery_250x250.jpg" width="250" height="250" />
</a>
</pre>
<p>On termine par activer le plugin jQuery. Pour cela, on appelle Tooltipster sur la classe CSS définie précédemment et votre infobulle est alors fonctionnelle :</p>
<pre>
$(document).ready(function() {
$('.tooltip').tooltipster();
});
</pre>
<h3>Utilisation des thèmes CSS</h3>
<p>Le style de vos infobulles peut être facilement changé en modifiant le thème par défaut de Tooltipster qui se trouve dans le fichier <em>tooltipster.css</em>. Vous avez également la possibilité d’ajouter des nouveaux thèmes, très pratique si vous souhaitez en utiliser plusieurs sur votre site). Pour cela, partez de l’exemple et ajouter votre touche personnelle :</p>
<pre>
.my-custom-theme {
border-radius: 5px;
border: 2px solid #000;
background: #4c4c4c;
color: #fff;
}
.my-custom-theme .tooltipster-content {
font-family: Arial, sans-serif;
font-size: 14px;
line-height: 16px;
padding: 8px 10px;
}
</pre>
<p>Il vous suffit alors de sélectionner votre thème personnalisé via le paramètre <em>theme</em> comme ceci :</p>
<pre>
$('.tooltip').tooltipster({
theme: '.my-custom-theme'
});
</pre>
<p>Pour conclure, Tooltipster est un plugin jQuery rapide à mettre en place pour afficher des infobulles entièrement customisables.</p>
<p><strong>Requis</strong> : jQuery<br />
<strong>Compatibilité</strong> : Firefox, Chrome, Opera, Safari, IE8+<br />
<strong>Démonstration</strong> : <a href="http://calebjacob.com/tooltipster/">http://calebjacob.com/tooltipster/</a><br />
<strong>Licence</strong> : MIT</p><p><br/><i>Article original de <a href="http://www.megaptery.com/2013/03/tooltipster-tooltip-jquery-moderne-flexible.html" title="Voir l'article original">Megaptery</a><br/>Aller sur <a href="http://planete-jquery.fr" title="">Planète jQuery</a></i></p>]]></content:encoded></item><item rdf:about="http://www.lafermeduweb.net/billet/spectrum-un-colorpicker-jquery-tres-complet-1527.html"><title>LaFermeDuWeb : Spectrum - Un colorpicker jQuery très complet</title><link>http://www.lafermeduweb.net/billet/spectrum-un-colorpicker-jquery-tres-complet-1527.html</link><dc:date>2013-02-27T09:12:06+00:00</dc:date><dc:language>fr</dc:language><dc:creator>LaFermeDuWeb</dc:creator><dc:subject></dc:subject><description></description><content:encoded><![CDATA[<div>
<a href="http://www.lafermeduweb.net/billet/spectrum-un-colorpicker-jquery-tres-complet-1527.html">
<img style="border: 1px solid #000000;" src="http://www.lafermeduweb.net/images/billets/2013-02/spectrum-colorpicker-javascript_topBillet.jpg" alt="Spectrum - Un colorpicker jQuery très complet" />
</a>
</div>
<div>Spectrum est un plugin jQuery permettant de créer un colorpicker très complet pour vos applications web et mobiles.</div><p><br/><i>Article original de <a href="http://www.lafermeduweb.net/billet/spectrum-un-colorpicker-jquery-tres-complet-1527.html" title="Voir l'article original">LaFermeDuWeb</a><br/>Aller sur <a href="http://planete-jquery.fr" title="">Planète jQuery</a></i></p>]]></content:encoded></item><item rdf:about="http://www.mathieurobin.com/2013/02/chroniques-jquery-episode-106/"><title>MathieuRobin : Chroniques jQuery, épisode 106</title><link>http://www.mathieurobin.com/2013/02/chroniques-jquery-episode-106/</link><dc:date>2013-02-26T14:27:23+00:00</dc:date><dc:language>fr</dc:language><dc:creator>MathieuRobin</dc:creator><dc:subject></dc:subject><description></description><content:encoded><