Good Ideas

12 Trucchi da sapere per usare jQuery

Posted by:

|

On:

|

Quando si scrive in jQuery si impara facilmente che esistono diverse maniere di implementare la stessa cosa. La tendenza è di migliorare sempre più scrivendo meno righe di codice per ottimizzare il sorgente. Spesso si cerca di trovare anche la strada più elegante per risovere un problema. Ecco quindi un elenco di trucchi che potrebbero esservi utili

trucchi per jquery

1. jQuery cheatsheets

Prima di tutto è sempre meglio avere qualche cheatsheet sotto mano. In rete ne ho trovati 3:

jQuery Cheatsheet da ColorCharge
jQuery Cheatsheet from ColorCharge WebBlog

jQuery Cheatsheet da Gscottolson WebBlog
jQuery Cheatsheet from Gscottolson WebBlog

jQuery Cheatsheet da From Far East WebBlog
jQuery Cheatsheet from From Far East WebBlog

2. Una scorciatoia per jQuery: $(document).ready

Questo è un ottimo suggerimento, perchè non mi ricordo mai come si scrive questo:

$(document).ready(function() {  
//write your code here
}

Si può scrivere equivalentemente attraverso una funzione anonima, sono funzionalmente uguali:

$(function(){
//write your code here
}); 

3. Aprire in una nuova finestra

L’attributo "target" nei collegamenti "<a>" non è un attributo valido per lo standard STRICT W3C. Possiamo aggirare il problema utilizzando l’attributo REL e un po’ di codice jQuery per ricreare l’attributo TARGET in modo dinamico mantendo sempre valido il nostro sorgente HTML. E’ troppo semplice per funzionare, eppure è così:

	$('a[rel=external]').attr('target','_blank');
<a href="http://www.queness.com" rel="external">Queness in new window</a>

4. Rendere l’intero LI cliccabile

Questo trucco è veramente utile quando usi i punti elenco (LI) per creare menu. Quello che fa è rendere cliccabile l’intera area coperta dal LI (anche fuori da eventuali link A) e cerca automaticamente l’indirizzo di destinazione  tra i link contenuti nel LI.:

	$("ul li").click(function(){
	  //get the url from href attribute and launch the url
	  window.location=$(this).find("a").attr("href"); return false;
	});
<ul>
	<li><a href="home">home</a></li>

	<li><a href="home">about</a></li>
	<li><a href="home">contact</a></li>
</ul>

5. Cambiare tra diversi fogli di stile

Vuoi avere design diversi all’interno del vostro sito e devi cambiare dinamicamente tra diversi fogli di stile. Puoi farlo con jQuery facilmente:

	$("a.cssSwitcher]").click(function() {
		//swicth the LINK REL attribute with the value in A REL attribute
		$("link[rel=stylesheet]").attr({href : this.attr(rel)});
	});
<link rel="stylesheet" href="default.css" type="text/css">
......
<a href="#" class="cssSwitcher" rel="default.css">Default Theme</a> 

<a href="#" class="cssSwitcher" rel="red.css">Red Theme</a> 
<a href="#" class="cssSwitcher" rel="blue.css">Blue Theme</a>

6. Disabilitare il click destro del mouse

Qualche nostro cliente ci chiede di poter disabilitare sul loro sito il click destro del mouse per occultare le funzioni messe a disposizione o per creare un proprio menu contestuale. Ecco come farlo in jQuery:

$(document).bind("contextmenu",function(e){
	//you can enter your code here, e.g a menu list
		
	//cancel the default context menu
    return false;
});

7. Leggere le coordinate x e y del puntatore del mouse

Questo script catturerà le coordinate x e y del puntatore del mouse e le mostra sulla pagina.

$().mousemove(function(e){
	//display the x and y axis values inside the P element
    $('p').html("X Axis : " + e.pageX + " | Y Axis " + e.pageY);
});
<p></p>

8. Impedire il comportamento di default

Può capitare di usare il tag A per altri scopi che condurre l’utente ad un link. Succede però che quando si clicca, il browser ci porta ad inizio pagina perchè l’attributo HREF è valorizzato con il cancelletto (#). Per risolvere questo problema, dobbiamo disabilitare il comportamento di default dei link A:

$('#close').click(function(e){  
     e.preventDefault();
}); 

/* OR */

$('#close').click(function(){  
    return false;
}); 
<a href="#" id="close"></a>

9. Il bottone "torna su"

Un utile bottone "torna su" è possibile implementarlo attraverso uno specifico plugin. Con scrollTo si creerà un simpatico effetto di risalita della pagina. Scarica il plugin jQuery scrollTo
$(‘#top’).click(function() {
$(document).scrollTo(0,500);
}

<script type="text/javascript" src="js/jquery.scrollTo-min.js"></script>
......
<a id="top" style="cursor:hand;cursor:pointer">
Back to top

10. Colonne di altezza uguale

Questo script è abbastanza utile anche se non ho ancora avuto modo di provarlo. Se vuoi colonne della stessa altezza, questo script risponderà alle vostre esigenze:

$(document).ready(function() {
    setHeight('.col');
});

//global variable, this will store the highest height value
var maxHeight = 0;

function setHeight(col) {
	//Get all the element with class = col
	col = $(col);
	
	//Loop all the col
    col.each(function() {        
	
		//Store the highest value
		if($(this).height() > maxHeight) {
            maxHeight = $(this).height();;
        }
    });
	
	//Set the height
    col.height(maxHeight);
}
<div class="col" style="border:1px solid">Column One<br/>
With Two Line<br/>
And the height is different<br/><br/>

</div>
<div class="col" style="border:1px solid">Column Two<br/><br/></div>

11. Scrivere il vostro selettore personale

Questo è un trucco per utenti avanzati:

//extend the jQuery functionality
$.extend($.expr[':'], {  
	
	//name of your special selector
    moreThanAThousand : function (a){
		//Matching element
		return parseInt($(a).html()) > 1000;
	}
});  
	
	
$(document).ready(function() {
	$('td:moreThanAThousand').css('background-color', '#ff0000');
});

12. Ridimensionamento del font

Questo trucco si trova spesso nei siti e vi permentte di ridimensionare il corpo del carattere per adattarlo meglio alle vostre esigenze di lettura:

$(document).ready(function(){

	//ID, class and tag element that font size is adjustable in this array
	//Put in html or body if you want the font of the entire page adjustable
	var section = new Array('span','.section2');
	section = section.join(',');

	// Reset Font Size
	var originalFontSize = $(section).css('font-size');  
		$(".resetFont").click(function(){
		$(section).css('font-size', originalFontSize);
	});
	// Increase Font Size
	$(".increaseFont").click(function(){
		var currentFontSize = $(section).css('font-size');
		var currentFontSizeNum = parseFloat(currentFontSize, 10);
		var newFontSize = currentFontSizeNum*1.2;
		$(section).css('font-size', newFontSize);
		return false;
	});
  
	// Decrease Font Size
	$(".decreaseFont").click(function(){
		var currentFontSize = $(section).css('font-size');
		var currentFontSizeNum = parseFloat(currentFontSize, 10);
		var newFontSize = currentFontSizeNum*0.8;
		$(section).css('font-size', newFontSize);
		return false;
	});
});
<a class="increaseFont">+</a> | 

<a class="decreaseFont">-</a> | 
<a class="resetFont">=</a>


<span>Font size can be changed in this section</span>
<div class="section1">This won't be affected</div>

<div class="section2">This one is adjustable too!</div>

(tratto da Queness)

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *