Personalizando elementos del formulario con CSS

En este artículo quiero tratar el tema sobre cómo ubicar y personalizar los componentes html de un formulario mediante reglas CSS, para mejorar el aspecto visual de nuestra aplicación.
Hoy en día son pocos los sitios que no cuentan con algún formulario, ya sea para autenticación o algún dato que necesita entrar el usuario a la aplicación. Supón que tenemos el siguiente formulario y queremos darle una ubicación específica a las etiquetas con respecto a los campos de texto.

El código HTML del ejemplo anterior es el siguiente:

   1: <form class="my_form">

   2:                 <fieldset>

   3:                     <legend>Alta en el sistema</legend>

   4:                     <label for="nombre">Nombre</label>

   5:                     <input type="text" id="nombre" />

   6:                     <label for="apellidos">Apellidos</label>

   7:                     <input type="text" id="apellidos"/>

   8:                     <label for="dni">DNI</label>

   9:                     <input type="text" id="dni" maxlength="9" />

  10:                     <label for="contrasena">Contraseña</label>

  11:                     <input type="password" id="contrasena" />

  12:                     <input class="btn" type="submit" value="Registrarme" />

  13:                 </fieldset>

  14:             </form>

Si quisiéramos mostrar los <label> encima de los campos de texto aplicando unos estilos sencillos podríamos lograr el efecto mostrado:
Regla CSS:

   1: label { 

   2:      display: block; 

   3:      margin: .5em 0 0 0; 

   4: }

   5: .my_btn { 

   6:       display: block; 

   7:       margin: 1em 0; 

   8: }

Al botón también se le añade una regla CSS para mostrarlo como elemento de bloque y un margen para lograr el efecto deseado.
Si quisiéramos mostrar nuestros elementos <label> al lado izquierdo de los campos de texto, para lograr este resultado:

Código HTML:

   1: <form class="my_form">

   2:             <fieldset>

   3:                 <legend>Alta en el sistema</legend>

   4:                 <div>

   5:                     <label for="nombre">Nombre</label>

   6:                     <input type="text" id="nombre" />

   7:                 </div>

   8:                 <div>

   9:                     <label for="apellidos">Apellidos</label>

  10:                     <input type="text" id="apellidos"/>

  11:                 </div>

  12:                 <div>

  13:                     <label for="dni">DNI</label>

  14:                     <input type="text" id="dni" maxlength="9" />

  15:                 </div>

  16:                 <div>

  17:                     <label for="contrasena">Contraseña</label>

  18:                     <input type="password" id="contrasena" />

  19:                 </div>

  20:                 <input class="my_btn" type="submit" value="Registrarme" />

  21:             </fieldset>

  22:         </form>

A las reglas le agregaríamos:

   1: div { 

   2:      margin: .4em 0; 

   3: } 

   4: div label { 

   5:      width: 25%; 

   6:      float: left; 

   7: } 

   8: div input { 

   9:      width: 70%; 

  10: }

Combinando los ejemplos anteriores con otras reglas CSS además de posicionarlos se pueden cambiar el aspecto y comportamiento visual de los componentes utilizando pseudo-clases después de los selectores.
Espero les haya servido de ayuda.

{ Leer Más }

Trabajo con elementos select multiples (jQuery)

En este artículo quiero tratar el tema sobre cómo trabajar con los componentes html select multiple.

Supón que, en tu sitio tienes un la necesidad de cargar en una vista similar a la que se muestra encima en la que cargas todas las posibles opciones en el componente origen y necesitas que el usuario tenga la capacidad de seleccionar varias de ellas agregándolas al componente destino para luego hacer un tratamiento con las seleccionadas.

Para hacer lo antes comentado se crea la vista con dichos componentes y cargando en el origen los valores deseados. Debajo un ejemplo de cómo quedaría el origen:

   1: <h4>Origen</h4>

   2: <select name="data_source" id="data_source" size="5" multiple>

   3:  <option value="1">opcion 1</option>

   4:  …

   5:  <option value="n">opcion n</option>

   6: </select>

   7: <input type="button" id="asc" value="asc"/>

   8: <input type="button" id="desc" value="desc"/>

Ahora veremos cómo desarrollar las diferentes funcionalidades para los botones, el primer seria el agregar todos (>>):

   1: //se realiza la función en el evento click del botón

   2: $('#all_plus').click(function(e) {

   3:    //se separan del origen y se guardan en una variable los elementos                                                                                             option 

   4:    var $option = $('#data_source option').detach();

   5:    //luego se le agregan al componente destino con la función append

   6:    $('#data_destiny').append($option);

   7: });

La funcionalidad eliminar todos (<<) seria igual solamente habría que intercambiar el origen y el destino en este caso llamados por los id (data_source y data_destiny).

