MediaWiki/Hacking interfaccia: differenze tra le versioni
Contenuto cancellato Contenuto aggiunto
Nessun oggetto della modifica |
+ portlet in js |
||
Riga 37:
Quindi nel caso in cui volessimo aggiungere delle piccole icone al tab "template", dovremo usare il seguente codice CSS:
<source lang=css>
li#ca-nstab-template a {
padding-left: 18px;
background:url( http://Indirizzo_completo/immagine.estensione) top left no-repeat !important;
Riga 85:
{{Vedi anche|JavaScript}}
Una funzione JavaScript molto interessante che mette a disposizione il software è <code>addOnloadHook()</code>, che permette di eseguire una funzione al caricamento della pagina.
<br/>Infatti, senza far ricorso a questa funzione, le istruzioni verrebbero eseguite ''prima'' del caricamento della pagina, senza poter accedere agli e'''lementi del [[w:Document Object Model|DOM]]'''.
In generale, per far eseguire un JavaScript in ogni pagina di MediaWiki, utilizziamo questo codice:
<source lang=javascript>
addOnloadHook( function () {
//le istruzioni inserite qui verranno eseguite al caricamento della pagina
}
);
</source>
Questa istruzione va inserita nel proprio Monobook.js (per creare un JavaScript personale) oppure nel suo omologo nel namespace MediaWiki (per far eseguire lo script in ogni pagina della wiki).
<br/>Ovviamente è possibile inserire nel monobook delle funzioni, ma queste devono essere comunque eseguite tramite l'''hook''.
== Creare un porlet personalizzato ==
Muovendosi tra gli oggetti del DOM, possibile creare, modificare o eliminare gli oggetti nella pagina; per esempio è possibile creare un menu personale nella barra laterale, partendo da quelli già esistenti:
<source lang=javascript>
//tratto da [[User:Ramac/monobook.js]]
var barra = document.getElementById('p-navigation').parentNode; //ottiene un riferimento alla barra laterale
var com = document.getElementById('p-community'); //ottiene un rifermento alla sezione comunità (solo per it.books,
// per altre wiki è necessario ottenere l'ID degli altri portlet)
//crea i nuovi elementi e imposta gli attributi
var mieiLink = document.createElement('DIV'); //div che contiene tutto il nuovo portlet
var titolo = document.createElement('H5'); //intestazione del portlet
var divBody = document.createElement('DIV'); //corpo del portlet
var ul = document.createElement('UL'); //crea un elenco puntato dentro il quale saranno inseriti i link
mieiLink.setAttribute("class","portlet"); //necessario per la visualizzazione
mieiLink.setAttribute("id","p-myLinks");
divBody.setAttribute("class","pBody");
var textTitolo = document.createTextNode("I miei link"); //titolo del portlet
titolo.appendChild(textTitolo); //inserisce il testo nel tag <h5>
//inserirsce gli elementi della pagina
divBody.appendChild(ul);
mieiLink.appendChild(titolo);
mieiLink.appendChild(divBody);
//inserisce infine il div nella barra laterale prima del portlet comunità
barra.insertBefore(mieiLink, com);
</source>
In questo modo è stato creato un nuovo box nella barra laterale (come "navigazione" o "ricerca" pronto a contenere i nostri link o i nostri oggetto HTML. Sarà sufficiente infatti creare un nuovo oggetto DOM e poi "appenderlo" all'elemento <ul> memorizzato nella variabile <code>ul</code>. Il codice seguente inserisce nel porlet appena creato un link al libro "[[JavaScript]]" su it.wikibooks:
<source lang=javascript
var l = document.createElement('LI'); //crea un punto elenco
l.setAttribute('id','l-javascript'); //imposta un ID, non si sa mai, può servire
//crea il link e ne imposta gli attributi
var link = document.createElement('A');
link.setAttribute('href', '/wiki/JavaScript');
link.setAttribute('title', 'Accedi al libro sul JavaScript');
//crea il testo per il link e lo aggiunge ad esso
var text = document.createTextNode('JavaScript');
link.appendChild(text);
//"appende" (inserisce) prima il link al punto elenco e poi questo all'elenco puntato
l.appendChild(link);
ul.appendChild(l);
</source>
{{avanzamento|50%}}
| |||