$.cookie('nomeCookie', 'valore');

Per settare un cookie con tutte le opzioni disponibili:

$.cookie('nomeCookie', 'valore',
 { expires: 7, path: '/', domain: 'jquery.com', secure:true});

Cancellare un cookie passandogli come valore “null”

$.cookie('nomeCookie', null);

Recuperare il valore di un cookie

$.cookie('nomeCookie');

jQuery.cookie lo potete scaricare da qui

Post Correlati:

1. jQuery – BigTarget: aumentare la dimensione delle aree cliccabili I plugin di jQuery fioccano peggio che la neve in...
2. Implementare min-width, max-width, min-height ecc. con jQuery Credo che abbia più senso aprire una sezione apposita tanto...
3. Rilevare il browser con jQuery – un apposito plugin E tre… questo plugin per jQuery rende più preciso e...

Related posts brought to you by Yet Another Related Posts Plugin.

   $(function(){
   $("#footer").positionFooter(true);
   });

basta infatti fornire il selettore di riferimento.

A detta dello sviluppatore la soluzione è stata testa su ie6,ie7, FF3 e Safari.

Post Correlati:

1. BrowserDetect – riconoscere il browser dell’utente con jQuery Riconoscere il browser dell’utente che naviga le nostre pagine è...
2. Galleriffic – plugin gallery per jQuery I plugin di jQuery sono un modo versatile e...
3. Un semplice orologio in jQuery jClock è un plugin per jQuery che inserisce un semplice...

Related posts brought to you by Yet Another Related Posts Plugin.

jQuery fornisce diverse soluzioni per soddisfare questa necessità, di una ne avevamo già parlato, tuttavia ultimamente mi sono imbattuto in un plugin davvero semplice e comodo. Con BrowserDetect è sufficiente richiamare il plugin per farlo funzionare: lo script aggiunge al body una classe (generalmente due, una più generico e l’altra specifica per la versione) che sta ad indicare il browser che si sta utilizzando.

Qui di seguito la lista delle classi aggiunte dinamicamente:

.browserIE
.browserIE6
.browserIE7
.browserIE8
.browserChrome
.browserChrome1
.browserSafari
.browserSafari1
.browserSafari2
.browserSafari3
.browserMozilla
.browserFirefox
.browserFirefox1
.browserFirefox2
.browserFirefox3
.browserOpera

Sovrascrivere uno stile per un determinato browser diventa davvero molto semplice non vi pare?

Post Correlati:

1. Rilevare il browser con jQuery – un apposito plugin E tre… questo plugin per jQuery rende più preciso e...
2. Posizionare il footer in fondo alla pagina con jQuery Spesso quest’attività, all’apparenza semplice, si scontra con il design di...
3. 5 tecniche CSS3 replicate con jQuery A parer mio un grande merito di framework come...

Related posts brought to you by Yet Another Related Posts Plugin.

Post Correlati:

1. Appunti jQuery – i selettori jQuery è particolarmente apprezzabile dai designer perchè fornisce un set...
2. 5 tecniche CSS3 replicate con jQuery A parer mio un grande merito di framework come...
3. jQuery – BigTarget: aumentare la dimensione delle aree cliccabili I plugin di jQuery fioccano peggio che la neve in...

Related posts brought to you by Yet Another Related Posts Plugin.

Le tecniche illustrate sono:

• Bordi arrotondati per box
• Uso delle Immagini per i bordi
• Backgrounds multipli
• Ombreggiatura per testo e box
• Gestione delle trasparenze e dell’opacità

L’autore propone per ognuna di queste proprietàil corrispondente plugin. L’articolo è ottimo e pieno di esempi; buona lettura

Post Correlati:

1. Appunti CSS3:i background multipli La gestione del Background di un elemento è probabilmente una...
2. BrowserDetect – riconoscere il browser dell’utente con jQuery Riconoscere il browser dell’utente che naviga le nostre pagine è...
3. Bordi arrotondati (Css & Javascript) Una selezione di tool e strumenti vari per la creazione...

Related posts brought to you by Yet Another Related Posts Plugin.

Istruzioni per l’uso:

1. scarica e richiama nel layout jQuery
2. scarica e richiama nel layout bigTarget
3. setta il plugin in base alle tue esigenze (vedi qui un esempio)

