<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>JQuery, PHP, html, design... // arnaud-k : un blog de geek &#187; Delicious</title>
	<atom:link href="http://blog.arnaud-k.fr/tag/delicious/feed/" rel="self" type="application/rss+xml" />
	<link>http://blog.arnaud-k.fr</link>
	<description>Le blog JQuery, Html, Web Design</description>
	<lastBuildDate>Thu, 21 Apr 2011 08:10:17 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.2.1</generator>
		<item>
		<title>Tutorial plugin JQuery : Delectable pour afficher les derniers bookmarks Delicious</title>
		<link>http://blog.arnaud-k.fr/2009/09/15/tutorial-plugin-jquery-delectable-pour-afficher-les-derniers-bookmarks-delicious/</link>
		<comments>http://blog.arnaud-k.fr/2009/09/15/tutorial-plugin-jquery-delectable-pour-afficher-les-derniers-bookmarks-delicious/#comments</comments>
		<pubDate>Tue, 15 Sep 2009 10:05:29 +0000</pubDate>
		<dc:creator>arnaud</dc:creator>
				<category><![CDATA[JQuery]]></category>
		<category><![CDATA[Delicious]]></category>
		<category><![CDATA[plugin JQuery]]></category>

		<guid isPermaLink="false">http://blog.arnaud-k.fr/?p=1344</guid>
		<description><![CDATA[Le plugin JQuery Delectable (encore un plugin par theodin) permet d&#8217;afficher très facilement les dernières adresses ajoutées à un compte Delicious. Il est similaire au plugin JQuery Tweetable dans son fonctionnement. Comme souvent, j&#8217;ai préparé une petite démo : demo&#160;[...]</p> <p class="read-more"><a class="gray normal" href="http://blog.arnaud-k.fr/2009/09/15/tutorial-plugin-jquery-delectable-pour-afficher-les-derniers-bookmarks-delicious/">Lire la suite&#160;&#62;&#62;</a></p>]]></description>
			<content:encoded><![CDATA[<div class="tweetmeme_button" style="">
			<a href="http://api.tweetmeme.com/share?url=http%3A%2F%2Fblog.arnaud-k.fr%2F2009%2F09%2F15%2Ftutorial-plugin-jquery-delectable-pour-afficher-les-derniers-bookmarks-delicious%2F"><br />
				<img src="http://api.tweetmeme.com/imagebutton.gif?url=http%3A%2F%2Fblog.arnaud-k.fr%2F2009%2F09%2F15%2Ftutorial-plugin-jquery-delectable-pour-afficher-les-derniers-bookmarks-delicious%2F&amp;source=arnaudk&amp;style=compact&amp;service=bit.ly&amp;b=2" height="61" width="50" /><br />
			</a>
		</div>
<p><img class="aligncenter size-full wp-image-1345" title="jquery-delectable" src="http://blog.arnaud-k.fr/wp-content/uploads/2009/09/jquery-delectable.png" alt="jquery-delectable" width="600" height="200" /></p>
<p>Le plugin JQuery <a href="http://theodin.co.uk/blog/development/delectable-jquery-plugin.html">Delectable</a> (encore un plugin par <a href="http://theodin.co.uk/blog/l">theodin</a>) permet d&#8217;<strong>afficher très facilement les dernières adresses ajoutées à un compte Delicious</strong>. Il est similaire au <a href="http://blog.arnaud-k.fr/2009/developpement-web/cat-jquery/tutorial-plugin-jquery-tweetable-pour-afficher-le-flux-dun-membre-twitter/">plugin JQuery Tweetable</a> dans son fonctionnement. Comme souvent, j&#8217;ai préparé une petite démo :</p>
<p><a class="demo" title="demo du plugin JQuery Delectable" href="http://blog.arnaud-k.fr/demos/delectable/">demo du plugin JQuery Delectable</a></p>
<p><strong>Le plugin est assez complet</strong> car, en plus d&#8217;afficher l&#8217;URL du bookmark, on peut afficher les tags rattachés et la date d&#8217;ajout. Un système de mise en avant des tags est même intégré lorsque l&#8217;on clique sur un de ces tags.</p>
<p>Comme toujours, il faut <strong>importer JQuery et le plugin </strong>dans sa page HTML :</p>

<div class="wp_syntax"><div class="code"><pre class="html4strict" style="font-family:monospace;"><span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">script</span> <span style="color: #000066;">src</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js&quot;</span> <span style="color: #000066;">type</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;text/javascript&quot;</span>&gt;</span><span style="color: #808080; font-style: italic;">&lt;!--mce:0--&gt;</span><span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">script</span>&gt;</span>
<span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">script</span> <span style="color: #000066;">src</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;js/jquery.delectable.js&quot;</span> <span style="color: #000066;">type</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;text/javascript&quot;</span>&gt;</span><span style="color: #808080; font-style: italic;">&lt;!--mce:1--&gt;</span><span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">script</span>&gt;</span></pre></div></div>

<p>On crée par la suite un bloc vide auquel on donne un id pour le sélectionner avec JQuery :</p>

<div class="wp_syntax"><div class="code"><pre class="html4strict" style="font-family:monospace;">&nbsp;</pre></div></div>

<p>Il faut enfin <strong>initialiser le plugin JQuery</strong> en passant le sélecteur du div créé précédemment et quelques options :</p>

<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;">$<span style="color: #009900;">&#40;</span>document<span style="color: #009900;">&#41;</span>.<span style="color: #660066;">ready</span><span style="color: #009900;">&#40;</span> <span style="color: #003366; font-weight: bold;">function</span> <span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
	$<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'#delicious'</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">delectable</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#123;</span>
                username<span style="color: #339933;">:</span> <span style="color: #3366CC;">'arnaudk'</span><span style="color: #339933;">,</span> <span style="color: #006600; font-style: italic;">// nom d'utilisateur du compte Delicious</span>
                tags<span style="color: #339933;">:</span> <span style="color: #003366; font-weight: bold;">true</span><span style="color: #339933;">,</span> <span style="color: #006600; font-style: italic;">// on affiche ou non les tags</span>
                date<span style="color: #339933;">:</span><span style="color: #003366; font-weight: bold;">true</span><span style="color: #339933;">,</span> <span style="color: #006600; font-style: italic;">// on affiche ou non la date d'ajout du bookmark</span>
                limit<span style="color: #339933;">:</span> <span style="color: #CC0000;">20</span> <span style="color: #006600; font-style: italic;">// nombre de bookmarks à afficher</span>
        <span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></div></div>

<p>Pour conclure, encore <strong>un plugin JQuery permettant de lier les divers réseaux sociaux et autres sites dits &#8217;2.0&#8242;</strong>. On peut maintenant afficher facilement son Twitter, ses dernières photos Flickr et ses derniers bookmarks Delicious sur une même page !</p>


<p>Pas encore de billet sur le même sujet !</p>]]></content:encoded>
			<wfw:commentRss>http://blog.arnaud-k.fr/2009/09/15/tutorial-plugin-jquery-delectable-pour-afficher-les-derniers-bookmarks-delicious/feed/</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
	</channel>
</rss>

