• Programmazione » HTML » Dhtml - Tutorial e lezioni per imparare il Dynamic HTML

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.