Archivo por de la categoria 'JQUERY'

Colección de Chuletas de Lenguajes de Programación

Cada lenguaje de programación, programa, framework, tipo de datos y muchos otros aspectos de la informática requieren aprender un lenguaje específico, con signos y expresiones que hacen que el código sea válido. Algunos son muy parecidos entre si (por ejemplo los diferentes lenguajes de programación comparten muchas estructuras, tipos de datos, formatos, etc.) pero cada uno tiene sus especificidades, con lo que un programador / desarrollador / diseñador de software debe memorizar muchas palabras clave y formas de llamar a métodos para cada lenguaje que conoce o encontrar una forma fácil de recordarlo. Para esto nacieron los ‘cheat sheets’  o chuletas que resumen visualmente los principales aspectos de cada lenguaje o programa. Aquí un resumen de algunos de ellos que os pueden ser útiles:

1. Lenguajes Programación: PHP / HTML5 / CSS / MySQL / JQuery / AJAX / Ruby on Rails

2. Diseño: Códigos RGB / Fonts

3. Útiles: Microformatos / Expresiones Regulares / Mod_rewrite / SEO / Buscadores

Lenguajes de Programación

PHP:

php-cheat-sheet Seguir leyendo »

Comments Off

5 codigos jQuery útiles

Abr 13 2011 Autor: J.P Aulet under General,JAVASCRIPT,JQUERY,Programación

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