Per settare bigTarget basterà scrivere:
[javascript]
$(document).ready(function(){
$(“div.bigTarget div a”).bigTarget();
hoverClass: ‘over’, clickZone : ‘div:eq(1)’
});
});
[/javascript]

$(“div.bigTarget div a”).bigTarget(); filtra il link rispetto al quale generare l’area cliccabile mentre hoverClass e clickZone sono rispettivamente la classe da assegnare all’area e il tag html padre del link rispetto al quale generarla. Nel nostro caso si presuppone di avere a che fare con un box contenente due div annidati ed un link. utilizzando la notazione div:eq(1) viene selezionato in gerarchia il secondo div.

Utilità

Il plugin può essere utile per rendere più usabile la nostra interfaccia di navigazione. Per rendere più visibile un offerta ed un prodotto senza sporcare il codice di pagina. A differenza di altri javascript qui il link non viene generato dinamicamente quindi rimane sempre accessibile sia agli utenti che navigano con i javascript disattivati sia ai motori di ricerca

Post Correlati:

1. Galleriffic – plugin gallery per jQuery I plugin di jQuery sono un modo versatile e...
2. Leggere e scrivere cookie con jQuery Con jQuery.cookie leggere e scrivere cookie diventa molto semplice. Di...
3. Rilevare il browser con jQuery – un apposito plugin E tre… questo plugin per jQuery rende più preciso e...

Related posts brought to you by Yet Another Related Posts Plugin.

Qui di seguito riportiamo i filtri basici basati sui selettori…

• Selezione di un ID
  • $("#nomeID").addClass("nomeclasse");
• Selezione di una classe
  • $(".nomeClasse").addClass("nomeclasse");
• Selezione di un tag
  • $("nomeTag").addClass("nomeclasse");
• Selezione di un elemento dispari
  • $("nomeTag dd").addClass("nomeclasse");
• Selezione di un elemento pari
  • $("nomeTag:even").addClass("nomeclasse");
• Selezione del primo elemento
  • $("nomeTag:first").addClass("nomeclasse");
• Selezione dell'ultimo elemento

  • $("nomeTag:last").addClass("nomeclasse");
• Selezione di tutti gli elementi precedenti all'ennesimo elemento a partire da 0
  • $("nomeTag:lt(7)").addClass("nomeclasse");
• Selezione di tutti gli elementi successivi all'ennesimo elemento a partire da 0
  • $("nomeTag:gt(7)").addClass("nomeclasse");
• Selezione dell'ennesimo elemento a partire da 0
  • $("nomeTag:eq(3)").addClass("nomeclasse");

Un breve esempio pratico sull’utilizzo dei filtri base di jQuery.

Post Correlati:

1. jQuery – BigTarget: aumentare la dimensione delle aree cliccabili I plugin di jQuery fioccano peggio che la neve in...
2. CSS Sprites2 – implementare jQuery su menu di navigazione In “CSS Sprites2 – It’s JavaScript Time“, pubblicato su Alistapart,...
3. Rilevare il browser con jQuery – un apposito plugin E tre… questo plugin per jQuery rende più preciso e...

Related posts brought to you by Yet Another Related Posts Plugin.

Qui di seguito un breve esempio:

[js]
// Sample 1
$.jGrowl(“Hello world!”);
// Sample 2
$.jGrowl(“Stick this!”, { sticky: true });
// Sample 3
$.jGrowl(“A message with a header”, { header: ‘Important’ });
// Sample 4
$.jGrowl(“A message that will live a little longer.”, { life: 10000 });
// Sample 5
$.jGrowl(“A message with a beforeOpen callback and a different opening animation.”, {
beforeClose: function(e,m) {
alert(‘About to close this notification!’);
},
animateOpen: {
height: ‘show’
}
});

[/js]

Post Correlati:

1. Galleriffic – plugin gallery per jQuery I plugin di jQuery sono un modo versatile e...
2. Rilevare il browser con jQuery – un apposito plugin E tre… questo plugin per jQuery rende più preciso e...
3. Posizionare il footer in fondo alla pagina con jQuery Spesso quest’attività, all’apparenza semplice, si scontra con il design di...

Related posts brought to you by Yet Another Related Posts Plugin.

• è progettata per essere veloce
• ha una configurazione flessibile e completa
• degrada dolcemente, conservando le sue funzionalità anche a javascript disattivati
• supporta gallerie multiple

