Archivo
CDN de jQuery, jQueryUI y jQueryUI Touch punch
jQuery
http://code.jquery.com/jquery-2.2.1.min.js
jQueryUI
https://code.jquery.com/ui/1.11.4/jquery-ui.min.js
jQueryUI Touch Punch
https://cdnjs.cloudflare.com/ajax/libs/jqueryui-touch-punch/0.2.3/jquery.ui.touch-punch.min.js
Toda la info sobre estos CDN en https://code.jquery.com/
CDN de Bootstrap
Si no queremos instalar Bootstrap en nuestro servidor podemos utilizar el siguiente CDN:
<!– CSS –>
<link rel=»stylesheet» href=»https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css» integrity=»sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7″ crossorigin=»anonymous»>
<!– jQuery –>
http://code.jquery.com/jquery-2.2.1.min.js
<!– JavaScript –>
https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js
Plantilla para inicio con jQuery
A continuación tenemos una plantilla que nos servirá como esqueleto básico de nuestro fichero HTML5 con jQuery:
<!doctype html> < head>
< script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous">< /script>
// Puedo definir funciones en esta parte.
// La función Ready a continuación
$(function() {
//..código..
// Ejemplo:
// var img = $(#id1); // Asigno a una variable img el elemento del DOM
identificado por id1
// Utilizo on para asociar un manejador a un evento sobre un elemento del DOM
// $("#id2").on("click", function(){ //... más código ... });
});
Recuerda que se utiliza on y off para asociar o desvincular un manejador o handler a un evento de un elemento del DOM.
En el siguiente enlace están los métodos para manipular los elementos del DOM: attr, html y val son los métodos que obtendrán información del DOM, y luego tendremos métodos para modificarlo, como append, por ejemplo
Modificar enlace con jQuery
Si tenemos un enlace como el siguiente:
<a href="http://pilonas.blogspot.com" id="mienlace">Enlace</a>
Podemos cambiar con jQuery la dirección del enlace de la siguiente manera:
$("mienlace").attr("href","https://cursoprogramador.wordpress.com");
O cualquiera de sus atributos.
También podemos cambiar el texto del enlace así:
$("mienlace").text("Enlace");
.
Cargar contenido con el scroll usando jQuery
Básicamente lo que quiero es que se me carguen un número de artículos en la web y cuando haga scroll hacia abajo se carguen unos cuantos más… Típico que te hace Twitter o Facebook.
Para ello sigo los siguientes pasos:
1. Incluyo jQuery en el head:
http://code.jquery.com/jquery-1.10.1.min.js
2. Añado el siguiente código HTML en el body para indicar dónde se va a cargar el contenido dinámico con jQuery:
</div>
<p>Haga scroll para cargar más datos…</p>
3. Añado el siguiente código con jQuery:
var pagina=1;
$(document).ready(function(){
cargardatos();
});
function cargardatos(){
$(«#loader»).html(«
«);
$.get(«/datos.php?pagina=»+pagina»,
function(data){
if (data != «») {
$(«.mensaje:last»).after(data);
}
$(‘#loader’).empty();
}
);
}
$(window).scroll(function(){
if ($(window).scrollTop() == $(document).height() – $(window).height()){
pagina++;
cargardatos()
}
});
4. Por último creamos el fichero datos.php que debe ser un fichero que reciba por GET el parámetro pagina (1 en adelante) y genere una serie de div de la clase «mensaje» con contenido de la forma:
….
Fuentes:
Poner el Datepicker de jQueryUI en castellano
Desde el enlace https://github.com/jquery/jquery-ui/blob/master/ui/i18n/datepicker-es.js podemos descargarnos el fichero configurado en castellano (si queremos modificarle algo, como poner la primera letra del mes en castellano…)
Básicamente seguiremos estos pasos:
En el body insertamos el control:
<p>Fecha: <input type="text" id="datepicker" value="19/8/2015"></p>
Y en el head de nuestro fichero:
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
//code.jquery.com/jquery-1.10.2.js
//code.jquery.com/ui/1.11.4/jquery-ui.js
http://./js/controles.js
<link rel="stylesheet" href="/resources/demos/style.css">
$(function () {
$.datepicker.setDefaults($.datepicker.regional["es"]);
$("#datepicker").datepicker();
Para obtener la fecha del Datepicker:
var currentDate = $( "#datepicker" ).datepicker( "getDate" );Programaremos el evento onSelect para hacer «algo» cuando el usuario cambia la fecha seleccionada:
$("#datepicker").datepicker({
dateFormat: 'yy-mm-dd',
onSelect: function (date) {
alert(date)
},
});
La línea dateFormat: ‘yy-mm-dd’, la he puesto para que el datepicker me devuelva la fecha (date) con ese formato, que es el que acepta MySQL en las conexiones.
Carga asíncrona de una página en un DIV en jQuery
Bueno, en realidad no tiene por qué ser un div, sería la carga de una página en un elemento del DOM con jQuery.
Es algo muy sencillo, para ir empezando con jQuery.
En primer lugar en el HEAD incluimos jQuery:
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
y también tendremos que cargar la página en el elemento que queramos:
<!-- Para cargar en el DIV "capa" la página correspondiente -->
<script>
$(document).ready(function(){
$("#capa").load("pagina.php");
});
</script>
Por último, en el BODY, en el lugar que queramos, incluimos el DIV:
<div id="capa"></div>
Incluir jQuery
Tenemos dos opciones:
– Descargarnos jQuery en nuestro servidor desde la página del proyecto: http://jquery.com/
<head> <script src="jquery-1.11.1.min.js"></script> </head>
– Enlazar jQuery desde algún CDN (como por ejemplo de Google o de Microsoft)
<head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> </head>
En el momento de escribir este post la versión estable de jQuery es 1.11.1
Incluir jQuery UI
Como voy a empezar a trabajar con jQuery UI vamos a ver cómo se incluye:
Tras descargar jQuery UI obtenemos:
/css//development-bundle//js/index.html
Para usar jQuery UI habrá que poner en nuestra página:
<link rel="stylesheet" href="css/themename/jquery-ui.custom.css" /><script src="js/jquery.min.js"></script><script src="js/jquery-ui.custom.min.js"></script>En mi caso, en lugar de themename pondré: ui-lightness. Y ajusto el nombre de los ficheros a la versión de jQuery descargada:
<link rel="stylesheet" href="jquery/css/ui-lightness/jquery-ui-1.10.4.custom.css" /><script src="jquery/js/jquery-1.10.2.js"></script><script src="jquery/js/jquery-ui-1.10.4.custom.min.js"></script>Todo porque tengo descargado en la carpeta jquery el jQuery UI 1.10.2.
La recomendación es crear un fichero php que incluímos con este código. Es mejor para llevar el control de las versiones de jQuery que utilizamos.
También, crear otro fichero php para incluir el resto de código jQuery, es mucho más legible.
jQueryUI Tabs
Voy a utilizar unos paneles con jQuery que me van a servir a modo de pestañas o tabs.
La fuente de todo esto la encontramos en la página de jQueryUI.
Primero tenemos que insertar en nuestro HEAD las siguientes líneas:
<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css"> <script src="//code.jquery.com/jquery-1.9.1.js"></script> <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script> <script> $(function() { $( "#tabs" ).tabs(); }); </script>
Ya dentro del BODY debemos tener una DIV con ID tabs.
Dentro de esta capa, primero una UL con tantas LI como pestañas queramos tener. En estas LI debemos tener un enlace (A) cuyo href haga referencia al ID de la DIV que más abajo queramos cargar.
Después de esta UL pondremos todas las DIV con sus IDs correspondientes.
El código sería algo como:
<div id="tabs"> <ul> <li><a href="#tabs-1">Nunc tincidunt</a></li> <li><a href="#tabs-2">Proin dolor</a></li> <li><a href="#tabs-3">Aenean lacinia</a></li> </ul> <div id="tabs-1"> <p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus.</p> </div> <div id="tabs-2"> <p>Morbi tincidunt, dui sit amet facilisis feugiat, odio metus gravida ante, ut pharetra massa metus id nunc. Duis scelerisque molestie turpis. Sed fringilla, massa eget luctus malesuada, metus eros molestie lectus, ut tempus eros massa ut dolor. Aenean aliquet fringilla sem. Suspendisse sed ligula in ligula suscipit aliquam. Praesent in eros vestibulum mi adipiscing adipiscing. Morbi facilisis. Curabitur ornare consequat nunc. Aenean vel metus. Ut posuere viverra nulla. Aliquam erat volutpat. Pellentesque convallis. Maecenas feugiat, tellus pellentesque pretium posuere, felis lorem euismod felis, eu ornare leo nisi vel felis. Mauris consectetur tortor et purus.</p> </div> <div id="tabs-3"> <p>Mauris eleifend est et turpis. Duis id erat. Suspendisse potenti. Aliquam vulputate, pede vel vehicula accumsan, mi neque rutrum erat, eu congue orci lorem eget lorem. Vestibulum non ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce sodales. Quisque eu urna vel enim commodo pellentesque. Praesent eu risus hendrerit ligula tempus pretium. Curabitur lorem enim, pretium nec, feugiat nec, luctus a, lacus.</p> <p>Duis cursus. Maecenas ligula eros, blandit nec, pharetra at, semper at, magna. Nullam ac lacus. Nulla facilisi. Praesent viverra justo vitae neque. Praesent blandit adipiscing velit. Suspendisse potenti. Donec mattis, pede vel pharetra blandit, magna ligula faucibus eros, id euismod lacus dolor eget odio. Nam scelerisque. Donec non libero sed nulla mattis commodo. Ut sagittis. Donec nisi lectus, feugiat porttitor, tempor ac, tempor vitae, pede. Aenean vehicula velit eu tellus interdum rutrum. Maecenas commodo. Pellentesque nec elit. Fusce in lacus. Vivamus a libero vitae lectus hendrerit hendrerit.</p> </div></div>
El resultado puede ser algo así:
Leitmotiv
Dalek-free
Camisetas cargadas de adrenalina. Llénalas de aventura
CursoProgramador 