msdropdown – Plugin jQuery – Des icones dans vos balises select/option

Posted By Franck Pertegas on 9 Mar 2011 in Framework, Javascript, Programmation | 3 comments

Javascript image dropdown (msdropdown), va vous permettre d’intégrer des images dans vos balises html select/option. En effet, à part firefox, aucun navigateur n’autorise de jouer avec le background css des balises option dans vos select. Ce qui fait qu’il est très difficile d’ajouter un icône à un choix dans une option de select, pourtant c’est un effet qui peut s’avérer utile et sympa tout en gardant l’intérêt d’être dans un formulaire. Grâce à msdropdown, vous allez pouvoir corriger le tir et ainsi insérer des images à vos options.

Utilisation :
Vous allez créer normalement vos select/option html, sauf que vous rajouterez un attribut title avec le chemin vers l’image souhaitée :

<select id="webmenu" name="webmenu" onchange="showValue(this.value)">
<option title="icons/icon_calendar.gif" value="calendar">Calendar</option>
<option title="icons/icon_cart.gif" value="shopping_cart">Shopping Cart</option>
<option title="icons/icon_cd.gif" value="cd">CD</option>
<option title="icons/icon_email.gif" selected="selected" value="email">Email</option>
<option title="icons/icon_faq.gif" value="faq">FAQ</option>
<option title="icons/icon_games.gif" value="games">Games</option>
</select>

Dans le head de votre fichier, vous aurez préalable appelé les éléments nécessaire au fonctionnement, à savoir jQuery, msdropdown et son css :

<script src="msdropdown/js/jquery.js" type="text/javascript"></script>
<script src="msdropdown/js/jquery.dd.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="msdropdown/dd.css" />

Puis les éléments javascript :

<script language="javascript">
$(document).ready(function(e) {
    $("body select").msDropDown();
});
</script>

Dans ce cas tous les select sont concernés, utilisé jQuery pour attribuer l’effet sur un id ou une class en particulier.

Retrouvez le site et la documentation ici : http://www.marghoobsuleman.com/jquery-image-dropdown
Et une démonstration ici : http://www.marghoobsuleman.com/mywork/jcomponents/image-dropdown/samples/mouse-events.html

Articles qui peuvent vous intéresser :

• Pixlr – Editeur d’images en ligne – Un photoshop sur le net ?
• FullCalendar – Plugin jQuery – Créez vos propres agendas comme Google
• Sortie de jQuery 1.5
• GMAP3 – Plugin jQuery – L’API Google Map v.3 Integration à la sauce jQuery
• TinyMCE – Un nouveau site officiel