NovaMonoFix
Errores PHP
X
Usuario
Password
0 FPS

devildrey33_ListaDesplegable 2.0 FINAL

20 de Enero del 2013 por Josep Antoni Bover, 0 visitas, 0 comentarios, 0 votos
Categorías : JavaScript, HTML, Programación.
La web está en segundo plano, animación en pausa.
Cargando animación...
devildrey33_ListaDesplegable 2.0 FINAL

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 :

Cabeceras
1
2
<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 :

Para ver una lista completa de las opciones disponibles para este control visita el siguiente enlace : devildrey33_ListaDesplegable::constructor.

Inicialización y creación del control
1
2
3
4
5
6
<script type="text/javascript">


    // Array con los items que queremos que se muestren

    var ArrayItems = Array("Item1", "Item2", "Item3", "Item4");

    // Creación del control mediante JavaScript

    ListaDesplegable1 = 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.

Creación de la etiqueta
1
2
3
4
<!-- Etiqueta personalizada -->

<devildrey33_ListaDesplegable id="MiLista"></devildrey33_ListaDesplegable>

<!-- Etiqueta div -->

<div class="devildrey33_ListaDesplegable" id="MiLista"></div>


Se puede crear con la etiqueta <devildrey33_ListaDesplegable id='IDListaDesplegable'> o con un <div class='devildrey33_ListaDesplegable' id='IDListaDesplegable'> pero solo debes usar una de ellas.


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>
<div class='devildrey33_ListaDesplegable_Interna'>
<span class='devildrey33_ListaDesplegable_ItemSeleccionado'>
<div id='devildrey33_ListaDesplegable_Flecha_IDControl'>
<ul class='devildrey33_ListaDesplegable_ListaItems'>
<li class='devildrey33_ListaDesplegable_Item'>
.......
ListaDesplegable de ejemplo
<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.

Si por ejemplo has especificado la opcion "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'>.

No se recomienda tocar para nada esta etiqueta si no sabes lo que estás haciendo.
ID Variable que contiene la ID unica para este control

Miembro ID


Esta variable contiene la ID que se ha especificado en el constructor.

Puedes usar esta variable para ver su contenido, pero no cambies su valor o su control asociado dejara de funcionar.
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.

la única forma que de error esta función es especificando una posición inválida (menor que cero o mayor que el total de items).

TotalItems Función para obtener el total de items que contiene este control.

Función "TotalItems"


Esta función se usa para obtener el total de items que contiene este control.

Prototipo

function TotalItems();

Parámetros


Sin parámetros.

Retorno


Esta función devuelve el total de items que contiene este control.



Novedades de la versión 2.0 FINAL

Ver ejemplo simple Ver ejemplo con imágenes Ver ejemplo creación
Descargar devildrey33_ListaDesplegable