NovaMonoFix
Errores PHP
X
Usuario
Password
0 FPS

devildrey33_ListaDesplegable 2.0 BETA

20 de Enero del 2013 por Josep Antoni Bover, 8 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 BETA

Hace más de un año cree un control desplegable para esta web el cual me tenía que servir para cambiar las categorías del índice. Dicho sea de paso ese control era muy precario pero cumplía perfectamente su función para esta web.

Pero hace unos días, tuve que lidiar con ciertos problemas que quise solucionar con ese control, y al ver lo nefasto que era, me decidí por crear uno nuevo desde cero y utilizando únicamente JavaScript con un poco de CSS.

El resultado visualmente no varía mucho, pero a la hora de programar con él la cosa cambia enormemente a mejor. Para empezar se puede manipular todo el control dinámicamente una vez creado mediante JavaScript, esto quiere decir que podemos añadir / modificar / eliminar items después de haber creado el control, además también lo he creado de forma que se pueda desplegar hacia abajo o hacia arriba, de esta forma también puedo añadirlo al footer sin cargarme el diseño de la web.


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 :

Inicialización y creación del control
1
2
3
4
5
6
7
8
9
10
11
<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("IDListaDesplegable", ArrayItems, FuncionOnClick);
// Definición de la función que recibirá cuando hacemos click en un item
function FuncionOnClick(Combo) {
// Muestro una ventana que nos dice el indice del item presionado, y el texto del item presionado
alert(Combo.Seleccion() + " " + Combo.Item(Combo.Seleccion()).Texto());
}
</script>

Por último nos quedara crear la etiqueta del control donde queramos dentro del body de nuestra pagina.

Creación de la etiqueta
1
2
3
4
<!-- Etiqueta personalizada -->
<devildrey33_ListaDesplegable id="IDListaDesplegable"></devildrey33_ListaDesplegable>
<!-- Etiqueta div -->
<div class="devildrey33_ListaDesplegable" id="IDListaDesplegable"></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.


devildrey33_ListaDesplegable

A continuación podeis ver una referencia completa de todas las funciónes disponibles para trabajar con este objeto.

Función 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, nItems, FuncionOnChange, [opcional] Opciones)

Parámetros

nID ID única para la etiqueta principal del combobox (la etiqueta debe ser un <div class='devildrey33_ListaDesplegable'> o un <devildrey33_ListaDesplegable>.
nItems Array que contiene los items que se incluirán inicialmente en el control.
FuncionOnChange Función que recibira cuando el usuario seleccione un item. Esta función debe tener un parámetro, que sera el objeto devildrey33_ListaDesplegable que envia el evento.
Opciones [opcional] Array que contiene una o mas opciones de creación para este control.
MostrarItemSeleccionadoEnLista Esta opción permite indicar al control que siempre debe mostrar el item seleccionado dentro de la lista. Este párametro puede ser true o false. Por defecto el item seleccionado se oculta en la lista, y solo se muestra en la cabecera del control.
DesplegarListaHaciaArriba 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.
OrdenarItems Esta opción permite especificar el orden por defecto al agregar items dentro del control. Puede ser null (se dejará intacto), "OrdenAsc", "OrdenDesc", "?" (Aleatório). Por defecto es null.
Animacion Esta opción permite especificar si el control usara una animacion al mostrar y ocultar la lista. Puede ser true o false. Por defecto es true.
AnimacionTiempo Esta opción permite especificar cuanto tiempo en milisegundos durarán las animaciones al mostrar y ocultar el control. Por defecto es 100.
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.
ItemSeleccionado Esta opción permite especificar la posición del item seleccionado inicialmente al crear el control. Por defecto es 0.

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 imagenes ademas de texto.
nPos [opcional] Posición para el item, tambien puede ser "Inicio", "Final", "OrdenAsc", "OrdenDesc", "?" (Aleatório).

Retorno


Esta función no devuelve nada.

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 reseteara a la posición 0.

Prototipo

function EliminarItem(nPos)

Parámetros


nPos Posición del item que queremos eliminar.

Retorno


Esta función no devuelve nada.

Item Función que devuelve el item de la posición especificada.

Función "Item"


Esta función devuelve el item de la posición especificada en forma de devildrey33_ListaDesplegable_Item.

Prototipo

function Item(nPos)

Parámetros


nPos Posición del item que queremos obtener.

Retorno


Esta función devuelve el item especificado en forma de devildrey33_ListaDesplegable_Item.

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.

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 devuleve la posición actual de la selección.

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.


devildrey33_ListaDesplegable_Item

A continuación podeis ver una referencia completa de todas las funciónes disponibles para trabajar con este objeto.

Función Descripción
Objeto Variable que apunta al div que contiene el item.

Variable Objeto


Esta variable es un acceso directo al tag que contiene el item.

Mucho cuidado al utilizarla de no borrar el objeto.

Texto Función que permite asignar / obtener el texto del item.

Función "Texto"


Esta función se usa para asignar o obtener el texto del item.

Prototipo

function Texto([opcional] nTexto)

Parámetros


nTexto [opcional] Si especificamos el parámetro podemos asignar el texto para el item. Si omitimos el parámetro la función devolvera el texto del item.

Retorno


Esta función devuelve el texto del item si omitimos el parámetro nTexto.

Visible Función para saber si el item es visible en la lista o no.

Función "Visible"


Esta función nos dice si el item es visible o no.
Puede haber un item invisible si la opcion "MostrarItemSeleccionadoEnLista" es false. Este item será el seleccionado.

Parámetros


Sin parámetros.

Retorno


Devuelve true si el item es visible, false en caso contrario.



Compatibilidad

Este control es compatible con todos los navegadores actuales incluyendo Internet Explorer 9. Para Internet Explorer 8 e inferiores no funciona... para la versión 2.0 final intentare que funcione incluso en Internet Explorer 6, aunque quizas sea mas fácil enseñarle a un burro a patinar...

Versión actual : 2.0 BETA