SummArg | Cursos y recursos para webmasters

23/06/2012

Listas desplegables con estilo moderno y jQuery: ddSlick

ddSlick es un plugin para jQuery que nos permite convertir un select común y corriente en una moderna lista desplegable, con imágenes y texto a discreción. Su uso es muy simple, tras linkear jQuery y el propio plugin podemos insertar un select con sus opciones de la siguiente manera:

<select id="demo-htmlselect">
 <option value="0" data-imagesrc="http://dl.dropbox.com/u/40036711/Images/facebook-icon-32.png"
 data-description="Description with Facebook">Facebook</option>
 <option value="1" data-imagesrc="http://dl.dropbox.com/u/40036711/Images/twitter-icon-32.png"
 data-description="Description with Twitter">Twitter</option>
 <option value="2" selected="selected" data-imagesrc="http://dl.dropbox.com/u/40036711/Images/linkedin-icon-32.png"
 data-description="Description with LinkedIn">LinkedIn</option>
 <option value="3" data-imagesrc="http://dl.dropbox.com/u/40036711/Images/foursquare-icon-32.png"
 data-description="Description with Foursquare">Foursquare</option>
 </select>

Y ahora bastará con activar el script para el ID #demo-htmlselect.

<script type=”text/javascript”>
$(‘#demo-htmlselect’).ddslick();
</script>

Es fácil de configurar e insertar en cualquier proyecto. En el sitio oficial veremos variedad de demos con sus respectivos códigos.

Sitio oficial

Dejar un comentario