Cambio de clase de un componente con JQuery

En este artículo te hablaré sobre el uso de función de JQuery toggleClass, que te permite intercambiar clases de un componente en tiempo de ejecución según las necesidades del programador.

$(this).toggleClass('nombre de la clase);

En este ejemplo crearemos por css varias clases con diferentes estilos y tamaños y la intercambiaremos con la función toggleClass.

   1: .image1, .image2, image3{

   2:         float: right; 

   3:         margin-right: 20px; 

   4:         border-radius: 4px; 

   5:         width: 194px; 

   6:         height: 34px;

   7:  }    

   8: .image1{ background: url('../images/image1.png') no-repeat;   }

   9: . image2{background: url('../images/image2.png') no-repeat; }   

  10: . image3{  background: url('../images/image3.png') no-repeat; }

Ahora creamos el fragmento de código html que contendrá las clases creadas.

   1: <div id="example_container">

   2:         <a href="" id="view_images" class=" view_images">

   3:             <div class="images" id="images"></div>

   4:         </a>

   5: </div>

Ahora con el código JQuery podemos cambiar la clase

   1: Clase1

   2: $(‘# view_images).click(function(event){

   3: Event.preventDefault();

   4: $(‘#images’).toggleClass(‘image1’);

   5: })

   6: Clase2

   7: $(‘# view_images).click(function(event){

   8: Event.preventDefault();

   9: $(‘#images’).toggleClass(‘image2’);

  10: })

  11: Clase3

  12: $(‘# view_images).click(function(event){

  13: Event.preventDefault();

  14: $(‘#images’).toggleClass(‘image3’);

  15: })

Otra forma de usarlo sería de la siguiente manera

   1: $(this).toggleClass('opened', x == 1);

Esta sintaxis es la forma abreviada de cambiar una clase si se cumple una condición, en este caso que la variable x sea igual a 1, algo similar a esto:

   1: if (x == 1) {

   2: $(this).addClass('opened');

   3: } else {

   4: $(this).removeClass('opened');

   5: }

En conclusión, hemos visto que la función toggleClass de JQuery puede resultar muy útil para el trabajo con diferentes estilos en una página web. Nos permite hacer de forma dinámica cambios de estado, tamaño, color, etc, de los distintos componentes que conforman la vista que vamos construyendo.

{ Leer Más }

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 }

Resaltar uno o varias filas según valor (jqGrid)

En este artículo quiero tratar el tema sobre cómo cambiar el color de una fila o varias de ellas en un jqGrid según el valor que tenga en algún campo en específico.

Supón que, en tu sitio tienes un jqGrid en el que muestras todos tus usuarios con los distintos campos que tienen en la base de datos nombre, apellidos, sexo, etc, y uno de estos es el estado del usuario Activo o Inactivo y quieres que los inactivos resalten sus filas de un color o con algún estilo en específico.

La solución que a continuación te muestro se hace completamente a nivel de vista en el modelo MVC (Modelo Vista Controlador), es decir se ejecuta en lenguaje del lado del de cliente, en este caso jquery.

Para hacer lo antes comentado se crea un arreglo.

var rowsToColor = [];

Después en la columna que se desea evaluar el valor se le añade la propiedad formatter seguido del nombre de la función que tendremos comprobando la condición necesaria para aplicar el estilo deseado a la fila.

{name:'ENABLE', index:'ENABLE', width:90, align:’left’, formatter: rowcolor},

Si tienes en el campo alguna función ya declarada en el formatter puedes incluir el código en tu función o declarar otra vez dicha columna y ponerle la propiedad hidden a true, para que no se muestre. En este caso el nombre de la función es rowcolor y debajo un ejemplo de cómo luciría.

function rowcolor(cellValue, options, rowObject) {         if (cellValue == 0)             rowsToColor[rowsToColor.length] = options.rowId;         return cellValue; }

En este caso evalúa el valor que viene en cellValue que no es más que el valor de la celda en cuestión y si es igual a 0, es decir, el usuario que está verificando esta desactivado guarda en la última posición del arreglo que declaramos el id de la fila para utilizarlo cuando el jqGrid esté completamente cargado, para ello se utiliza la propiedad loadComplete del componente.

loadComplete: function() {                                                for (var i = 0; i < rowsToColor.length; i++) {                                 $("#" + rowsToColor[i]).find("td").css("background-color", "#FF7F7F");                                 $("#" + rowsToColor[i]).find("td").css("color", "black");                              }                     }

En esta función se pueden hacer todas las demás cosas que se necesiten hacer cuando esté completamente cargado el jqGrid.

Este ciclo lo que hace es recorrer la variable que se declaró en un principio como arreglo y luego según la condición se fueron guardando los id de los <tr> entonces se selecciona el componente con ese id ya que jQuey cuando crea la tabla (jqGrid) le pone al tr la propiedad id que fuimos capturando con la condición ya una vez seleccionado con la función find acompañada de css se le aplica el estilo necesario.

Nota:

Es importante tener en cuenta que si en la misma vista se está utilizando más de un jqGrid es necesario especificar en el selector que tabla se desea personalizar con este css ej.

$("#nombre_tabla #" + rowsToColor[i]).find("td").css("background-color", "#FF7F7F");

Espero les haya servido de ayuda.

{ Leer Más }