Usando la librería jQuery en proyectos web

En la siguiente entrada voy a describir cómo aprovecho las bondades de jQuery en mis aplicaciones web. Seguro que hay opciones mejores, pero yo uso esta.


En la plantilla html principal, hago las llamadas a la hoja de estilo jQuery que vaya a usar y las .js que hayamos descargado.

Por ejemplo:

<link rel="stylesheet" href="/media/css/themes_jquery/base/calendario.css" type="text/css" media="screen"/>
<script type="text/javascript" src="/media/js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="/media/js/jquery-ui-1.8.5.custom.min.js"></script>


Seguidamente incluyo todo el código javascript-jquery que necesitará cualquier parte de la página, permitiendo reutilizar código.
Esto es un ejemplo, más adelante explico varias funciones que no deben faltar en un proyecto:

<script type="text/javascript">
    $(function() {

        $("#tabs").tabs();
        $(".trlist").mouseover(function(){
          $(this).addClass("trsub");
        });
        $(".trlist").mouseout(function(){
          $(this).removeClass("trsub");
        });

        $("#accordion").accordion();

                       
                        (...)
    });
</script>

Ejemplo de algunos efectos necesarios en todas las webs

Ilumina la etiqueta <tr> al pasar por ella en una tabla.

Código jQuery:


$(".trlist").mouseover(function(){
          $(this).addClass("trsub");
  });
  $(".trlist").mouseout(function(){
          $(this).removeClass("trsub");
  });

El código HTML que recogerá este efecto sería:

 <table>
        <tr class="trlist"><td>...</td></tr>
 </table>

Y por ejemplo, una entrada en la hoja de estilo:

.trsub {
    background: #F8F8F8
}


Hacer aparecer una <DIV> al pulsar un link

Código jQuery:


        $(".show_panel").toggle (function (){
            $("#panel").show("blind");
        }, function (){
            $("#panel").hide("blind");
        });

El código HTML que recogerá este efecto sería:

    <a href="#" class="show_panel">Abrir DIV</a>       
    <div id="panel">Texto que aparecerá</DIV>

Código CSS:

#panel{
    display:none;
}


Mostrar el típico mensaje de confirmación

Seguro que la necesidad de levantar un mensaje de confirmación con respuestas de aceptar y cancelar se repiten en varias ocasiones a lo largo del proyecto. Para ello, y para reutilizar código, yo uso un sistema como este:

Código jQuery:

$( "#dialog" ).dialog({
            autoOpen: false,
            resizable: false,
            modal:true,
            buttons: {
                "Aceptar": function() {
                    $( this ).dialog( "close" );
                    var url =$('.confirm').get(index);
                    location.href=url;
                    return true;
                },
                "Cancelar": function() {
                    $( this ).dialog( "close" );
                    return false;
                }
            }
        });

        $( ".confirm" ).click(function() {
            $( "#dialog" ).dialog( "open" );
            index= $( ".confirm" ).index(this)
            return false;
        });
 
El HTML será distinto en cada página, pero siempre llamará a la misma función.

 <a href="?del=" class="confirm">X</a>

        <div id="dialog" title="Eliminar">
            <p>¿Desea realmente hacer esto?</p>
        </div>

Este ejemplo asigna a la variable index el índice del <tr> dentro de una tabla y lo recoge la variable url para obtener el <a href="?del...
La otra opción más simple sería recoger la url como atributo en la variable url.

var url =$('.confirm').attr("href");



Mostrar un calendario emergente




Código jQuery para que aparezca un calendario al pinchar en una caja de texto:

        $("#datepicker").datepicker({
            maxDate: '+1m +1w',
            dateFormat: 'dd-mm-yy',
            onSelect: function (dateText, inst) {
                var input= document.getElementById('datepicker');
                input.value= dateText;
                }
            });

Código HTML:

 <input type="text" id="datepicker" name="from" />

*no probado