devildrey33_ListaDesplegable 2.0 FINAL
Categorías : JavaScript, HTML, Programación.

Hace unos días os presentaba un control llamado 'devildrey33_ComboBox2' en fase beta, pues bien ahora os dejo la versión final, que por cierto he renombrado a 'devildrey33_ListaDesplegable' porque me parece más adecuado y describe mejor al control.
Entre las mejoras hay que destacar que ahora es compatible incluso con IE6 (y me ha costado bastante conseguir-lo) aunque hay una opción que solo está disponible para IE9 además de para todos los navegadores actuales.
También he añadido algunas opciones nuevas, ahora se puede especificar un ancho mínimo para el control, se puede especificar si deseamos ocultar la lista una vez seleccionado un nuevo item, y he modificado la creación del control de forma que la lista de items y la función que recibía cuando se cambiaba la selección son ahora opcionales.
Creación del control
Lo primero será añadir la cabecera de javascript y el archivo css en el head
de nuestro documento web :
<script type="text/javascript" src="./js/devildrey33_ListaDesplegable.js" ></script><link rel="stylesheet" href="./css/devildrey33_ListaDesplegable.css" type="text/css" />
Luego debemos crear un pequeño script para inicializar el control, preferiblemente en el head
de nuestro documento web :
<script type="text/javascript">// Array con los items que queremos que se muestrenvar ArrayItems = Array("Item1", "Item2", "Item3", "Item4");// Creación del control mediante JavaScriptListaDesplegable1 = new devildrey33_ListaDesplegable("MiLista", { "ListaItems" : ArrayItems });</script>
Por último nos quedara crear la etiqueta del control donde queramos dentro del body
de nuestra página.
<!-- Etiqueta personalizada --><devildrey33_ListaDesplegable id="MiLista"></devildrey33_ListaDesplegable><!-- Etiqueta div --><div class="devildrey33_ListaDesplegable" id="MiLista"></div>
Estructuración interna del control
Pasa el mouse por encima de las etiquetas para ver el área que ocupan, y una breve explicación de para que se usa cada una. (Si haces click en la etiqueta se desactivará el efecto hover, y podrás ver mejor las explicaciones.)

