Javascript

Se stai cercando approfondimenti e indicazioni utili per esplorare tutte le potenzialità del linguaggio Javascript, sei nel posto giusto!

YUI Library e relativi esempi

KnockoutJS e relativi esempi

Leggi tutto 7 marzo 2011

La momentanea visualizzazione delle immagini, utilizzata dallo script JavaScript ‘Coin-Slider’ durante il caricamento, è sicuramente uno dei problemi più fastidiosi di questo strumento jQuery.

Per risolverlo, occorre utilizzare questa accortezza: aggiungere poche, ma preziose indicazioni al momento dell’inserimento HTML.

Nello specifico:

Aggiungete la parte di codice in corsivo, modificando i valori dimensionali a vostro piacimento. Essi determineranno quanto mostrare delle immagini prima del completo caricamento. Per esempio, indicando per entrambi il valore ‘0px’, sarà possibile nascondere completamente le immagini.

Leggi tutto 3 gennaio 2011

nice_forms

Nel contesto di quella che oramai può essere definita “la guerra dei browser” per la conquista del WEB 2.0, avviciniamoci a questa nuova era migliorando l’aspetto dei nostri form (e non solo!) con qualche semplice passo e senza mettere mani nei CSS

Il parser del browser, come molti di noi sappiamo, quando incontra alcuni tag HTML come <FORM …> e <input type=”submit” …>, renderizza degli oggetti che, se non definito diversamente con dei CSS, saranno quelli utilizzati dal sistema operativo (i cosiddetti “gui toolkits“).

Alcuni browser, come Safari, hanno delle librerie di render “eye-candy” per questi elementi, ma per rendere l’aspetto dei FORM di immissione esteticamente più accattivanti con la maggior parte degli internauti è necessario usare i CSS. Emblematiq però ha realizzato una facilissima libreria per rendere i form più belli in pochi semplici passi sfruttando JavaScript (la libreria NON è compatibile con IE 6).

Vediamo infatti come intervenire sulla nostra pagina web (o sul template in uso sul sito):

Scaricare l’ultima versione di “niceforms” qui, Fare l’upload sul nostro sito dei nuovi file dal file compresso appena scaricato (nf-standard-blue.psd è solo per le personalizzazioni e si può fare a meno di tenerlo sul nostro sito)

Immettere queste due semplici righe tra i tag <HEAD> e </HEAD>:

Cambiare il class=”niceform” dei FORM negli HTML che volete rendere “più belli” 

niceforms_code

 

Demo: http://www.emblematiq.com/lab/niceforms/demo/v20/niceforms.html

 

Leggi tutto 28 settembre 2010

Problema:

La richiesta di geolocalizzazione è sempre più ampia, pertanto è necessario trovare gli strumenti più semplici per ottenere mappe usabili dall’utente. Se fino ad ora si utilizzava prevalentemente Flash, le potenzialità di Javascript stanno prendendo sempre più piede.

Soluzione 1 – GoogleMap + JQuery:

L’integrazione di questi 2 strumenti consente per ora limitate possibilità al programmatore. Ho trovato in particolare 3 siti interessanti, ognuno dei quali ha sviluppato un proprio plugin grazie al quale richiamare le funzioni GMap direttamente con JQuery, alleggerendo la quantità di codice da scrivere e dando la possibilità di integrare, per quanto possibile, alcuni effetti Javascript (ancora piuttosto pochi e semplici in realtà):

  • gMap: creazione, settaggio, visualizzazione e semplice alterazione di una google map; nessun effetto grafico particolarmente interessante;
  • Google Maps JQuery: come il precedente, ma le possibili funzioni sono molte di più; da segnalare la possibilità di aggiungere layer, linee ed aree;
  • jMapping: utilizza una procedura più complessa, a partire dall’installazione del plugin; un interessante funzionalità è sicuramente quella della paginazione delle mappe, visibile qui.

Soluzione 2 – Immagini mappali + JQuery:

Un altro strumento, più simile a come opera Flash, potrebbe essere l’utilizzo di puro codice Javascript, affiancato da immagini presenti direttamente sul server locale. Un esempio vale più di mille parole: http://www.gethifi.com/blog/a-jquery-plugin-for-zoomable-interactive-maps

Questo gruppo di programmatori ha sfruttato JQuery per creare una mappa con zoom, punti di interesse cliccabili con pop-up alla quale aggiungere testo, link, etc.

Conclusioni personali:

In conclusione posso affermare che JQuery e Google Map sono ancora agli inizi del loro viaggio insieme; purtroppo la complessità ela scarsa accessibilità dei dati gestiti da Google Map, soprattutto i layer contenenti le immagini geografiche, non consentiranno di sfruttare appieno le potenzialità del framework Javascript. Ritengo invece la seconda soluzione davvero molto bella e piena di potenzialità; certo, non usa Google Maps, ma può essere molto utile per siti dove è richiesta una geolocalizzazione limitata, come visibile negli esempi sul sito di riferimento. Ho letto tutta la spiegazione su come implementare lo script e commenti entusiasti di utenti in grado di utilizzare un loro CMS per inserire via back-end i punti sulla mappa, sfruttando HTML, XML o altro per recuperare tali dati. Credo che questo si avvicini maggiormente alla richiesta iniziale.

Leggi tutto 7 luglio 2010

Accordion Samples

Questa pagina fornisce esempi di come modificare il comportamento e lo stile di accordions.

 

  • Comportamento di default e Stile
  • Impostazione del Pannello di Default
  • Attivare la navigazione da tastiera
  • Cambiare tasti di navigazione
  • Attivare i collegamenti con la navigazione da tastiera
  • Regolare la durata dell’animazione e FPS
  • Scegliere la transizione dell’Animazione
  • Disabilitare l’Animazione
  • Pannelli ad altezza variabile
  • Partenza con tutti i pannelli chiusi
  • Apertura e chiusura dei pannelli programmata
  • Uso di blocchi diversi dai div
  • Stilizzare con diversi nomi di classi CSS
  • Stampare il contenuto di un Accordion
  • Generare un Accordion con dati Spry xml

Most of the examples use this basic markup structure and JavaScript:

Each example will show only the set of changes to the markup and JS above, that were necessary to enable the behavior.


Default Behavior and Style

This is an example of what an accordion with the markup above would look like using the default styles from SpryAccordion.css. By default, the accordion will expand horizontally to fit its parent container, unless you use CSS to constrain the width of the top-level element (div) of the Accordion. Animation is enabled by default, and the heights of all the Accordion content panels are the same.

Panel 1

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Panel 2
Panel 2 Content
Panel 3
Panel 3 Content
Panel 4
Panel 4 Content

 


Setting the Default Panel

This is an example of how to create an accordion that has its 3rd panel open by default.

Panel 1

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Panel 2
Panel 2 Content
Panel 3
Panel 3 Content
Panel 4
Panel 4 Content

This is accomplished by passing the zero-based index of the panel into the Accordion’s constructor with the “defaultPanel” option:

 


Enabling Keyboard Navigation with tabindex

This is an example of an Accordion which has the ability to gain focus and has keyboard navigation enabled.

Panel 1

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Panel 2
Panel 2 Content
Panel 3
Panel 3 Content
Panel 4
Panel 4 Content

To enable the ability for the accordion to gain keyboard focus and open panels via the keyboard, place a tabindex attribute on the top-level accordion div element. You can give the accordion focus by tabbing to it, or by clicking on a panel tab. After the accordion has keyboard focus, you can use the Up and Down arrow keys to switch between the different panels.

 


Changing Navigation Keys

This is an example of how to override the default up/down arrow key codes used for navigating. The accordion below uses the ‘n’ and ‘p’ keys to open the next or previous panel.

Panel 1

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Panel 2
Panel 2 Content
Panel 3
Panel 3 Content
Panel 4
Panel 4 Content

To override the default key codes, specify the new keycodes with the “nextPanelKeyCode” and “previousPanelKeyCode” Accordion constructor options:

 


Enabling Keyboard Navigation with Links

This is an example of an Accordion that uses <a> tags within its AccordionPanelTab elements to enable keyboard navigation via the tab key. To open a tab, use the tab key until the link in the panel tab is selected, then hit the return key to activate it.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Panel 2 Content
Panel 3 Content
Panel 4 Content

To enable this behavior, remove any tabindex attribute that may be on the top-level Accordion element, and simply embed your <a> tags in the panel tab:

The “enableKeyboardNavigation: false” constructor option is necessary to get around the problem in IE where querying for the presence of the tabindex attribute, via the DOM API, always reports that one exists, even if it is not in the markup.

Note that the example above is setup so that clicking on the links when JavaScript is disabled, takes you to the AccordionPanelContent immediately below the AccordionPanelTab.


Adjusting Animation Duration and FPS

This is an example of how to change the duration and/or the frames per second (fps) of the Accordion’s open/close panel animation.

Panel 1

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Panel 2
Panel 2 Content
Panel 3
Panel 3 Content
Panel 4
Panel 4 Content

