image+combobox

=Image Combobox=


 * @http://www.marghoobsuleman.com/jquery-image-dropdown
 * permite poner imágenes al lado de los textos de un combo
 * descargar la versión 2.36 de: @http://marghoobsuleman.com/sites/default/files/jquery-image-dropdown-2.36.zip
 * copiar **jquery.dd.js** a la carpeta de scripts
 * copiar **dd.css** y **dd_arrow.gif** a la carpeta Styles
 * poner las imágenes en la librería de Imagenes (1star.png, 2star.png, etc)
 * modificar dd.css para que apunte a la librería de imágenes
 * necesita las librerías de jQuery

Ejemplo usando ASP.NET


code format="html4strict"  "> code

code format="html4strict"  $(document).ready(function (e) {        try {             $("#lstGrades").msDropDown;         } catch (e) {             alert(e.message);         }     }); Combo with images

  code

code format="csharp" protected void Page_Load(object sender, EventArgs e)   {

int i = 0; foreach (Grade grade in grades) {           lstGrades.Items.Add(new ListItem(grade.Name, grade.Id.ToString)); lstGrades.Items[i].Attributes.Add("title", "img/" + grade.Id.ToString + "stars.png"); i++; }       lstGrades.Items.Insert(0, "[any]"); lstGrades.SelectedIndex = 0; }

public class Grade {       public int Id {get; set; } public string Name { get; set; } }

protected static List grades = new List {       new Grade {Id = 1, Name = "1 star"}, new Grade {Id = 2, Name = "2 star"}, new Grade {Id = 3, Name = "3 star"}, new Grade {Id = 4, Name = "4 star"}, new Grade {Id = 5, Name = "5 star"} }; } code

opciones

 * El icono superior de la derecha es **dd_arrow.gif** y lo ponemos en la misma carpeta donde está **dd.css**
 * En **dd.css** el skin por omisión es **skin1** y es donde podemos hacer las modificaciones
 * .ddTitle: cambiar el color de fondo del título
 * span.arrow: cambiar la imagen de la flecha del título
 * .ddChild: cambiar los items (su fondo, etc=, cuando se seleccionan o cuando se pasa por encima)