Sul sito dell’autore è presente una breve guida per l’implementazione della gallery.

Post Correlati:

1. Rilevare il browser con jQuery – un apposito plugin E tre… questo plugin per jQuery rende più preciso e...
2. Implementare min-width, max-width, min-height ecc. con jQuery Credo che abbia più senso aprire una sezione apposita tanto...
3. Slide Show Pro: gallery in flash customizzabile SlideShowPro si distingue dalla concorrenza per l’estrema qualità del...

Related posts brought to you by Yet Another Related Posts Plugin.

Prima di tutto si crea una semplice lista:

[html]

• Home
• About
• Services
• Contact

[/html]

<ul> ha due classi, la prima “nav” ci permette di identificare l’interfaccia di navigazione dalle altre liste mentre la seconda, in questo caso “current-about” serve ad tener traccia della pagina in cui ci troviamo. Ogni list element ha la propria classe univoca.

Lo scopo è quello di ottenere al contempo un codice semplice e tutte le classi necessarie per inserire gli sprites.

A questo punto posizioniamo in modo assoluto il contenitore <ul>
[css]
.nav {
width: 401px;
height: 48px;
background: url(../i/blue-nav.gif) no-repeat;
position: absolute;
top: 100px;
left: 100px;
}
[/css]
Posizionare il contenitore (in modo assoluto o relativo) ci permetterà di sfruttare <ul> come riferimento per i list element (posizionati anch’essi in modo assoluto).

Ora si implementano gli elementi chiave relativi ai link contenuti nei list element posizionandoli in modo assoluto rispetto al contenitore <ul>:

[css]
.nav li a:link, .nav li a:visited {
position: absolute;
top: 0;
height: 48px;
text-indent: -9000px;
overflow: hidden;
}
.nav .home a:link, .nav .home a:visited {
left: 23px;
width: 76px;
}
.nav .home a:hover, .nav .home a:focus {
background: url(../i/blue-nav.gif) no-repeat -23px -49px;
}
.nav .home a:active {
background: url(../i/blue-nav.gif) no-repeat -23px -98px;
}
[/css]

Quello che si ottiene è riportato chiaramente nell’articolo originale; un semplice menu con effetto hover (condizione rispetto alla quale viene caricata un immagine di background contenente già tutti gli elementi grafici necessari e riposizionata rispetto alle dimensioni stabilite per il pulsante). Le 4 classi qui sopra andranno replicate per tutti i pulsanti (home, about, services e contact).

Inizializzare jQuery

A questo punto è necessario (se non lo avete già fatto) inizializzare jQuery. Collegate il framework e inizializzate lo script in questo modo:

[js]
$(document).ready(function(){

// qui metto lo script che viene eseguito quando il DOM è stato completamente caricato

});
[/js]

Ora via jQuery disattivo l’effetto hover, active ecc… impostato via CSS. In questo modo inizializzo il menu per l’effetto javascript che voglio ottenere ed al contempo faccio in modo che a js disattivati riemerga il comportamento precedentemente impostato via CSS (così abbiamo una degradazione a tre livelli: menu animato, menu CSS, lista semplice).

[js]
$(“.nav”).children(“li”).each(function() {
$(this).children(“a”).css({backgroundImage:”none”});
});
[/js]

Con la prima riga filtro e ciclo tutti gli elementi <li> figli della classe .nav. Con la seconda riga seleziono i link contenuti negli elementi ciclati dalla funzione e setto la proprietà background_image a “none”. Così ottengo una cosa del genere.

[js]
$(“.nav”).children(“li”).each(function() {
var current = “nav current-” + ($(this).attr(“class”));
var parentClass = $(“.nav”).attr(“class”);
if (parentClass != current) {
$(this).children(“a”).css({backgroundImage:”none”});
}
});
[/js]

A questo punto ciclo tutti i figli (li) della classe nav e setto due variabili (current e parentClass). “current” è una stringa fatta dalla concatenazione della sottostringa “nav current-” e la classe dell’elemento lista attualmente ciclato (vi ricordo che ul ha una classe di questo tipo “current-…”). “parentClass” va a leggere l’attributo class di un elemento avente come classe .nav (ul ha sia “nav” che “current-…” quindi parentClass sarà uguale a “nav current-…”).

