10 tip e tricks con Jquery

16 febbraio 2011

Una delle tecnlogie che ha rivoluzionato il modo di fare web negli ultimi hanni è stata jquery.

Questo framework scritto tutto in javascript, ci permette di realizzare effetti alla portata di chiunque e di poche righe di codice.

Oggi vi consiglio 10 tip & tricks di jquery da usare sul vostro sito.

1) Aprire link in _blank

Come sappiamo benissimo, realizzare link con attributo target=_blank non ci permette di rendere valida la nostra pagina web.

Se in alcuni casi non potreste farne a meno di aprire un’altra scheda o finestra vi consiglierei queste poche righe di codice:

1
2
3
4
5
6
7
8
9
10
11

$(function() {

$('a[class="tblank"]').click( function() {

window.open( $(this).attr('href') );

return false;

});

});

Tutti i link con classe tblank si apriranno in una nuova finestra o scheda ( questo dipende dal tipo di browser ).

2) Riconoscere browser

Con queste pochissime righe di codice è possibile riconoscere il browser che il visitatore sta usando per visualizzare la pagina web:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

$(document).ready(function() {
// Target Firefox 2 and above
if ($.browser.mozilla && $.browser.version >= "1.8" ){
// do something
}

// Target Safari
if( $.browser.safari ){
// do something
}

// Target Chrome
if( $.browser.chrome){
// do something
}

// Target Camino
if( $.browser.camino){
// do something
}

// Target Opera
if( $.browser.opera){
// do something
}

// Target IE6 and below
if ($.browser.msie && $.browser.version <= 6 ){
// do something
}

// Target anything above IE6
if ($.browser.msie && $.browser.version > 6){
// do something
}
});

3) Torna su con jquery

Attraverso queste pochissime righe di codice è possibile far tornare la nostra pagina sulla sua cima con un click:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

$(document).ready(function() {
$('a[href*=#]').click(function() {
if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'')
&& location.hostname == this.hostname) {
var $target = $(this.hash);
$target = $target.length && $target
|| $('[name=' + this.hash.slice(1) +']');
if ($target.length) {
var targetOffset = $target.offset().top;
$('html,body')
.animate({scrollTop: targetOffset}, 900);
return false;
}
}
});
// how to use
// place this where you want to scroll to
<a name="top"></a>
// the link
<a href="#top">go to top</a>
});

4) Centrare un elemento in maniera assoluta

Anche se rimane una tecnica poco ortodossa può sempre essere utile sapere che possiamo centrare un elemento html in maniera assoluta con poche righe di jquery:

1
2
3
4
5
6
7
8
9

$(document).ready(function() {
jQuery.fn.center = function () {
this.css("position","absolute");
this.css("top", ( $(window).height() - this.height() ) / 2+$(window).scrollTop() + "px");
this.css("left", ( $(window).width() - this.width() ) / 2+$(window).scrollLeft() + "px");
return this;
}
$("#id").center();
});

5) Disattivare jquery

Questa funzione può essere utile quando vogliamo che tutti gli effetti di jquery si blocchino immediatamente.

1
2
3

$(document).ready(function() {
jQuery.fx.off = true;
});

6) Aggiungere div dinamicamente

Questo effetto è molto semplice da usare, e ci permette di creare dinamicamente un div con jquery:

1 2	var newDiv = $('<div></div>'); newDiv.attr("id","myNewDiv").appendTo("body");

7) Disattivare tasto destro con jquery

Effetto demodè, ma che può servire in alcuni casi, è quello di disattivare il tasto destro con jquery:

1
2
3
4
5

$(document).ready(function(){
$(document).bind("contextmenu",function(e){
return false;
});
});

8 ) Loading immagini

Una pratica molto utile è quella di caricare le immagini di una pagina , un po’ prima che vengano visualizzate, per questo vi scrivo queste 4 righe di codice:

1
2
3
4
5
6
7
8

jQuery.preloadImages = function()
{
for(var i = 0; i").attr("src", arguments[i]);
}
};

// Usage
$.preloadImages("image1.gif", "/path/to/image2.png", "some/image3.jpg");

9) Aggiungere classi html in un click

Utilissimo tip per aggiungere una classe a un elemento attraverso un click. Infatti potremmo aggiungere una classe cambiando il colore di sfondo ad un elemento html.

Qua trovi il codice:

1
2
3
4
5
6
7
8

jQuery
//Toggle Class on Click
$("ul.col3 li .block").click(function() {
$(this).toggleClass("active");
});

CSS
.active {background: #ccc;

10) Aggiorare in maniera parziale una pagina

Questo effetto lo avete sicuramente cercato almeno una volta. E’ quel tipo tricks molto particolare, infatti ci permette di aggiornare soltanto una parte della pagina che a noi interessa.

Qua trovi il codice:

1
2
3
4
5

$(document).ready(function() {
setInterval(function() {
$("#content").load(location.href+" #content>*","");
}, 5000);
});

Qua hai la possibilità di scaricare tutti gli esempi.

Vi è piaciuto il mio articolo? Commentate oppure condividetelo

Potresti trovare interessante anche

Jplayer: Player compatibile su tutti browser

Pubblicato in javascript, jquery |