Michele Basso
a- a+

Descrizioni 'espansibili' su voci di menų

Con questo script DHTML è possibile creare dei boxestensibili, associati a delle voci testuali(ad esempio levoci di un menù). Ottimo per inserire descrizionibrevi, banner o link.

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

L'utilizzo è molto semplice, iniziamo copiandoquesto 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=0var 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=0while (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.lengthend = 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}elsereturn ""}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_onloadif (enablepersist=="on" && document.getElementById)window.onunload=saveswitchstate</script>

Adesso, copia questo codice nel punto in cui vuoi cheappaiano 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 appenacopiato.

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 ledescrizioni. La parte in rosso è l'unica che vamodificata, ed è quella che richiama il boxcorrispondente(in questo caso sc1 richiama il primobox).

La seconda parte di codice è questa, e definisce ilcontenuto 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, poteteconsultare il nostro forum didiscussione.

 



Ti potrebbe interessare anche

commenta la notizia