Chalalo Land

Tecnologías ASP.NET y un poco Más

Contacto


 Si quierer cooperar, yo feliz, muy agradecido :)

De donde me Visitan?

Locations of visitors to this page

Generic Content

Si te gustaron los articulos, y te animas te estaría muy agradecido!


Recent Posts

Tags

Community

Blogs de MVP

Amigos Geeks

Blogs Imperdibles

GODS

Archives

Email Notifications

[Tips] Dale más look a los DropDownList con DropKick

DropKick es un plugin para JQuery que permite personalizar el look de los dropdowns, y que la customización visual suele ser algo engorroso y a menudo estas customizaciones carecen de  comodidades como la navegación por teclado, la idea de Dropkick, es que esta tarea sea lo más fácil posible.

Descarga en:
http://jamielottering.github.com/DropKick/

Luego, tal como indica la documentación, agregamos los script (el del plugin ,el de jquery y los archivos css asociados)

<link rel="stylesheet" href="example/example.css" type="text/css" />
<link rel="stylesheet" href="dropkick.css" type="text/css" />
<link href='http://fonts.googleapis.com/css?family=Carter+One&v1'
rel='stylesheet' type='text/css' 
/>
<script src=https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js 
   type="text/javascript" charset="utf-8"></script>
<script src="jquery.dropkick-1.0.0.js" type="text/javascript" charset="utf-8">
</
script
>

 

Nota: El autor indica que no tenemos que preocuparnos mucho por el archivo example.css , pero inclúyanlo, tiene los css que setean los estilos de los <ul> y <li>

En nuestro proyecto vamos a tener simplemente un dropdown junto a un datasource (si , ya se qué los más estrictos  no les gusta, pero es solo con fines de ejemplificar) el cual obtiene los datos de la tabla products de NORTHWND.MDF.

image

Después agregamos el código en evento ready de Jquery:

    $('#DropDownList1').dropkick();

Y listo, el ejemplo de la derecha tiene aplicado el formato.

image image

De todas maneras puedes crear tu propio estilo con un mínimo esfuerzo y agregar eventos al dropdown:

  $('#DropDownList1').dropkick({
        theme: 'black',
         change: function (value, label) {
         $(this).dropkick('theme', value);
            }
   });

image

Obviamente puedes aprovechar este plugin con otras tecnologías como ASP.NET MVC , WebMatrix, PHP, etc.

Lo encontré sencillo de utilizar y quería compartirlo, le puede dar un look muy bueno a tus controles Sonrisa

Saludos,
Gonzalo

Posted: 7/7/2011 2:44 por Gonzalo Perez | con 10 comment(s)
Archivado en: ,
Comparte este post:

Comentarios

bpbrainiak ha opinado:

muy buen articulo, vamos a probarlo

# July 7, 2011 5:09 AM

Isidro ha opinado:

Gracias! , yo he usado estos http://uniformjs.com/

# July 7, 2011 3:41 PM

Andrés ha opinado:

Gracias por el dato, esta muy bueno, exelente post.

# July 7, 2011 4:12 PM

Gonzalo Perez ha opinado:

gracias por los comentarios, Isidro,esta muy bueno ese plugin!

# July 7, 2011 5:18 PM

Isidro ha opinado:

De nada, lo importante es Compartir.

# July 7, 2011 5:53 PM

gabrielvilu ha opinado:

Buen artículo, lo encontré bastante útil

el de @Isidro también xD

# July 9, 2011 7:02 PM

Alfonso ha opinado:

Oye tengo una pregunta, quisa absurda ya que soy novato en Jquery y AJAX, mi pregunta es yo tengo un UpdatePanel, y pongo mi DropDown adentro, cuando pongo el codigo del estilo en el $(document).ready funciona la primera vez, pero cuando presiono un boton o hago un postBack dentro del updatepanel, el estilo se pierde, como puedo solucionar esto?

# July 13, 2011 11:34 PM

IsakMtz ha opinado:

Gracias, buen tip, Saludos.

# July 14, 2011 5:41 PM

@eduvergara ha opinado:

Impecable!

Gracias.

# August 1, 2011 5:47 AM

renaJquery ha opinado:

Hola.. excelente aporte... pero no he podido lograr cargar un Select dinamico utilizando esta libreria.... es posible hacer eso ?? es un poco urgente ! muchisimas gracias !

# October 18, 2011 6:48 PM