Unofficial WebSite X5

Categoria generale => FAQ - HowTo - Tutorials => Topic aperto da: stesil - 24 Giugno, 2014, 22:35:57

Titolo: [v.10] Menu a schede
Inserito da: stesil - 24 Giugno, 2014, 22:35:57

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/ (http://lemonsong.altervista.org/test_menu_tab/index.html)
quattro tab con quattro oggetti testo: http://stesil.altervista.org/evo10/menu-tab/ (http://stesil.altervista.org/evo10/menu-tab/index.html)

1. Disposizione degli oggetti nella griglia della pagina
   
     Struttura pagina con tre tab:

[attach=1]

     
     Struttura pagina con quattro tab:

[attach=2]

   
    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:

    [attach=3]

   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>
   

Citazione

<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 (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/ (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.js (http://stesil.altervista.org/evo10/menu-tab/files/menu_tab_4.js)


4. L'oggetto HTML

Citazione

<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:

Codice:

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  (http://lemonsong.altervista.org/test_menu_tab/files/menu_tab_3.js)

Ovviamente occorre modificare anche lo script in head:

Citazione

<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

Citazione

<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.

Titolo: Re:[v.10] Menu a schede
Inserito da: Zambelletti - 26 Giugno, 2014, 23:57:31

Buon giorno, come sapete sto lavorando proprio ad un progetto del genere.......e come sapete è molto semplice avere delle celle pronte in html e posizionarle dove occorre, ma è ancora più semplice posizionare una casella di testo o di immagine o di gallery, piuttosto che integrare manualmente il codice html in un tab.


Lo provo e vi dico.
intanto complimenti.