5 codigos jQuery útiles

Escrito por: J.P. Aulet el 13 Abr 2011 - Tags: , , , , ,

logo-jquery

Logo jQuery

jQuery es un framework de JavaScript que facilita escribir codigo en este lenguaje. Puedesseleccionar elementos del DOM,modificarlos, crear eventos, cambiar los estilos CSS, crear animaciones, efectos y muchas otras funcionalidades. Para descargarlo en un solo fichero, visitar el sitio oficial: jquery.com.

Para empezar a utilizarlo, sólo debes incluir esta linea en el <header> una vez descargado el archivo:

<script type=’text/javascript’ src=’carpeta_javascript/jquery.js’></script>

O si lo prefieres, puedes usar un servidor en nube:

<script type=’text/javascript’ src=’http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.js’></script>

A partir de aquí, puedes usar estos códigos para mejorar la experiencia de los usuarios. Recuerda que los codigos jQuery, igual que los codigos Javascript, deben ir encapsulados dentro de las etiquetas: <script type=”text/javascript”> [...] </script>.

1. Desactivar ‘botón derecho’:
Desactivar el menú contextual al clicar el botón derecho del ratón

$(document).ready(function(){

$(document).bind(“contextmenu”,function(e){

return false;

});

});

2. Desaparición del campo de texto en una busqueda:
Ocultar el texto de un buscador al clicar encima:

$(document).ready(function() {

$(“input.text”).val(“Introduce la busqueda aquí”);

textFill($(‘input.text’));

});

function textFill(input){

var originalvalue = input.val();

input.focus( function(){

if( $.trim(input.val()) == originalvalue ){ input.val(”); }

});

input.blur( function(){

if( $.trim(input.val()) == ” ){ input.val(originalvalue); }

});

}

3. Mostrar/Ocultar contenido al clicar:

HTML:

<a onclick=”ShowHide(); return false;” href=”#”>Show/Hide</a>
<div id=”slidingDiv”> Este div puede ocultarse o mostrarse al ser clicado. <a onclick=”ShowHide(); return false;” href=”#”>Ocultar</a></div>

JQuery:

function ShowHide(){

$(“#slidingDiv”).animate({“height”:”toggle”},{duration:1000});

}

4. Abrir ventana con página de impresión:

<a href=”#” class=”print”>Print this page</a>

$(‘a.print’).click(function(){

window.print();

return false;

});

5. Check/Uncheck all checkboxes

HTML:

<div class=”opciones”>

<ul>

<li><a href=”#” class=”selected-all”>Selecionar Todos</a></li>

<li><a href=”#” class=”reset-all”>Deseleccionar Todos</a></li>

</ul>

<input id=”opcion1″ /><label for=”opcion1″>Opcion 1</label>

<input id=”opcion2″ /><label for=”opcion2″>Opcion 2</label>

<input id=”opcion3″ /><label for=”opcion3″>Opcion 3</label>

<input id=”opcion4″ /><label for=”opcion4″>Opcion 4</label>

</div>

JQuery:

$(‘.select-all’).live(‘click’, function(){

$(this).closest(‘.opciones’).find(‘input[type=checkbox]‘).attr(‘checked’, true);

return false;

});

$(‘.reset-all’).live(‘click’, function(){

$(this).closest(‘.opciones’).find(‘input[type=checkbox]‘).attr(‘checked’, false);

return false;

});

Comments Off