<div class='devildrey33_ListaDesplegable'> o <devildrey33_ListaDesplegable>
Esta es la etiqueta principal que contiene todo el control, pero realmente solo sirve para ocupar el espacio necesario dentro del documento web.
A la hora de modificar estilos para el control, no debes tocar ningún estilo de esta etiqueta, ya que está pensada para ocupar lo mismo que
<div class='devildrey33_ListaDesplegable_Interna'>
que es la que realmente tiene los estilos para el control (colores, fuente, márgenes, etc..)Puedes acceder a esta etiqueta mediante javascript desde la siguiente variable :
MiLista.EtiquetaListaDesplegable
.NOTA : Si quieres que el control sea compatible con IE8, 7 y 6 debes crearlo con un
div
, y no con la etiqueta devildrey33_ListaDesplegable
.
<div class='devildrey33_ListaDesplegable_Interna'>
Esta etiqueta tiene la posición absoluta de forma que el navegador no computa su tamaño para adaptar las demás etiquetas de la página web. Por eso cuando se muestra la lista no se baja el contenido de la pagina web y queda por encima de todo, tapando lo que pueda tener debajo.
Si quieres modificar el color del fondo, el borde, o el color del texto sin resaltar del control debes retocar esta clase en el CSS.
NOTA : No debes modificar la propiedad
overflow
o de lo contrario el control dejaría de mostrarse y ocultarse correctamente.Puedes acceder a esta etiqueta mediante javascript desde la siguiente variable :
MiLista.ObjetoListaDesplegable
.
<span class='devildrey33_ListaDesplegable_ItemSeleccionado'>
Esta etiqueta contiene únicamente el texto del item seleccionado (puede ser código html por lo que se pueden añadir incluso imágenes con texto).
Si quieres puedes modificar el color del texto para esta etiqueta desde el CSS, pero por defecto obtiene su color del texto de la clase
devildrey33_ListaDesplegable_Interna
.Puedes acceder a esta etiqueta mediante javascript desde la siguiente variable :
MiLista.ObjetoItemSeleccionado
.Para obtener el texto seleccionado mediante javascript utiliza la siguiente función :
MiLista.Texto()
.
<div id='devildrey33_ListaDesplegable_Flecha_IDControl'>
Esta etiqueta contiene únicamente la imagen de la flecha hacia arriba o hacia abajo según configures la opción "DesplegarListaHaciaArriba", que por defecto se desplegará hacia abajo.
Si quieres puedes substituir la imagen desde el CSS, lo único que debes tener en cuenta es que no debe ser más alta que el ItemSeleccionado, de esa forma se centrará verticalmente.
NOTA : En IE 8, 7, 6 no aparecerá nunca esta etiqueta ya que estos navegadores no soportan correctamente la propiedad
float
del CSS. Además IE6 no soporta imágenes con fondos transparentes.
<ul class='devildrey33_ListaDesplegable_ListaItems'>
Esta etiqueta contiene la lista de items oculta que se muestra al pasar el mouse por encima del control. Por defecto suele estar después de las etiquetas del ItemSeleccionado y de la Flecha, pero si configuras la opcion "DesplegarListaHaciaArriba" como true, se colocara antes de estas etiquetas. Por defecto se mostrara el ItemSeleccionado en la lista si no especificas la opción "OcultarItemSeleccionado" a true.
NOTA : no es recomendable tocar los estilos de
.devildrey33_ListaDesplegable_ListaItems
, ya que están pensados para que no se descuadre el control tanto si se despliega hacia abajo como hacia arriba.Puedes acceder a esta etiqueta mediante javascript desde la siguiente variable :
MiLista.ObjetoListaItems
.
<li class='devildrey33_ListaDesplegable_Item'>
Estas etiquetas contienen el texto de cada item dentro de la lista (puede ser código html por lo que se pueden añadir incluso imágenes con texto). Al hacer click en una de ellas quedara marcada como el ItemSeleccionado.
Si quieres puedes modificar el color del texto tanto normal como resaltado, pero ojo porque en IE 6 se usa la clase
devildrey33_ListaDesplegable_ItemResaltado
como re-emplazo a devildrey33_ListaDesplegable_Item:hover
ya que IE6 no soporta la propiedad hover si no es en etiquetas <a>
.Para acceder al texto de un item desde javascript puedes usar la siguiente función :
MiLista.Texto([opcional] Posición, [opcional] NuevoTexto)
.
Funciones y miembros del objeto devildrey33_ListaDesplegable
A continuación tienes una lista detallada de todos las funciones y miebros disponibles para este objeto :
Función / miembro | Descripción |
constructor | Constructor para crear el control. |
Constructor
Este constructor crea el control según los parámetros especificados.
Prototipo
function devildrey33_ListaDesplegable(nID, [opcional] Opciones);
Parámetros
nID | ID única para la etiqueta principal del control (la etiqueta debe ser un <div class='devildrey33_ListaDesplegable'> o una etiqueta personalizada <devildrey33_ListaDesplegable> ). |
Opciones [opcional] | Array que contiene una o más opciones de creación para este control. |
Lista de opciones
Puedes especificar tantas opciones como necesites, las que no especifiques usaran sus valores por defecto.
Animacion | Esta opción permite especificar si el control usara una animación al mostrar y ocultar la lista. Puede ser true o false. Por defecto es true. |
AnimacionTiempo | Esta opción permite especificar cuánto tiempo en milisegundos durarán las animaciones al mostrar y ocultar la lista. Por defecto es 100. |
DesplegarHaciaArriba | Esta opción permite indicar hacia donde debe desplegarse la lista de items, hacia arriba o hacia abajo. Por defecto es false, por lo que se despliega hacia abajo. |
FuncionItemClick | Esta opción permite enlazar el evento OnClick de los items de la lista a la función que especifiques. La función que reciba este evento debe tener 2 parámetros, el primero será el control ListaDesplegable que manda el evento, y el segundo parámetro será la posición del item en el que se ha hecho click. function MiEventoOnClick(Lista, Posicion) { } |
FuncionItemMouseOver | Esta opción permite enlazar el evento OnMouseOver de los items de la lista a la función que especifiques. La función que reciba este evento debe tener 2 parámetros, el primero será el control ListaDesplegable que manda el evento, y el segundo parámetro será la posición del item en el que se ha situado el mouse. function MiEventoOnMouseOver(Lista, Posicion) { } |
FuncionItemMouseOut | Esta opción permite enlazar el evento OnMouseOut de los items de la lista a la función que especifiques. La función que reciba este evento debe tener 2 parámetros, el primero será el control ListaDesplegable que manda el evento, y el segundo parámetro será la posición del item que avisa de que el mouse ha salido de su área. function MiEventoOnMouseOut(Lista, Posicion) { } |
FuncionItemMostrarLista | Esta opción permite determinar cuando ha terminado de mostrarse la lista, de forma que ejecutara la función que le especifiques. La función que reciba este evento debe tener 1 parámetro, que será el control ListaDesplegable que manda el evento. function MiEventoMostrarLista(Lista) { } |
FuncionItemOcultarLista | Esta opción permite determinar cuando ha terminado de ocultarse la lista, de forma que ejecutara la función que le especifiques. La función que reciba este evento debe tener 1 parámetro, que será el control ListaDesplegable que manda el evento. function MiEventoOcultarLista(Lista) { } |
ItemSeleccionado | Esta opción permite especificar la posición del item seleccionado inicialmente al crear el control. Por defecto es 0. |
MinimoAncho | Esta opción permite especificar el ancho mínimo en pixeles que tendrá el control sin contar padding , margin , y border . Por defecto es 60. |
MinimoAlto | Esta opción permite especificar la altura mínima en pixeles que tendrá el control cuando la lista permanece oculta, sin contar padding , margin , y border . Por defecto es 0 lo que hace que el control calcule automáticamente el mínimo necesario según la fuente que está usando. |
MostrarFlecha | Esta opción permite indicar si se mostrara una imagen con una flecha a la derecha del control para indicar hacia donde se despliega. Puede ser true o false. Por defecto es true. : Esta función no se soporta en IE8, 7, y 6. |
ListaItems | Esta opción permite especificar los items que se añadirán inicialmente a la lista mediante un array. Por ejemplo : Array("Item1", "Item2", "Item3", "Item4", "Item5") |
OcultarItemSeleccionado | Esta opción permite indicar al control que debe ocultar de la lista el item actualmente seleccionado por lo que solo aparecerá en la cabecera, y no en la lista. Puede ser true o false, por defecto es false. |
OcultarListaAlHacerClick | Esta opción permite especificar si la lista debe ocultarse al hacer click encima de un item o no. Puede ser true o false, por defecto es true. |
OrdenarItems | Esta opción permite especificar el orden por defecto al agregar items dentro del control. Puede ser null (se dejará intacto), "OrdenAsc", "OrdenDesc", "Aleatorio". Por defecto es null por lo que los items se añadirán al final. |
Retorno
Este constructor no devuelve nada.
AgregarItem | Función que permite agregar items al control dinamicamente. |
Función "AgregarItem"
Esta función se usa para agregar un item en la posición especificada, se puede omitir la posición para agregar el item al final de la lista.
Prototipo
function AgregarItem(nTexto, [opcional] nPos);
Parámetros
nTexto | Texto para el item, puede incluir etiquetas HTML, por ejemplo podemos poner imágenes además de texto. |
nPos [opcional] | Posición para el item, también puede ser "Inicio", "Final", "OrdenAsc", "OrdenDesc", "Aleatorio". Si no se especifica nada el item irá a parar al final siempre que no se haya especificado la opción "OrdenarItems" al crear el control, en cuyo caso seguirá ese orden. |
"OrdenarItems" : "OrdenAsc"
al crear el control pero quieres agregar el item al final, especificando "Final" en la posición conseguirás ese efecto.Retorno
Devuelve true si se ha creado el item, devuelve false si especificas una posición invalida (valores inferiores a cero, o superiores al total de items).
BorrarTodo | Función para borrar todo el contenido de este control. |
Función "BorrarTodo"
Esta función borra todo el contenido del control, incluido el texto seleccionado.
Prototipo
function BorrarTodo();
Parámetros
Sin parámetros.
Retorno
Esta función no devuelve nada.
EliminarItem | Función para eliminar el item especificado por la posición. |
Función "EliminarItem"
Esta función borra el item especificado por la posición. Si el item que queremos borrar es el item seleccionado, la selección se reseteará a la posición 0.
Prototipo
function EliminarItem(nPos);
Parámetros
nPos | Posición del item que queremos eliminar. |
Retorno
Devuelve true si se ha eliminado el item, o false si especificas una posición inválida (valores inferiores a cero, o superiores al total de items).
EtiquetaListaDesplegable | Variable que contiene la etiqueta <devildrey33_ListaDesplegable> o <div class='devildrey33_ListaDesplegable'> |
Miembro EtiquetaListaDesplegable
Esta variable contiene la etiqueta
<devildrey33_ListaDesplegable>
o <div class='devildrey33_ListaDesplegable'>
.ID | Variable que contiene la ID unica para este control |
Miembro ID
Esta variable contiene la ID que se ha especificado en el constructor.
MostrarLista | Función despliega la lista de items. |
Función "MostrarLista"
Esta función despliega la lista de items del control.
Prototipo
function MostrarLista();
Parámetros
Sin parámetros.
Retorno
Esta función no devuelve nada.
ObjetoItemSeleccionado | Variable que contiene la etiqueta del item seleccionado. |
Miembro ObjetoItemSeleccionado
Esta variable contiene la etiqueta del item seleccionado. El item seleccionado es la parte de la cabecera que muestra el texto seleccionado incluso cuando la lista permanece oculta.
Para verlo mejor echa un vistazo en la Estructuración interna del control, el span con la clase
devildrey33_ListaDesplegable_ItemSeleccionado
ObjetoListaDesplegable | Variable que contiene la etiqueta padre que contiene todo el control. |
Miembro ObjetoListaDesplegable
Esta variable contiene la etiqueta con posición absoluta de la que descienden todas las demás etiquetas necesarias para el control.
Para verlo mejor echa un vistazo en la estructuración interna del control, el div con la clase
devildrey33_ListaDesplegable_Interna
ObjetoListaItems | Variable que contiene la etiqueta de la lista de items. |
Miembro ObjetoListaItems
Esta variable contiene la etiqueta de la que descienden todos los items, y que representa la lista oculta de este control.
Para verlo mejor echa un vistazo en la estructuración interna del control, el div con la clase
devildrey33_ListaDesplegable_ListaItems
OcultarLista | Función oculta la lista de items. |
Función "OcultarLista"
Esta función oculta la lista de items del control.
Prototipo
function OcultarLista();
Parámetros
Sin parámetros.
Retorno
Esta función no devuelve nada.
Seleccion | Función para asignar / obtener la posición de la selección. |
Función "Seleccion"
Esta función se usa para asignar o obtener la posición de la selección.
Prototipo
function Seleccion([opcional] nPos);
Parámetros
nPos [opcional] | Posición del item que queremos seleccionar. Si omitimos este parámetro esta función devolverá el item seleccionado |
Retorno
Si no se especifica ninguna posición, esta función devuelve la posición actual de la selección.
Si se especifica una posición devuelve true si es posible asignar esa nueva posición, o false si es menor que cero o mas grande que el total de items.
Texto | Función que nos permite asignar / obtener el texto de un item. |
Función "Texto"
Esta función se usa para asingar o obtener el texto de un item.
Prototipo
function Texto([opcional] nPosicion, [opcional] nTexto);
Parámetros
nPosicion [opcional] | Posición del item que queremos asignar / obtener el texto. Si omitimos este parámetro la función entiende que queremos obtener el texto seleccionado. |
nTexto [opcional] | Nuevo texto a asignar. Si omitimos este parámetro, la función entiende que queremos obtener el texto y no asignarlo. |
Retorno
Si omitimos los dos parámetros devuelve el texto del item seleccionado.
Si omitimos el parámetro nTexto, devuelve el texto del item especificado en la posición. En caso de error devuelve un texto indicando el error.
Si no omitimos ningún parámetro, se intentará cambiar el texto de la posición especificada, devolverá true en caso de éxito, o false en caso de error.
TotalItems | Función para obtener el total de items que contiene este control. |
Novedades de la versión 2.0 FINAL
-
Compatible con IE 6, 7 y 8, exceptuando la opción "MostrarFlecha".
IE8 e inferiores tienen un bug con el
float
que hace inviable añadir una imagen a la derecha, sin tener que reprogramar el control por completo. -
Se han eliminado las transparencias con rgba ya que IE8 e inferiores no las soportaban.
Si no necesitamos soporte para IE6 podemos añadir un rbga antes del rgb en el CSS.
- Añadido efecto hover para IE6 hecho con javascript, ya que el selector
:hover
solo funciona en etiquetas<a>
. - Se ha renombrado el control de devildrey33_ComboBox a devildrey33_ListaDesplegable.
- Añadida opción para especificar un ancho mínimo para el control "MinimoAncho" sin contar con el padding y el borde.
- Posibilidad de crear el control sin items inicialmente.
- Añadida opción para evitar que se oculte la lista al hacer click en un item "OcultarListaAlHacerClick".
- Se han retocado los parámetros del constructor, ahora todos los parámetros excepto la ID del control son opcionales.
- Al mostrar la lista se pondrá por delante de todo incluso de otras listas desplegables (
z-index:100
). - Solucionado bug a la hora de añadir items en orden aleatório.
- Se ha rediseñado el sistema para obtener el tamaño necesario para mostrar el control.
- Al añadir / modificar / eliminar un item ahora se actualiza el tamaño del control.
- Se ha eliminado la función
Item()
que permitía acceder a los textos de cada item, ahora existe la funciónTexto()
para ello. - Se ha establecido una altura mínima de 19 pixeles para el control, ya que al borrar todos los items se quedaba demasiado pequeño.
-
Se ha añadido la opción "MinimoAlto" que se refiere a la altura mínima del item seleccionado.
La altura mínima se calcula a partir del item seleccionado ya que los paddings y el borde pueden variar según el CSS.
Por defecto este valor es 0 lo que hace que se calcule automáticamente. - Se ha modificado el sistema para almacenar la selección, antes se guardaba la posición del item seleccionado, ahora se guarda el objeto directamente.
- Solucionado bug de la función
EliminarItem()
que no actualizaba correctamente la selección en ningún momento. - Solucionado bug de la función
AgregarItem()
que no actualizaba correctamente la selección una vez creado el control. - Se han retocado varias funciones para que devuelvan "true" o "false" en caso de funcionar o de tener un error.
- Se ha creado un ejemplo extenso para poder testear el control al 100%, que además permite configurar toda la creación de este.
- Añadidas opciones "FuncionItemMouseOver" y "FuncionItemMouseOut" que permiten responder a los eventos
mouseover
ymouseout
de los items. - Añadidas opciones "FuncionMostrarLista" y "FuncionOcultarLista" que enlazan una función para saber cuando se termina de desplegar / ocultar la lista.
Ver ejemplo simple | Ver ejemplo con imágenes | Ver ejemplo creación |