Differenze tra le versioni di "MediaWiki/Hacking interfaccia"

Jump to navigation Jump to search
m
Update syntaxhighlight tags - remove use of deprecated <source> tags
(ortografia)
m (Update syntaxhighlight tags - remove use of deprecated <source> tags)
 
=== Un semplice esempio: inserire delle iconcine alle tab ===
Premendo ''Ctrl+U'' e cercando con lo strumento apposito di FireFox (''Ctrl+F'') il titolo della pagina, veniamo rimandati ad una porzione di codice, per riconoscere i tab, basta cercare delle parole chiave, ad esempio "template", dopo varie ricerche, vedremo del codice come quello nell'esempio qui sotto:
<sourcesyntaxhighlight lang=html4strict>
<li id="ca-nstab-template" class="selected">
<a href="/wiki/Template:MediaWiki" title="Vedi il template [c]" accesskey="c">Template</a>
</li>
</syntaxhighlight>
</source>
 
Sono tre righe di semplice HTML, ma in alcune possiamo trovare alcuni elementi a noi molto utili:
 
Quindi nel caso in cui volessimo aggiungere delle piccole icone al tab "template", dovremo usare il seguente codice CSS:
<sourcesyntaxhighlight lang=css>
li#ca-nstab-template a {
padding-left: 18px;
background:url( http://Indirizzo_completo/immagine.estensione) top left no-repeat !important;
}
</syntaxhighlight>
</source>
Questa dichiarazione CSS serve per inserire un'iconcina accanto al testo della tab "template". In particolare:
* <code>li#ca-nstab-template a</code>: questa parte del codice (selettore) serve a CSS per identificare l'elemento o gli elementi della pagina a cui applicare le dichiarazioni inserite tra le parentesi graffe: in questo caso, indichiamo di prendere tutti gli elementi <code>&lt;a&gt;</code> contenuti nell'elemento <code>&lt;li&gt;</code> che presenta l'ID <code>ca-nstab-template</code>, cioè la tab del namespace "template".
=== Notifica nuova messaggi ===
Quando un utente riceve nuovi messaggi, MediaWiki mostra un messaggio di avviso. La notifica può essere personalizzata in quanto è identificata dalla classe <code>usermessage</code>. Ad esempio:
<sourcesyntaxhighlight lang=css>
.usermessage { /* imposta uno sfondo blu */
background: blue;
color: red;
}
</syntaxhighlight>
</source>
 
=== Table of Content ===
La tabella dei contenuti (o "TOC") non è altro che una tabella HTML con id #toc. Possiamo ad esempio lavorare sullo span .tocnumber nascondendolo:
<sourcesyntaxhighlight lang=css>
#toc .tocnumber {
display: none; /* nasconde l'elemento */
}
</syntaxhighlight>
</source>
In particolare, questa dichiarazione nasconde i numeri accanto ai titoli nel TOC
 
 
In generale, per far eseguire un JavaScript in ogni pagina di MediaWiki, utilizziamo questo codice:
<sourcesyntaxhighlight lang=javascript>
addOnloadHook( function () {
//le istruzioni inserite qui verranno eseguite al caricamento della pagina
}
);
</syntaxhighlight>
</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).
=== Creare un portlet 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 (portlet), partendo da quelli già esistenti:
<sourcesyntaxhighlight lang=javascript>
//tratto da [[User:Ramac/monobook.js]]
var barra = document.getElementById('p-navigation').parentNode; //ottiene un riferimento alla barra laterale
//inserisce infine il div nella barra laterale prima del portlet comunità
barra.insertBefore(mieiLink, com);
</syntaxhighlight>
</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 [[w:HTML|HTML]]. Sarà sufficiente infatti creare un nuovo oggetto DOM e poi "appenderlo" all'elemento &lt;ul&gt; memorizzato nella variabile <code>ul</code>. Il codice seguente inserisce nel porlet appena creato un link:
<sourcesyntaxhighlight lang=javascript>
var l = document.createElement('LI'); //crea un punto elenco
l.setAttribute('id','l-miolink'); //imposta un ID, non si sa mai, può servire
l.appendChild(link);
ul.appendChild(l);
</syntaxhighlight>
</source>
Ovviamente non è possibile inserire solo link; è possibile anche inserire moduli ad esempio per creare un box di ricerca personalizzato, o qualsiasi altro elemento XHTML.
 
=== Aggiungere eventi agli oggetti della pagina ===
Per motivi di sicurezza e di comodità, è impossibile aggiungere script JavaScript all'interno delle pagine wiki tramite l'uso del tag &lt;script&gt; o gli eventi associati agli oggetti (utilizzando ad esempio gli attributi <code>onclick</code> o <code>onmousemove</code>. L'unico modo per poter aggiungere questi ''hook'' è tramite gli script personali o di sistema:
<sourcesyntaxhighlight lang=javascript>
//per comodità definiamo una funzione
//la useremo per gestire l'evento click
}
);
</syntaxhighlight>
</source>
In generale, per collegare un evento ad un oggetto della pagina, è sufficiente accedervi tramite il DOM e poi impostare correttamente la proprietà relativa all'evento da collegare.
 
266

contributi

Menu di navigazione