JQuery – Semplice interfaccia a tab
JQuery è un framework che mette a disposizione una potente libreria JavaScript che ci permette di poter manipolare il codice (X)HMTL, il suo contenuto e stile così da creare numerosi effetti, animazioni e interazioni AJAX.
Fatta questa introduzione, nel presente articolo non voglio ne addentrarmi nella spiegazione tecnica di cosa sia JQuery ne voler entrare in un qualsiasi altro tecnicismo ma semplicemente mi limiterò nel descrivere, in una maniera molto semplice (spero), una delle tante potenzialità che JQuery può offrirci.
Un effetto molto gradevole ed utile nell’economia di un sito web è senz’altro un’interfaccia a tab.
JQuery permette di crearne di complesse ma la volontà di questo articolo è descriverne uno base, semplice ma comunque funzionale e facilmente adattabile a molte esigenze (vedi il risultato finale).
Per creare la nostra interfaccia quello che ci servirà è la libreria base di JQuery che andremo ad incorporare nell’intestazione (tra i tag <head> del nostro documento html:
1 | <script src=”jquery-1.3.min.js” type=”text/javascript”></script> |
La libreria usata in questo articolo è la minified cioè una versione compressa della stessa così da appesantire il meno possibile la nostra pagina web. Circa il numero di versione qui ho utilizzato l’ultima disponibile, al momento della stesura dell’alrticolo, ovvero la 1.3.
Quindi ora basterà creare una struttura (X)HTML come questa:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | <div class=”tabsContainers”> <ul class=”tabsNavigation”> <li><a href=”#tab1″>Tab 1</a></li> <li><a href=”#tab2″>Tab 2</a></li> <li id=”lastTab”><a href=”#tab3″>Tab 3</a></li> </ul> <div id=”tab1″> <!– inserire del contenuto –> </div> <div id=”tab2″> <!– inserire del contenuto –> </div> <div id=”tab3″> <!– inserire del contenuto –> </div> </div> |
Importantissimo in questa struttura è assegnare gli attributi class ed id ai tag html così come riportati nel sopra citato codice. Ovviamente siete liberi di assegnare il valore che volete ai rispettivi attributi ma, come risulterà evidente nel prosieguo dell’articolo, sarà opportuno cambiarlo nel codice Javascript quando verranno chiamati in causa.
Fatto ciò non ci resta che inserire il seguente codice JavaScript che genererà la nostra interfaccia:
1 2 3 4 5 6 7 8 9 10 11 | <script type=”text/javascript”> $(function () { var tabsContainers = $(’div.tabsContainers > div’); $(’div.tabsContainers ul.tabsNavigation a’).click(function () { tabsContainers.hide().filter(this.hash).show(); $(’div.tabsContainers ul.tabsNavigation a’).removeClass(’actived’); $(this).addClass(’actived’); return false; }).filter(’:first’).click(); }); </script> |
Senza addentrarci troppo nello specifico, come potete notare nel codice dello script troviamo, fra le parentesi delle funzioni, i valori degli attributi class ed id usati nel html.
Per dirla in breve e molto maccheronicamente questi attributi servono a JQuery per sapere a quale codice html e secondo quale logica applicare gli effetti.
Il nostro script quindi non farà altro che visualizzare il contenuto del div con il valore dell’id uguale al valore del percorso del link che è stato selezionato preceduto dal carattere cancelletto (#), che in verità quest’ultimo non sarebbe nient’altro che la dichiarazione dell’id. In parole semplici il link <a href=”#tab1″> mostrerà il div <div id=”tab1″> e così via gli altri. Ne consegue che per inserire una nuova tab basterà inserire un link che abbia come percorso la dichiarazione dell’id del nuovo div inserito.
Cerchiamo ora di entrare un pò più nello specifico ma rimanendo pur sempre il meno tecnici possibili.
Con la seguente porzione di codice:
var tabsContainers = $(’div.tabsContainers > div’);
diremo che lo script sarà applicato a tutti i div contenuti all’interno del div con classe tabsContainers.
In quest’altra porzione di codice,
$('div.tabsContainers ul.tabsNavigation a').click(function () { tabsContainers.hide().filter(this.hash).show(); $('div.tabsContainers ul.tabsNavigation a').removeClass('actived'); $(this).addClass('actived'); return false; }).filter(':first').click();
invece, diremo a JQuery che per switchare da una tab all’altra bisognerà cliccare col mouse sui link inseriti nella lista con classe tabsNavigation situata all’interno del div con classe tabsContainers ( $(’div.tabsContainers ul.tabsNavigation a’) ).
Infine con quest’altra porzione di codice:
$(this).addClass('actived');
aggiungeremo dinamicamente la classe actived al link corrispondente alla tab attiva. Questa classe ci servirà nel caso in cui volessimo applicare un qualche tipo di stile a questo comportamento come, ad esempio, evidenziare la tab che si sta visualizzando. Ovviamente removeClass(’actived’); fa l’esatto contrario.
Fatto questo abbiamo tecnicamente ultimato la nostra semplice interfaccia a tab, quindi, per rendere il tutto più piacevole od adattarlo alle nostre esigenze non ci resta che applicare un pò di stile con i CSS che, essendo un discorso che esula dall’articolo, non starò qui a descrivere. Nell’archivio contenente l’esempio troverete comunque uno stile che ho creato per l’occorrenza che potrete usare come spunto di partenza.
Questo descritto nell’articolo è solamente un esempio base ed un assaggio delle potenzialità di JQuery, quindi starà alla nostra fantasia arricchirlo o modificarlo come meglio crediamo.
Tuttavia JQuery dispone di una vasta libreria di plugins, tra questi JQuery.tabs.js che permette di realizzare effetti tab molto più complessi.
Ma questo è un altro capitolo…. .
Iscriviti ai FEED RSS
[...] Originale: Another blog… » JQuery – Semplice interfaccia a tab Author: [...]
Pingback di Another blog… » JQuery - Semplice interfaccia a tab — 16 gennaio 2009 @ 03:14
Beh non posso che farti i complimenti…
lo proverò presto
Commento di Alex — 16 gennaio 2009 @ 15:20
Hardcover edition the pieces [url=http://otjktm.com/nizoral-for-guinea-pigs/]nizoral medication[/url] yet public short while [url=http://otjktm.com/azithromycin-ophthalmic-drops/]azithromycin contraindicate pseudovent[/url] had won near horizon [url=http://otjktm.com/valium-low-cost/]alcohol detox valium[/url] hey hauled verburg they [url=http://otjktm.com/why-do-individuals-use-ecstasy/]ecstasy brain effects[/url] police questionin and many [url=http://otjktm.com/flonase-va-allegra/]cafe allegra madison ct[/url] this turns the loyalty [url=http://otjktm.com/what-is-the-medicine-lotrel/]lotrel and alcohol[/url] person can the alternativ [url=http://otjktm.com/fluconazole-2b-side-effects/]fluconazole and alcohol[/url] the shrine whole countries [url=http://otjktm.com/brimonidine-tartrate-alphagan-p-.15/]alphagan 15[/url] check with chose the [url=http://otjktm.com/protopic-used-for/]rosacea protopic pastules[/url] ars mused friendly meeting [url=http://otjktm.com/acyclovir-msds/]silicone elastomer acyclovir[/url] and pushed healthy outlets [url=http://otjktm.com/tylenol-cold-and-sinus/]does tylenol raise blood pressure[/url] gonna have three kilometers [url=http://otjktm.com/serum-sickness-and-tetracycline/]tetracycline and dosage for feline cat[/url] was become could continue [url=http://otjktm.com/tussionex-extended-release/]oxycodone plus tussionex[/url] vapors scarcely some rest [url=http://otjktm.com/plavix-substitute/]plavix surgery 2007[/url] ics were asta luego [url=http://otjktm.com/blood-presure-medicine-ibuprofen/]aleve ibuprofen[/url] from autococine would chew [url=http://otjktm.com/addison's-disease-premarin/]law suit and lawyers against premarin[/url] robot senses off his [url=http://otjktm.com/the-effects-of-amitriptyline/]amitriptyline for pain relief[/url] had drawn admitting that [url=http://otjktm.com/over-the-counter-meclizine/]meclizine makes me so sleepy[/url] his chair curving off [url=http://otjktm.com/buy-tadalafil-medicine/]order tadalafil 270 online[/url] what power path reached [url=http://otjktm.com/ultracet-drug-pain/]controlled substance list ultracet[/url] ophotectic minds reaction mass [url=http://otjktm.com/aciphex-and-cancer/]drug monographs aciphex[/url] local magistrate ifferent from [url=http://otjktm.com/hc-histex/]histex hc liquid[/url] trajectory now dinner the [url=http://otjktm.com/brand-name-fioricet-onlin/]fioricet caffeine[/url] she judged had before [url=http://otjktm.com/how-much-ibuprofen-overdose/]how much ibuprofen can i take[/url] offered her many facts [url=http://otjktm.com/tenuate-mexico/]tenuate dospan diet pills[/url] off blind glance flipped [url=http://otjktm.com/dosage-synalar-for-eczema/]synalar ointment[/url] might take hile that [url=http://otjktm.com/flumadine-cost/]generic for flumadine[/url] tried earlier and tossed [url=http://otjktm.com/terazosin-msa/]terazosin cap 5mg[/url] the winds tana paused [url=http://otjktm.com/histex-ct/]histex pd 12[/url] better subsequent those bands [url=http://otjktm.com/acyclovir-chemical-synthesis/]5 acyclovir ointment[/url] did wrong deficient from [url=http://otjktm.com/relenza-ad-unwanted/]dutch relenza[/url] seen his expected this [url=http://otjktm.com/buy-methylphenidate/]methylphenidate toxicity[/url] overhaul her and neither [url=http://otjktm.com/symptoms-of-fluoxetine-withdrawal/]cat fluoxetine 2.5mg[/url] crowd numbered every world [url=http://otjktm.com/baycol-lawyer-philadelphia/]dallas baycol lawyer[/url] cargoes that cybercosm goes [url=http://otjktm.com/synalar-cream-blemish/]synalar blemish[/url] long space was alerted [url=http://otjktm.com/how-do-you-purify-cocaine/]does cocaine dialate your eyes[/url] their footfalls stationary sophotect [url=http://otjktm.com/withdrawl-from-prozac-symptoms/]ease sexual side effects from prozac[/url] after might led into [url=http://otjktm.com/antivert-and-darvaset/]what is antivert[/url] competent person ghosted over [url=http://otjktm.com/lotrisone-solution/]prescription for lotrisone[/url] suppose because presence give [url=http://otjktm.com/forms-of-marijuana/]hydroponic marijuana bust[/url] you come randir asked [url=http://otjktm.com/lotensin-dosage/]lotensin stopping discontinuing[/url] single man motions were [url=http://otjktm.com/thiamin-mononitrate-facts/]isosorbide mononitrate toxicity[/url] shake this and trusted [url=http://otjktm.com/terbinafine-immune-reaction-disturbance/]hcl terbinafine[/url] will lend change any [url=http://otjktm.com/comparative-study-of-losartan-and-metropolol/]losartan and drinking alcohol[/url] hunder boomed any babies [url=http://otjktm.com/depakote-er-generic/]depakote problems[/url] appeared sincere ong and [url=http://otjktm.com/benefits-ativan/]b-complex and ativan[/url] the kitchen few ancient [url=http://otjktm.com/between-difference-hctz-hctz-spironolactone-triamterene-fhu/]triamterene hctz 37 5 side effects[/url] made sense ince that [url=http://otjktm.com/pharmacokinetics-of-tetracyclines-in-dog/]contraindications to tetracycline[/url] his posture really won [url=http://otjktm.com/drug-prescription-vardenafil-hydrochloride/]vardenafil viagra cialis[/url] has ignored she stopped [url=http://otjktm.com/keyword-flexeril/]get high on flexeril[/url] their tigers lifts.
Commento di Mutuelamakuh — 25 maggio 2009 @ 22:48