Il nostro esempio tramite un semplice modulo Text/HTML inserito nella nostra pagina, e con poche righe di codice HTML e JavaScript sarà in grado di mostrarci un link nella pagina e di visualizzare un messaggio personalizzato tramite una chiamata jQuery.
Premessa
Per questo primo esempio di utilizzo abbiamo pensato di creare un semplicissimo script che non implica alcuna conoscenza a livello di programmazione ma soltanto una semplice conoscenza di HTML ed ovviamente una basilare conoscenza di JavaScript e di jQuery. Ovviamente dobbiamo essere in grado di utilizzare basilarmente DotNetNuke ed avere la capacità di aggiungere un modulo Text/HTML alla nostra pagina.
Iniziamo
Apriamo il nostro portale DotNetNuke, creiamo una nuova pagina e aggiungiamo un modulo Text/HTML alla stessa. Una volta aggiunto il modulo Text/HTML entriamo in modalità di editing del testo e poi passiamo nella modalità HTML del nostro editor di testo. Ora incolliamo il seguente codice nel nostro editor.
1: <div id="Message" style="border-right: rgb(204,204,204) 1px solid; padding-right: 3px; border-top: rgb(204,204,204) 1px solid; display: none; padding-left: 3px; padding-bottom: 3px; border-left: rgb(204,204,204) 1px solid; padding-top: 3px; border-bottom: rgb(204,204,204) 1px solid; text-align: center">THIS IS A TEST MESSAGE!!div>
2: <p>
3: <a id="linkHello" href="#">Cliccami per visualizzare/nascondere il messaggioa>
4: <script language="JavaScript"> 1: $(document).ready(function() {
2: $("#linkHello").click(function() {
3: $("#Message").toggle(); });
4: });
script>
5: p>
Usciamo dalla modalità HTML, salviamo e proviamo il codice che abbiamo appena scritto.
Se tutto è andato a buon fine (crediamo proprio di si, dato che il supporto a jQuery è abilitato di default in DotNetNuke 5.0.0) cliccando sul link che è apparso nel nostro Text/HTML faremo apparire e scomparire il div che contiene il nostro messaggio.
E' il momento delle spiegazioni
Il codice che abbiamo presentato sopra è davvero semplice. E per comprenderlo ci vogliono davvero poche righe di spiegazione.
Prima di tutto abbiamo creato un semplice div, stilizzato tramite alcune semplici regole CSS di cui la più importante (se così possiamo dire) è la dichiarazione display:hidden; che indica al nostro piccolo div di rimanere nascosto e completamente invisibile.
Abbiamo poi aggiunto un semplicissimo link html che ci servirà per attivare il nostro script jQuery.
Ora passiamo alla parte importante, il cuore del nostro esempio, lo script. Partendo dalla riga
1: $(document).ready(function() {
che richiama una funzione specifica di jQuery tramite la quale lo script attende fino al completo caricamento della pagina prima di essere avviato. In questa pagina trovate maggiori informazioni in merito.
1: $("#linkHello").click(function() {
Con la linea precedente diciamo a jQuery di cercare nella pagina un elemnto con id "linkhello" ed una volta trovato gli aggiunge una funzione con il seguente corpo:
1: $("#Message").toggle();
Infine quest'ultima linea indica a jQuery di trovare un elemento il cui id sia "Message" e gli applica la funzione core di jQuery toggle.
La funzione toggle di jQuery non fa altro che far apparire/sparire il nostro div che ha l'id "Message". Per far questo non fa altro che cambiare al volo la proprietà hidden del nostro div. Se è visibile tale proprietà è impostata a block, se è invisibile tale proprietà sara impostata a hidden.
Conclusioni
Come vi abbiamo mostrato è davvero semplice applicare semplici effetti jQuery in pagine DotNetNuke. Basta un pò di fantasia, e di studio di jQuery per creare pagine davvero accattivanti!
Per qualsiasi problema/dubbio/suggerimento/qualsiasi altra cosa inerente questo post, jQuery e DotNetNuke non fatevi scrupolo a chiedere nei commenti a questo post.
Grazie a tutti per l'attenzione.