A questo punto è necessario creare una funzione che ci permetta di controllare ogni forma di interazione con gli elementi lista:

[javascript]
function attachNavEvents(parent, myClass) {
$(parent + ” .” + myClass).mouseover(function() {
// do things here
}).mouseout(function() {
// do things here
}).mousedown(function() {
// do things here
}).mouseup(function() {
// do things here
});
}
[/javascript]

La funzione ha due argomenti (in realtà ciò la rende più flessibile ed applicabile a liste differenti, nel nostro caso potremmo passare alla funzione solamente la classe dell’elemento lista visto che .nav rimane un elemento fisso). La funzione sfrutta una caratteristica tipica di jQuery, ovvero la possibilità di concatenare diversi comportamenti in un unica riga di comando usando la notazione punto (per approfondimenti vedi la documentazione alla voce Chainability). In questo modo è possibile controllare tutti gli aspetti degli elementi lista in modo sintetico e leggibile.

Ora quindi aggiungeremo allo script principale la chiamata alla funzione per ogni elemento lista presente nel nostro menu (ovviamente non avendo impostato ancora nessun effetto per i comportamenti non vedremo ancora nulla)

[javascript]
attachNavEvents(“.nav”, “home”);
attachNavEvents(“.nav”, “about”);
attachNavEvents(“.nav”, “services”);
attachNavEvents(“.nav”, “contact”);
[/javascript]

A questo punto Shea introduce un piccolo trucco che a quanto pare rende più efficiente l’implementazione degli effetti di jQuery sul menu: invece di applicare direttamente tali effetti sugli elementi del menu li va ad applicare a dei div creati “al volo” via javascript. Questi div avranno una classe già devinita nei CSS (ce dovrà essere una per ogni elemento del menu):

[css]
.nav-home {
position: absolute;
top: 0;
left: 23px;
width: 76px;
height: 48px;
background: url(blue-nav.gif) no-repeat -23px -49px;
}
[/css]

Ogni div sarà posizionato in modo assoluto e si ritaglierà dall’immagine completa che contiene tutti i pulsanti e gli stati dei pulsanti solo la parte necessaria (questo approccio riduce notevolmente i tempi di caricamento del menu risolvendo in un unica richiesta al server tutte le immagini di cui il menù ha bisogno per funzionare).

Ora è tempo di implementare gli effetti (qui di seguito l’esempio per due stati: mouseover e mouseout):

[javascript]
function attachNavEvents(parent, myClass) {
$(parent + ” .” + myClass).mouseover(function() {
$(this).before(‘

‘);
$(“div.nav-” + myClass).css({display:”none”}).fadeIn(200);
}).mouseout(function() {
// fade out & destroy pseudo-link
$(“div.nav-” + myClass).fadeOut(200, function() {
$(this).remove();
});
});
}
[/javascript]

Con $(this).before andiamo a creare il div subito dopo l’elemento lista. Poi il div viene prima di tutto nascosto e con fadeIn(200) fatto apparire a una velocità di 200ms.
Quello che si ottiene dovrebbe essere simile a questo.
Naturalmente lo script si può completare aggiungendo con il medesimo principio altri div con classi differenti anche per gli altri due stati (mousedown e mouseup). In questo caso Shea sfrutta jQuery esclusivamente per creare i div e le classi e lascia fare il resto ai CSS creando classi ad hoc e visualizzando la parte di immagine contente lo stato corretto.
Naturalmente si possono utilizzare altri effetti come slideUp (vedi esempio).

In conclusione quello che si ottiene è un ottimo menu degradabile per i browser più vecchi, che funziona a js disattivati e in assenza dei CSS. Per com’è strutturato (è indubbiamente elegante ed ingegnoso) però lo vedo di difficile implementazione nei casi in cui abbiamo a che fare con un menu dinamico (come quello di un CMS).

Shea ci fornisce anche tutti gli script raggruppati in un file comodo comodo.

Post Correlati:

1. Implementare min-width, max-width, min-height ecc. con jQuery Credo che abbia più senso aprire una sezione apposita tanto...
2. Cambiare foglio Stile con jQuery In questo post mi domandavo come cambiare al volo foglio...
3. 35 menu Ajax semplici da implementare Oggi vi segnalo questo utilissimo post che raccoglie in una...

Related posts brought to you by Yet Another Related Posts Plugin.