Para las funcionalidades de agregar (>) y eliminar (<), es algo muy parecido solo que hay que tener en cuenta el elemento option seleccionado y no todos los hijos del select, algo como esto es lo que haría falta:

   1: //se realiza la función en el evento click del botón

   2: $('#minus').click(function(e) {

   3:   //en separa del elemento select la opción seleccionada y se guarda en una variable

   4:   var $option = $('#data_destiny :selected').detach();

   5:   //luego se le agrega el otro componente select con la función append

   6:   $('#data_source').append($option);

   7: });

En el ejemplo anterior se mostró el eliminar (<), como se dijo anteriormente solo es cuestión de intercambiar los id para lograr obtener el agregar.

Espero les haya servido de ayuda.

{ Leer Más }

Cargar varios archivos usando CodeIgniter con JQuery 1

En este artículo quiero mostrarles una solución bastante sencilla para generar varios componentes visuales para cargar múltiples archivos.

Partiendo de la necesidad que tuve de subir al servidor varios archivos, y teniendo en cuenta que con el siguiente código incorporas el componente visual que te permite escoger un fichero.

   1: <input type="file" name="file_name" id="file_id"/>

Una variante que tienes para subir múltiples archivos es la de predefinirlos con nombres diferentes pero entonces te limitarías a subir solo la cantidad de predefiniste.

La solución que utilicé para darle solución a mi problema fue de ir adicionando en tiempo real, tantos componentes visuales como necesitara. Para esto le adicioné al lado del componente visual un vínculo vacío con el texto “adicionar”, que es el que se va a cargar con la función de adicionar más elementos visuales. Y un componente input de tipo hidden que fuera almacenando la cantidad de componentes que fuese creando.

   1: <input type="hidden" id="file-number" name="file-number" value="1" />

Inicialmente tiene el valor 1 (value="1") porque por defecto ya tengo creado un componente visual.

Creo un div contenedor que es el que va a tener el elemento actual y los elementos que voy creando.

   1: <div id="file-list">

   2:   Aquí van todos los elementos visuales que se irán creando

   3: </div>

Luego dentro de ese div adiciono el primer componente que se visualizará por defecto y quedaría de esta forma

   1: <div id="file-list">

   2: <input type="file" name="file_name0" id="file_id0"/><a href="" id="add-file" name="add-file">adicionar</a>  

   3: </div>

