Benvenuto su Oceano Risorse per Webmasters
Modules
· Home
· Argomenti
· Backgrounds
· Banners
· Colorhex
· Downloads
· Fonts
· Gallery
· Gif Animate
· Javascripts
· Manuali
· Recommend Us
· Themes
· Wallpapers
· Web Links
Gallery



Partners
Hosting gratuito

Open Source software development website

HTML.it - il portale italiano sul web publishing

Gratis.it

Dynamic Drive - DHTML code library

BOORP - archivio di risorse gratuite
Shinystat
 
Javascript Espandi Comprimi Paragrafo
Postato da webmaster il Tuesday, 07 March @ 07:00:00 CET
Contributo di webmaster

Questo script consente di inserire una gran quantità di informazioni all'interno di una pagina, pur avendo uno spazio limitato a disposizione. La funzione che svolge è quella di nascondere le informazioni aggiuntive, visualizzandole solo se viene cliccato un bottone.

Lo script si rivela di grande utilità, per esempio, se si vogliono inserire delle FAQs, mostrando solo le domande e visualizzando le risposte nello spazio sottostante, solo se si clicca sulla domanda.

I fogli di stile ed il codice javascript che gestisce l'evento vanno inseriti fra i tags <head> del documento.

<style>
input.button {
color: #fff; background: #0034D0;
font-size: .8em;
font-weight:bold;
font-family: Verdana, Arial, Helvetica, sans-serif;
border: solid 1px #ffcf31;
}
</style>
<script language="javascript">
function toggleMe(a){
var e=document.getElementById(a);
if(!e)return true;
if(e.style.display=="none"){
e.style.display="block"
} else {
e.style.display="none"
}
return true;
}
</script>

Vediamo un esempio di utilizzo della funzione all'interno del <body> di un documento.

Clicca il bottone seguente per visualizzare la risposta. Clicca di nuovo per chiudere la sezione.

<input type="button" class="button" onclick="return toggleMe('para1')" value="1° esempio">
<div id="para1" style="display:none">
Testo aggiuntivo del primo esempio.
</div>
<input type="button" class="button" onclick="return toggleMe('para2')" value="2° esempio">
<br>
<div id="para2" style="display:none">
Testo aggiuntivo del secondo esempio.
</div>

Come si può vedere nell'esempio, il testo del bottone deve essere definito all'interno del campo value, mentre il testo aggiuntivo relativo va inserito all'interno del tag <div>. Il parametro identificativo che collega il bottone al testo viene definito nell'istruzione return che richiama la funzione toggleMe e nell'id del tag <div> in cui è inserito il testo.

Se ad esempio volessimo aggiungere un terzo bottone il codice html che dovremmo usare sarebbe:

<input type="button" class="button" onclick="return toggleMe('para3')" value="3° esempio">

<div id="para3" style="display:none">
Testo aggiuntivo del terzo esempio.
</div> dove para3 è il parametro identificativo di collegamento tra il bottone e il <div>.

Non c'è limite al numero dei commenti da poter inserire, basterà fare attenzione ad usare una numerazione progressiva per quanto riguarda i valori degli id.


 
Links Correlati
· Indice Javascript
· Inoltre Javascript
· News by webmaster


Articolo più letto relativo a Javascript:
Reload automatico della pagina

Valutazione Articolo
Average Score: 5
Voti: 2


Please take a second and vote for this article:

Eccellente
Molto Buono
Buono
Regolare
Cattivo

Opzioni

 Pagina Stampabile Pagina Stampabile

Associated Topics

Javascript





Questo sito è ospitato gratuitamente da Altervista
Tutti i logos e i marchi presenti in questo sito sono dei loro proprietari.
I commenti sono proprietà  di chi li ha postati, tutto il resto © 2002 by Oceano Risorse per Webmasters
PHP-Nuke Copyright © 2005 by Francisco Burzi. This is free software, and you may redistribute it under the GPL. PHP-Nuke comes with absolutely no warranty, for details, see the license.
Generazione pagina: 0.04 Secondi

Theme by

© Oceanoweb