Michele Basso
a- a+

Descrizioni 'espansibili' su voci di menų

Con questo script DHTML è possibile creare dei box estensibili, associati a delle voci testuali(ad esempio le voci di un menù). Ottimo per inserire descrizioni brevi, banner o link.

Lo script è compatibile con IE5 o superiori e NS6 o superiori.

L'utilizzo è molto semplice, iniziamo copiando questo codice all'interno del tag head:

<script type="text/">

/***********************************************
* Switch Content script- © Dynamic Drive (www.dynamicdrive.com)
* This notice must stay intact for legal use. Last updated Oct 21st, 2003.
* Visit http://www.dynamicdrive.com/ for full source code
***********************************************/

var enablepersist="on" //Enable saving state of content structure using session cookies? (on/off)
var collapseprevious="yes" //Collapse previously open content when opening present? (yes/no)

if (document.getElementById){
document.write('<style type="text/css">')
document.write('.switchcontent{display:none;}')
document.write('</style>')
}

function getElementbyClass(classname){
ccollect=new Array()
var inc=0
var alltags=document.all? document.all : document.getElementsByTagName("*")
for (i=0; i<alltags.length; i++){
if (alltags[i].className==classname)
ccollect[inc++]=alltags[i]
}
}

function contractcontent(omit){
var inc=0
while (ccollect[inc]){
if (ccollect[inc].id!=omit)
ccollect[inc].style.display="none"
inc++
}
}

function expandcontent(cid){
if (typeof ccollect!="undefined"){
if (collapseprevious=="yes")
contractcontent(cid)
document.getElementById(cid).style.display=(document.getElementById(cid).style.display!="block")? "block" : "none"
}
}

function revivecontent(){
contractcontent("omitnothing")
selectedItem=getselectedItem()
selectedComponents=selectedItem.split("|")
for (i=0; i<selectedComponents.length-1; i++)
document.getElementById(selectedComponents[i]).style.display="block"
}

function get_cookie(Name) { 
var search = Name + "="
var returnvalue = "";
if (document.cookie.length > 0) {
offset = document.cookie.indexOf(search)
if (offset != -1) { 
offset += search.length
end = document.cookie.indexOf(";" , offset);
if (end == -1) end = document.cookie.length;
returnvalue=unescape(document.cookie.substring(offset, end))
}
}
return returnvalue;
}

function getselectedItem(){
if (get_cookie(window.location.pathname) != ""){
selectedItem=get_cookie(window.location.pathname)
return selectedItem
}
else
return ""
}

function saveswitchstate(){
var inc=0, selectedItem=""
while (ccollect[inc]){
if (ccollect[inc].style.display=="block")
selectedItem+=ccollect[inc].id+ "|"
inc++
}

document.cookie=window.location.pathname+ "=" +selectedItem
}

function do_onload(){
getElementbyClass("switchcontent")
if (enablepersist=="on" && typeof ccollect!="undefined")
revivecontent()
}


if (window.addEventListener)
window.addEventListener("load" , do_onload, false)
else if (window.attachEvent)
window.attachEvent("onload" , do_onload)
else if (document.getElementById)
window.onload=do_onload

if (enablepersist=="on" && document.getElementById)
window.onunload=saveswitchstate

</script>

Adesso, copia questo codice nel punto in cui vuoi che appaiano le voci con le descrizioni:

<h3 onClick="expandcontent('sc1')" style="cursor:hand; cursor:pointer">What is ?</h3>
<div id="sc1" class="switchcontent">
JavaScript is a scripting language originally developed by Netscape to add interactivity and power to  documents. It is purely client side, and runs completely on the client's browser and computer.
</div>

<h3 onClick="expandcontent('sc2')" style="cursor:hand; cursor:pointer">Difference betwen Java & JavaScript?</h3>
<div id="sc2" class="switchcontent">
Java is completely different from JavaScript- the former is a compiled language while the later is a scripting language.
</div>

<h3 onClick="expandcontent('sc3')" style="cursor:hand; cursor:pointer">What is DHTML?</h3>
<div id="sc3" class="switchcontent">
DHTML is the embodiment of a combination of technologies- JavaScript, CSS, and HTML. Through them a new level of interactivity is possible for the end user experience.
</div>

Adesso vediamo come lavora il codice che abbiamo appena copiato.

Questa è la prima parte:

<h3 onClick="expandcontent('sc1')" style="cursor:hand; cursor:pointer"> What is JavaScript?</h3>

Con questa porzione di codice apriremo i box con le descrizioni. La parte in rosso è l'unica che va modificata, ed è quella che richiama il box corrispondente(in questo caso sc1 richiama il primo box).

La seconda parte di codice è questa, e definisce il contenuto dei box:

<div id="sc1" class="switchcontent"> JavaScript is a scripting language originally developed by Netscape..... </div>

Anche in questo caso notiamo la scritta sc1, che è associata alla porzione di codice precedente.

Per problemi nell'utilizzo dello script, potete consultare il nostro forum di discussione.

 



Ti potrebbe interessare anche

commenta la notizia

C'č 1 commento
Marcello
Ti č piaciuto l'articolo?