devildrey33_ListaDesplegable 2.0 BETA
Categorías : JavaScript, HTML, Programación.
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 :
<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("IDListaDesplegable", ArrayItems, FuncionOnClick);// Definición de la función que recibirá cuando hacemos click en un itemfunction FuncionOnClick(Combo) {// Muestro una ventana que nos dice el indice del item presionado, y el texto del item presionadoalert(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.
<!-- Etiqueta personalizada --><devildrey33_ListaDesplegable id="IDListaDesplegable"></devildrey33_ListaDesplegable><!-- Etiqueta div --><div class="devildrey33_ListaDesplegable" id="IDListaDesplegable"></div>
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.
|
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. |
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.
| 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. |
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