Esistono in rete molti esempi per realizzare un tab menu (menu a schede) che possono essere integrati utilizzando l'oggetto HTML. Questo però comporta la scrittura delle regole di stile e del codice HTML di tutti i contenuti.
In questo topic vedremo come creare un tab menu con la versione 10 utilizzando gli oggetti del programma per l'inserimento dei contenuti. Noi abbiamo provato con questi oggetti: oggetto testo, tabella, galleria miniature orizzontali, ma non si esclude l'utilizzo anche di altri oggetti, da testare.
Qui le prove:
tre tab con oggetto testo, tabella e galleria:
http://lemonsong.altervista.org/test_menu_tab/quattro tab con quattro oggetti testo:
http://stesil.altervista.org/evo10/menu-tab/1. Disposizione degli oggetti nella griglia della pagina Struttura pagina con tre tab:
[ Guests cannot view attachments ]
Struttura pagina con quattro tab:
[ Guests cannot view attachments ]
Questi sono gli oggetti che compongono il tab menu:
- un oggetto HTML, che contiene il codice per le voci del menu;
- il primo oggetto visibile al caricamento della pagina posto subito sotto di esso;
- nelle ultime righe della griglia gli oggetti nascosti che verranno visualizzati cliccando sulle varie voci.
Da notare che le celle adiacenti appartenenti alla stessa riga degli oggetti nascosti
devono rimanere vuote.
2. Identificazione degli id Occorre identificare gli id delle celle degli oggetti con i contenuti visibili e di quelle con i contenuti nascosti.
Per questo scopo possiamo utilizzare ad esempio "Ispeziona codice" richiamabile con il tasto destro del mouse dall'anteprima di WS:
[ Guests cannot view attachments ]
Questi serviranno sia per il codice HTML del tab menu, sia per il codice jQuery.
3. Codice in HEAD In proprietà della pagina, esperto, prima della chiusura del tag </HEAD>
<script src='files/jquery-ui-min-1.10.4.js'></script>
<script>
var cellV = 'imCell_5'; // numero cella oggetto visibile
var cellH1 = 'imCell_6'; // numero cella oggetto nascosto
var cellH2 = 'imCell_7'; // numero cella oggetto nascosto
var cellH3 = 'imCell_8'; // numero cella oggetto nascosto
var fxUI = 'fade'; // effetto UI (consigliati: blind, fade, slide)
</script>
<script src='files/menu_tab_4.js'></script>
Il file della libreria jQueryUI (estensione della libreria jQuery), che può essere scaricato qui
http://stesil.altervista.org/evo10/menu-tab/files/jquery-ui-min-1.10.4.js , viene utilizzato per associare degli effetti alle transizioni. Per saperne di più e vedere tutti gli effetti disponibili:
http://jqueryui.com/effect/I numeri in rosso presenti nello script sono contenuti negli id degli oggetti utilizzati (vedi punto 2).
L'ultimo file js collegato, relativo a quattro tab, è scaricabile qui:
http://stesil.altervista.org/evo10/menu-tab/files/menu_tab_4.js4. L'oggetto HTML<div id="tabs">
<a href="#tab5" onclick="menuTab('5'); return false;" class="hover_tab">Tab 1</a>
<a href="#tab6" onclick="menuTab('6'); return false;" >Tab 2</a>
<a href="#tab7" onclick="menuTab('7'); return false;" >Tab 3</a>
<a href="#tab8" onclick="menuTab('8'); return false;" >Tab 4</a>
</div>
In rosso sempre i valori contenuti negli id delle celle, da personalizzare.
Nella scheda esperto scriviamo il codice CSS che formatta le linguette, da personalizzare a piacere:
Only registered users can see contents. Please click here to Register or Login.Sempre nella scheda esperto, file allegati al codice, alleghiamo, nella cartella files, i due file js scaricati precedentemente.
Se vogliamo inserire più o meno tab dobbiamo modificare i codici HTML e JavaScript. Qui il file js relativo a tre tab:
http://lemonsong.altervista.org/test_menu_tab/files/menu_tab_3.js Ovviamente occorre modificare anche lo script in head:
<script src='files/jquery-ui-min-1.10.4.js'></script>
<script>
var cellV = 'imCell_5'; // numero cella oggetto visibile
var cellH1 = 'imCell_14'; // numero cella oggetto nascosto
var cellH2 = 'imCell_13'; // numero cella oggetto nascosto
var fxUI = 'slide'; // effetto UI (consigliati: blind, fade, slide)
</script>
<script src='files/menu_tab_3.js'></script>
e il codice contenuto nell'oggetto HTML
<div id="tabs">
<a href="#tab5" onclick="menuTab('5'); return false;" class="hover_tab">Testo</a>
<a href="#tab14" onclick="menuTab('14'); return false;">Tabella</a>
<a href="#tab13" onclick="menuTab('13'); return false;">Galleria</a>
</div>
I test sono stati effettuati con la versione
10.1.10.54 e ovviamente non con tutte le possibili combinazioni di disposizione di oggetti all'interno della pagina.
