|
|
Amo lottare, le cose facili non fanno per me!
 - Group:
- NB Onorary
- Posts:
- 43,412
- Location:
- Tra palco e realtà!
- Status:
| |
| Inserire e modificare una tabella JQuery nel forumNella guida è spiegato come inserire in un nostro forum una tabella JQuery e modificare l'aspetto per personalizzarla al meglio. Eccovi un esempio pratico: Forum con tabella JQuery. * Se siamo interessati ad avere più informazioni su questo genere di tabella, possiamo usare wikipedia.Istallazione tabella JQuery Scarichiamo il file .zip e spostiamo il contenuto sul nostro pc usando la voce extract. Il File compresso contiene: CITAZIONE - jtabber: Il file contiene la base della tabella;
- jquery: Il file contiene l'effetto slide nella tabella;
- readme: Credit dello script che usiamo per la nostra tabella JQuery (www.boedesign.com);
- index: Il file che contiene lo style e tag di base per la nostra tabella;
Ora bisogna caricare i file su un nostro servizio che ti permetti di creare uno spazio web e hostare i file, è possibile usare Altervista o Digiland libero. Una volta terminato hosting inseriamo la tabella tramite un tag iframe: HTML <iframe src="LinkSpazioweb" width="900" marginwidth="0" height="200" marginheight="0" align="middle" scrolling="no" frameborder="0"></iframe> Cambiamo LinkSpazioweb con il nostro URL, nel nostro caso è http://scorpy87.altervista.org/Provatabnew. Modifica contenuti tabella: HTML <div id="nav">
<a href="#" title="Prova1">#1</a>
<a href="#" title="Prova2">#2</a>
<a href="#" title="Prova3">#3</a>
<div class="clear"></div>
</div> Questo tag HTML identica il nome del menù a linguette della nostra tabella. HTML <div id="Prova1" class="hiddencontent">
Prova - > Prova <br><br>
<a href="#">Prova LINK</a>.<br>
</div>
<div id="Prova2" class="hiddencontent">
<a href="#">Prova</a>.<br>
<br><br><br><br><br>
</div>
<div id="Prova3" class="hiddencontent">
TEsto #3
</div>
</div> Questo tag HTML identica contenuti delle relative linguette. NB: gli id dei contenuti ed i title delle linguette devono corrispondere.Modifica stile tabella JQuery Style completo che troviamo in cima al index.htmlHTML <style type="text/css">
* {
margin:0;
padding:0;
}
body {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
color:#434343;
background:#E2E0E0;
}
#wrap {
margin:20px auto;
width:850px;
}
#nav a, #nav a:active, #nav a:visited {
display:block;
float:left;
padding:5px 8px;
background:#51A9BA;
font-weight: bold;
color:#fff;
margin-right:10px;
text-decoration:none;
outline:none;
}
#nav a.selected, #nav a:hover, #nav a.selected:active, #nav a.selected:visited {
display:block;
float:left;
padding:5px 8px;
background:#F0F0F0;
font-weight: bold;
color:#434343;
margin-right:10px;
text-decoration:none;
outline:none;
}
.hiddencontent,.hiddencontent2 {
padding:12px;
background:#F0F0F0;
display:none;
}
.clear {
clear:both;
}
h1 {
color:#1C6373;
padding:20px 0;
}
</style>
In questa dichiarazione si modifica lo stile del menù a linguette al passaggio del mouse (#1;#2#3);.hiddencontent,.hiddencontent2: Qui possiamo modificare l'aspetto della nostra tabella;Nell'index.html è presente anche il javascript della tabella JQuery (E' spiegato nel javascript cosa si va a modificare e come modificarlo).CODICE <script type="text/javascript"> $(document).ready(function(){ $.jtabber({ mainLinkTag: "#nav a", // simile ad un selettore css, viene richiamato dal <div>. activeLinkClass: "selected", // la classe che si riferisce alle linguette, quando ci si clicca sopra. hiddenContentClass: "hiddencontent", // la classe del contenuto delle linguette. showDefaultTab: 1, // 1 aprirà la prima linguetta, 2 la seconda, e cosi via.. null visualizzerà unicamente le linguette. showErrors: true, // true/false - da scegliersi in base alla volontà di far mostrare gli errori oppure no. effect: 'slide', // null, 'slide' oppure 'fade' - sono gli effetti, potete scegliere tra effetto nullo, effetto scorrimento (slide) effectSpeed: 'fast' // 'slow', 'medium' oppure 'fast' - impostano la velocità degli effetti. }) }) </script> Guida creata da Scorpy87 per il Newsboard - Credit script Boedesign.
Si ringraziano Lorenzo Niccolo` e Fluid Cocaine per i suggerimenti dati. Edited by Kakashi - 12/10/2010, 00:35 |
| | |
