Expand
Enkelt håndarbeid
Vi begynner med en enkel vevside og to javascript-funkjsoner:
test0.html:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8"/>
<title>Expand</title>
<script type="text/javascript" src="expander0.js"> </script>
</head>
<body>
<h2>Testing expand</h2>
<div>
<div id="handmade-on"
style="cursor:pointer"
onclick="javascript:exp_show('handmade');exp_hide('handmade-on');">
expand
</div>
<div id="handmade" style="display:none">
<div style="cursor:pointer"
onclick="javascript:exp_hide('handmade');exp_show('handmade-on');">
collaps
</div>
Dette kommer og går
</div>
</div>
</body>
</html>
expander0.js:
function exp_show(eltid)
{
var element=document.getElementById(eltid);
element.style.display='block';
}
function exp_hide(eltid)
{
var element=document.getElementById(eltid);
element.style.display='none';
}
Automatikk
Vi ønsker å generalisere, og vi lager en testside med to potensielle ekspansjonselementer. Disse er kalt Nr1 og Nr2. Det er div'ene med class="expand" som skal være ekspanderbare.
test1.html:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8"/>
<title>Expand</title>
<title>expandtest1</title>
<style>
.exp_on,.exp_off
{font-size:24px; color:black;
cursor:pointer; width:20px;
background-color:green}
.exp_off{background-color:red}
</style>
<script type="text/javascript" src="expander.js">
</script>
</head>
<body onload="setTogle()">
<h2>Testing expand</h2>
<h4>Nr1:</h4>
<div class="expand">
<h2>Heisann</h2>
<p>Dette kommer og går</p>
</div>
<h4>Nr2:</h4>
<div class="expand">
<h2>Hallo</h2>
<p>
<img src="bs1.gif" alt="bs1" />
</p>
</div>
<hr/>
<p onclick="alert(body.innerHTML);">
Klikk her for å se modifisert DOM
</p>
</body>
</html>
Vi lage en funksjon som kalle når siden er lastet. Denne funksjonen, setTogle(), går gjennom siden, lokaliserer alle div'er med class="expand", og preparerer, prepareElement(), disse elementene slik at de er klare for ekspansjon og kollaps.
expander.js:
function exp_show(eltid)
{
var element=document.getElementById(eltid);
element.style.display='block';
}
function exp_hide(eltid)
{
var element=document.getElementById(eltid);
element.style.display='none';
}
function prepareElement(hostelement)
{
hostelement.setAttribute('class','expanded');
var r_no = Math.ceil(Math.random()*100);
plussid='pluss'+r_no;
contentid='content'+r_no;
// make expander
plusselt=document.createElement('div');
plusselt.id=plussid;
plusstext=document.createTextNode('+');
plusselt.setAttribute('class','exp_on');
tmp="javascript:exp_hide('"+plussid+"');exp_show('"+contentid+"');"
plusselt.setAttribute("onclick",tmp);
plusselt.appendChild(plusstext);
// make collapser
minuselt=document.createElement('div');
minustext=document.createTextNode('-');
minuselt.setAttribute('class','exp_off');
tmp="javascript:exp_show('"+plussid+"');exp_hide('"+contentid+"');"
minuselt.setAttribute("onclick",tmp);
minuselt.appendChild(minustext);
// make new content
wrapper=document.createElement('div');
wrapper.appendChild(plusselt);
// make the inner content with minus and the original
contentelt=document.createElement('div');
contentelt.id=contentid;
contentelt.appendChild(minuselt);
childs=hostelement.childNodes;
for(ix=0;ix < childs.length; ix++)
contentelt.appendChild(childs[ix].cloneNode(true));
wrapper.appendChild(contentelt);
hostelement.innerHTML=wrapper.innerHTML;
exp_show(plussid);
exp_hide(contentid);
}
function setTogle()
{
var tlist=document.getElementsByTagName('div');
for(ix=tlist.length-1; ix > -1; ix--)
{
var elt=tlist[ix];
if(elt.getAttribute('class') || elt.getAttribute('className'))
{
var v=elt.getAttribute('class');
if(!v)
v=elt.getAttribute('className');
if(v == 'expand')
prepareElement(elt);
}
}
}
WXT
I dette materialet er det brukt en løsning for å vise og skjule deler av en side. Motivasjonen for dette er lik motivasjonen for å bruke popup:
Denne mekanismen er ganske enkel. Den involverte javascriptkoden, sammen med noen andre nyttige funkjsoner som brukes på disse sidene, ser slik ut:
