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:
|
1 2 3 4 |
<div id='coin-slider' style="width:1000px; height:250px; overflow:hidden; position:relative"> <a target='_blank' href='http://www.abcdef.com'><img src='/qwe/asd/zxc.jpg' /><span>Something...</span></a> ... </div> |
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.
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>:
|
1 2 |
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ /> <script language=”javascript” type=”text/javascript” src=”niceforms.js”></script> |
Cambiare il class=”niceform” dei FORM negli HTML che volete rendere “più belli”
|
1 |
<form …. class=”niceform” > |
Demo: http://www.emblematiq.com/lab/niceforms/demo/v20/niceforms.html
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.
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:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 |
<script language="JavaScript" type="text/javascript" src="../../widgets/accordion/SpryAccordion.js"></script> <link href="../../widgets/accordion/SpryAccordion.css" rel="stylesheet" type="text/css" /> ... <div id="Acc1" class="Accordion"> <div class="AccordionPanel"> <div class="AccordionPanelTab">Panel 1</div> <div class="AccordionPanelContent"> ... </div> </div> <div class="AccordionPanel"> <div class="AccordionPanelTab">Panel 2</div> <div class="AccordionPanelContent"> ... </div> </div> <div class="AccordionPanel"> <div class="AccordionPanelTab">Panel 3</div> <div class="AccordionPanelContent"> ... </div> </div> <div class="AccordionPanel"> <div class="AccordionPanelTab">Panel 4</div> <div class="AccordionPanelContent"> ... </div> </div> </div> <script type="text/javascript"> var acc1 = new Spry.Widget.Accordion("Acc1"); </script> |
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.
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.
Setting the Default Panel
This is an example of how to create an accordion that has its 3rd panel open by default.
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.
This is accomplished by passing the zero-based index of the panel into the Accordion’s constructor with the “defaultPanel” option:
|
1 2 3 4 5 |
... <script type="text/javascript"> var acc1 = new Spry.Widget.Accordion("Acc1", { defaultPanel: 2 }); </script> |
Enabling Keyboard Navigation with tabindex
This is an example of an Accordion which has the ability to gain focus and has keyboard navigation enabled.
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.
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.
|
1 2 3 4 5 6 7 8 9 10 11 |
... <div id="Acc1" class="Accordion" tabindex="0"> ... </div> <script type="text/javascript"> var acc1 = new Spry.Widget.Accordion("Acc1"); </script> |
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.
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.
To override the default key codes, specify the new keycodes with the “nextPanelKeyCode” and “previousPanelKeyCode” Accordion constructor options:
|
1 2 3 4 5 6 7 8 9 10 11 12 |
... <script type="text/javascript"> // Keycode for 'n' is 78 // Keycode for 'p' is 80 var acc1 = new Spry.Widget.Accordion("Acc1", { nextPanelKeyCode: 78, previousPanelKeyCode: 80 }); </script> |
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.
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:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 |
... <style type="text/css"> .AccordionPanelTab a { display: block; color: black; text-decoration: none; } </style> ... <div id="Acc1" class="Accordion"> <div class="AccordionPanel"> <div class="AccordionPanelTab"><a href="#p1">Panel 1</a></div> <div id="p1" class="AccordionPanelContent"> ... </div> </div> <div class="AccordionPanel"> <div class="AccordionPanelTab"><a href="#p2">Panel 2</a></div> <div id="p2" class="AccordionPanelContent"> ... </div> </div> <div class="AccordionPanel"> <div class="AccordionPanelTab"><a href="#p3">Panel 3</a></div> <div id="p3" class="AccordionPanelContent"> ... </div> </div> <div class="AccordionPanel"> <div class="AccordionPanelTab"><a href="#p4">Panel 4</a></div> <div id="p4" class="AccordionPanelContent"> ... </div> </div> </div> <script type="text/javascript"> var acc1 = new Spry.Widget.Accordion("Acc1", { enableKeyboardNavigation: false }); </script> |
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.
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.
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:
|
1 2 3 4 5 6 |
... <script type="text/javascript"> var acc1 = new Spry.Widget.Accordion("Acc1", { duration: 250, fps: 90 }); </script> |
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.
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.
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:
|
1 2 3 4 5 6 7 8 9 10 11 |
<script language="JavaScript" type="text/javascript" src="../../widgets/accordion/SpryEffects.js"></script> <script language="JavaScript" type="text/javascript" src="../../widgets/accordion/SpryAccordion.js"></script> <link href="../../widgets/accordion/SpryAccordion.css" rel="stylesheet" type="text/css" /> ... <script type="text/javascript"> var acc1 = new Spry.Widget.Accordion("Acc1", { transition: Spry.circleTransition }); </script> |
Turning Animation Off
This is an example of an accordion with panel animations turned off.
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.
This is accomplished by passing a false value for the “enableAnimation” constructor option. :
|
1 2 3 4 5 |
... <script type="text/javascript"> var acc1 = new Spry.Widget.Accordion("Acc1", { enableAnimation: false }); </script> |
Variable Panel Heights
This is an example of how to create an accordion with varying panel heights.
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.
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.
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:
|
1 2 3 4 5 |
... <script type="text/javascript"> var acc1 = new Spry.Widget.Accordion("Acc1", { useFixedPanelHeights: false }); </script> |
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.
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.
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.
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:
|
1 2 3 4 5 |
... <script type="text/javascript"> var acc1 = new Spry.Widget.Accordion("Acc1", { useFixedPanelHeights: false, defaultPanel: -1 }); </script> |
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
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.
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.
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:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 |
... <p>Open by Simple Navigation: <a href="#" onclick="acc1.openFirstPanel(); return false;">First</a> | <a href="#" onclick="acc1.openPreviousPanel(); return false;">Previous</a> | <a href="#" onclick="acc1.openNextPanel(); return false;">Next</a> | <a href="#" onclick="acc1.openLastPanel(); return false;">Last</a> </p> <p>Open by Panel Index: <a href="#" onclick="acc1.openPanel(0); return false;">0</a> | <a href="#" onclick="acc1.openPanel(1); return false;">1</a> | <a href="#" onclick="acc1.openPanel(2); return false;">2</a> | <a href="#" onclick="acc1.openPanel(3); return false;">3</a> </p> <p>Open by Panel ID: <a href="#" onclick="acc1.openPanel('panel1'); return false;">panel1</a> | <a href="#" onclick="acc1.openPanel('panel2'); return false;">panel2</a> | <a href="#" onclick="acc1.openPanel('panel3'); return false;">panel3</a> | <a href="#" onclick="acc1.openPanel('panel4'); return false;">panel4</a> </p> <p>Close: <a href="#" onclick="acc1.closePanel(); return false;">Current Panel</a> </p> <div id="Acc1" class="Accordion" tabindex="0"> <div id="panel1" class="AccordionPanel"> ... </div> <div id="panel2" class="AccordionPanel"> ... </div> <div id="panel3" class="AccordionPanel"> ... </div> <div id="panel4" class="AccordionPanel"> ... </div> </div> <script type="text/javascript"> var acc1 = new Spry.Widget.Accordion("Acc1", { useFixedPanelHeights: false }); </script> |
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 |
Panel 4 |
- one
- two
- three
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 |
<script language="JavaScript" type="text/javascript" src="../../widgets/accordion/SpryAccordion.js"></script> <link href="../../widgets/accordion/SpryAccordion.css" rel="stylesheet" type="text/css" /> <style type="text/css"> span.AccordionPanelContent { display: block; } </style> ... <div id="Acc1" class="Accordion" tabindex="0"> <div class="AccordionPanel"> <h3 class="AccordionPanelTab">Panel 1</h3> <span class="AccordionPanelContent"> ... </span> </div> <div class="AccordionPanel"> <h2 class="AccordionPanelTab">Panel 2</h2> <p class="AccordionPanelContent"> ... </p> </div> <div class="AccordionPanel"> <p class="AccordionPanelTab">Panel 3</p> <p class="AccordionPanelContent"> ... </p> </div> <div class="AccordionPanel"> <pre class="AccordionPanelTab">Panel 4</pre> <ol class="AccordionPanelContent"> <li> ... </li> </ol> </div> </div> <script type="text/javascript"> var acc1 = new Spry.Widget.Accordion("Acc1"); </script> |
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.
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.
The code for this (minus the panel content) looks like this:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 |
<script language="JavaScript" type="text/javascript" src="../../widgets/accordion/SpryAccordion.js"></script> <link href="../../widgets/accordion/SpryAccordion.css" rel="stylesheet" type="text/css" /> <style type="text/css"> .AquaAccordion { border-left: solid 1px gray; border-right: solid 1px black; border-bottom: solid 1px gray; overflow: hidden; font-family: "Times New Roman", Times, serif; font-size: 16px; } .AquaAccordion .Tab { height: 24px; background-image: url(images/aqua-gradient.gif); background-repeat: repeat-x; background-color: #6dc1fc; border-top: solid 1px black; border-bottom: solid 1px gray; margin: 0px; padding: 2px; cursor: pointer; -moz-user-select: none; -khtml-user-select: none; text-align: center; } .AquaAccordion .Content { overflow: auto; height: 300px; margin: 0px; padding: 0px; background-image: url(images/gray-gradient.gif); background-repeat: repeat-x; } .AquaAccordion .hover { background-image: none; background-color: #33CCFF; } .AquaAccordion .open { /* Add properties here. */ } .AquaAccordion .closed { /* Add properties here. */ } .AquaAccordion .focused { /* Add properties here. */ } </style> ... <div id="Acc9" class="AquaAccordion" tabindex="0"> <div class="Panel"> <div class="Tab"> <div class="Label">Panel 1</div> </div> <div class="Content"> ... </div> </div> <div class="Panel"> <div class="Tab">Panel 2</div> <div class="Content"> ... </div> </div> <div class="Panel"> <div class="Tab">Panel 3</div> <div class="Content"> ... </div> </div> <div class="Panel"> <div class="Tab">Panel 4</div> <div class="Content"> ... </div> </div> </div> <script type="text/javascript"> var acc1 = new Spry.Widget.Accordion("Acc1", { hoverClass: "hover", openClass: "open", closedClass: "closed", focusedClass: "focused" }); </script> |
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:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<link href="../../css/samples.css" rel="stylesheet" type="text/css" /> <link href="../../widgets/accordion/SpryAccordion.css" rel="stylesheet" type="text/css" /> <style type="text/css" media="print"> .Accordion { overflow: visible !important; } .AccordionPanelContent { display: block !important; overflow: visible !important; height: auto !important; } </style> |
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.
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”