You can pass the duration of the animation in milliseconds using the “duration” constructor. You can also adjust the frame rate (fps) by specifying the number of frames per second:


Setting the Transition/Easing of the Animation

The Accordion’s panel animation code uses a transition function to calculate the size of the panel at each frame of the open/close animation. The signature of this function matches the signature of the transition functions defined in SpryEffects.js and in Robert Penner’s Easing Library. This means that it is possible to use a transition function from either of those libraries to animate the Accordion panels.

Panel 1

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Panel 2
Panel 2 Content
Panel 3
Panel 3 Content
Panel 4
Panel 4 Content

To change the transition function, you simply include the JS file that defines the function and pass the function into the Accordion’s constructor with the “transition” option:

 


Turning Animation Off

This is an example of an accordion with panel animations turned off.

Panel 1

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Panel 2
Panel 2 Content
Panel 3
Panel 3 Content
Panel 4
Panel 4 Content

This is accomplished by passing a false value for the “enableAnimation” constructor option. :


Variable Panel Heights

This is an example of how to create an accordion with varying panel heights.

Panel 1

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Panel 2

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Panel 3

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Panel 4

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

You enable variable height panels by passing a false as the value of the “useFixedPanelHeights” constructor option:

In this mode, the Accordion automatically sizes the height of each content panel to fit all of the content within it.


Starting with All Panels Closed

This is an example of how to create an accordion that is initially closed.

Panel 1

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Panel 2

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Panel 3

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Panel 4

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

This feature is only supported when using variable height panels, so you must pass a false into the Accordion’s constructor for the “useFixedPanelHeights” constructor option, and a -1 for the “defaultPanel” option:


Programatically Opening and Closing Panels

This is an example of how to programatically open or close the panels of an Accordion. Click on the links below to manipulate the accordion below:

Open by Simple Navigation: First | Previous | Next | Last

Open by Panel Index: 0 | 1 | 2 | 3

Open by Panel ID: panel1 | panel2 | panel3 | panel4

Close: Current Panel

Panel 1

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Panel 2

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Panel 3

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Panel 4

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Note that the programatic closing of the current panel is only supported when using variable height panels. Here’s the code for the example above:


Using Other Block Level Elements

This example demonstrates the ability to use other block level elements, other than divs, to build the structure of an Accordion. It dosen’t matter what tags are used to build up the structure of the Accordion. What does matter is that the elements that make up the structure are styled as block elements, and that they are properly nested.

Panel 1

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Panel 2

Panel 2 Content

Panel 3

Panel 3 Content

  1. one
  2. two
  3. three

 


Styling With Different CSS Class Names

This is an example of styling an accordion using totally different class names than the ones specified in SpryAccordion.css. This example also shows how to override the built-in CSS class names used by the hover, panel open, panel closed, and accordion focused behaviors.

Panel 1

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Panel 2
Panel 2 Content
Panel 3
Panel 3 Content
Panel 4
Panel 4 Content

 

The code for this (minus the panel content) looks like this:


Printing the Contents of an Accordion

When printing a document that contains an Accordion, it may sometimes be desireable to print the content in content panels that are currently closed on screen. To do this, you need to add some CSS print media style rules which force the Accordion panels to show all their content:

The “!important” on these rules is necessary because the Accordion widget places inline styles on the actual AccordionPanelContent elements when opening and closing them. Since inline styles have a higher CSS specificity then CSS class rules, “!important” is necessary to “trump” the inline styles.


 

Generating Accordion Markup with Spry Data

To see an example of how to build an accordion from XML data using Spry’s Data Set and Dynamic Region support, click here.

Leggi tutto 23 ottobre 2009

L’attributo per aprire pagine esterne al nostro sito, in una nuova finestra è il

target=”blank”

da usare all’interno del tag <a>.

Tale tag però non risulta valido secondo i criteri del w3c, e quando inserito invalida la pagina.

Esiste però un modo per mantenere la pagina valida, e aprire contemporaneamente una pagina esterna in una nuova finestra.

Al posto del target=”_blank” nel tag <a> va inserito il seguente codice javascript.

onclick=”this.target=’_blank'”

Il quale sfrutta l’evento javascript onclick, che intercetta il click dell’utente, e forza l’apertura della pagina in una nuova finestra.

Questo metodo è tollerato dal w3c, che non segnala come errore l’utilizzo del javascript, e nello stesso tempo produce lo stesso identico risultato del target=”_blank”

Leggi tutto 20 ottobre 2009