Una vez introducido el código anterior voy a generar usando JQuery tantos componentes visuales como necesite.

   1: <script type="text/javascript">

   2: $(document).ready(function(){

   3:   $('.add-file').live('click',function(event){

   4:         event.preventDefault();               

   5:         var  pos = Number($("#file-number").val());

   6: var new_component = ' <div class="file"> <input type="file"  name="file_name'+pos+'" id=" file_id'+pos+'" /> &nbsp;<a href="" id="del-file" class="del-file">eliminar</a></div>';

   7: $('#file-list).append(new_component);                        $("#file-number").val(Number($("#file-number").val())+1);

   8:     });

   9: });

  10: </script>

La variable pos guarda el número actual del componente oculto (<input type="hidden"……) que me servirá para darle nombre diferente a los componentes que voy creando.

   1: var new_component = ' <div class="file"> <input type="file"  name="file_name'+pos+'" id=" file_id'+pos+'" /> &nbsp;<a href="" id="del-file" class="del-file">eliminar</a></div>';

Nótese que en la variable new_component voy creando un input de tipo file con el mismo nombre lo que lo diferencia es el final que es el valor del componente de tipo hidden que creé este también me servirá más adelante para saber la cantidad de componentes que tengo en mi página y para saber la cantidad de veces tengo que recorrer el ciclo para adicionar todos los archivos de que seleccioné y además un nuevo componente que es un vínculo vacío que tendrá como id del-file con el texto eliminar que será al que le cargaré la función de eliminar el componente al cual se encuentra asociado. Y todos estos elementos dentro de un div que contendrá el input y el href con el texto eliminar

Le adiciono al div con el id file-list el código html que almaceno en la variable new_component.

   1: $('#file-list).append(new_component);              

Y por último aumento el valor del componente oculto (<input type="hidden"……).

   1: $("#file-number").val(Number($("#file-number").val())+1);

Luego el eliminar quedaría de esta manera:

   1: $('.del-file').live('click', function(event){     

   2:         event.preventDefault();         

   3:  $("#file-number").val(parseInt($("file-number").val())-1);      

   4:  $(this).parent().remove();

   5:  });

Y al final quedaría un código javascript similar a este

   1: <script type="text/javascript">

   2: $(document).ready(function(){

   3:   $('.add-file').live('click',function(event){

   4:         event.preventDefault();               

   5:         var  pos = Number($("#file-number").val());

   6: var new_component = ' <div class="file"> <input type="file"  name="file_name'+pos+'" id=" file_id'+pos+'" /> &nbsp;<a href="" id="del-file" class="del-file">eliminar</a></div>';

   7: $('#file-list).append(new_component);                        $("#file-number").val(Number($("#file-number").val())+1);

   8:     });

   9: });

  10: $('.del-file').live('click', function(event){     

  11:         event.preventDefault();         

  12:  $("#file-number").val(parseInt($("file-number").val())-1);      

  13:  $(this).parent().remove();

  14:  });

  15:  

  16:  

  17: </script>

Hasta aquí este código me ha funcionado sin problemas.

En la segunda parte de este articulo te hablaré sobre la carga de múltiples archivos con CodeIgniter.

{ Leer Más }

Cómo mostrar Popup utilizando Jquery sobre CodeIgniter.

En algunas aplicaciones web a veces es deseado mostrar una apariencia de aplicación de escritorio donde al dar clic sobre las acciones que deseamos realizar, en lugar de cargar páginas nuevas con la información deseada, nos mantenemos en la misma vista y lo que mostramos son ventanas emergentes (Popup) que podemos manipular siempre desde la misma vista principal.

En este artículo estaremos mostrando como mostrar esos Popup utilizando Jquery y a través de Ajax traemos la información necesaria para ello.

Lo primero que hay que tener es desde donde vamos a dar clic para que salga nuestra nueva ventana, por ejemplo algún link de este tipo:

<a href="#" class="mi_popup">Nueva Ventana</a>

Notar como hemos definido la clase “mi_popup” que es la que vamos a utilizar posteriormente para invocar la llamada a la controladora y nos traiga la información deseada.

Luego tendríamos que tener algún componente html vacío para poner en él la vista que vamos a traer desde nuestra controladora, sería algo como:

<div id="dialog_mi_popup" style="display: none" title="Nueva Ventana"></div>

En la controladora tendríamos la función en la que llamamos la vista, con la característica que hacemos un echo a la función $this->load->view('mi_ventana', '', true):

public function mostrar_ventana()
{
	echo $this->load->view('mi_ventana', '', true);
}

En esta función, para este ejemplo tan sencillo no estamos trayendo a la vista datos desde la controladora en el segundo parámetro de la función, y definimos finalmente el último parámetro en true para traer los datos como una cadena, incluso después podemos hacer algún procesamiento con estos datos antes de mostrarlos.

En el código script, básicamente debemos realizar dos cosas, una: definir las propiedades del Popup que vamos a mostrar, que si nos fijamos es el componente html vacío que definimos anteriormente, y otra en el evento clic del link definido hacer la llamada controladora/función que hemos definido y finalmente con esta información mostrar el Popup.

$(document).ready(function()
{	 
   //definiendo las propiedades del popup
	$("#dialog_mi_popup").dialog({
        autoOpen: false,
        height: 550,
        width: 650,
        modal: true    
        });
	
//mostrando el popup en el evento click del link
    $(document).on('click', '.mi_popup', function(ev)
    {
		ev.preventDefault();
$.post('<?php echo site_url().'controladora/mostrar_ventana/'; ?>',
            function(data){

                $("#dialog_mi_popup").html(data);  

                $("#dialog_mi_popup").dialog( "open" );         
            });        
        
    });
}

A la función que estamos llamando se le pueden pasar valores, muy útil para cuando la vista que deseamos mostrar en la nueva ventana depende de valores seleccionados en la vista general, como por ejemplo cuando seleccionamos un elemento de un grid y veremos más detalles del elemento en la ventana Popup.

$.post('<?php echo site_url().'controladora/mostrar_ventana/'; ?>', {valor:valor_seleccionado},

Donde por ejemplo valor_seleccionado se alimenta de algún id que estamos guardando en algún componente visual que tenemos oculto…

var valor_seleccionado = $('#id').val();

Tenemos que tener en cuenta entonces que esos valores tienen que ser recibidos en la función de la controladora que estamos llamando de la siguiente forma:

$id = $this->input->post('valor');

Con estos sencillos pasos tendremos nuestros Popup funcionando, hay otros elementos que tenemos que tener en cuenta, como por ejemplo si estamos mostrando un formulario en la ventana Popup y realizando las validaciones en el servidor, se “perdería” la ventana que estamos mostrando al hacer el envío del formulario cuando este falla, ese efecto podríamos evitarlo haciendo las validaciones de nuestro formulario desde el código script. Lo otro que tendríamos que tener en cuenta es que si estamos abriendo y cerrando continuamente varios Popup desde la misma ventana principal, tenemos todo un mismo código html y puede dar conflictos si tenemos variables con el mismo nombre en las diferentes vistas que estamos cargando.

Es todo, espero haya sido de utilidad.

{ Leer Más }