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
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 da Gscottolson WebBlog
jQuery Cheatsheet da 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)
Slideshow
