Meny som öppnar sidor i flera ramar
Vår rullgardinsmeny från avsnittet Ramar och JavaScript 2 kan byggas ut, så att den från sin plats i en ram byter innehåll i ett valfritt antal andra ramar samtidigt.
I kodexemplet nedan finns själva menyn i en egen ram och från denna skall vi kunna byta innehållet i tre andra ramar (nedv, nedm och nedh). Som koden i FORM-taggen är skriven här, kommer menyvalen helt enkelt att flytta innehållet mellan ramarna.
Skriptet innehåller här två funktioner, kollMeny() och laddaRam(). Den första funktionen kommer att anropas från FORM-taggen, medan den andra anropas från den första om besökaren har gjort ett val i menyn.
Den här gången börjar vi med FORM-taggen:
<FORM>
<SELECT name=webbmeny onChange="kollMeny(this.options[this.selectedIndex].value)">
<OPTION value="'','','','','',''">Välj nedan:</OPTION>
<OPTION value="'nedv','flerram5.html', 'nedm','flerram6.html', 'nedh','flerram7.html'">A
+ B + C</OPTION>
<OPTION value="'nedv','flerram5.html', 'nedm','flerram7.html', 'nedh','flerram6.html'">A
+ C + B</OPTION>
<OPTION value="'nedv','flerram6.html', 'nedm','flerram5.html', 'nedh','flerram7.html'">B
+ A + C</OPTION>
<OPTION value="'nedv','flerram6.html', 'nedm','flerram7.html', 'nedh','flerram5.html'">B
+ C + A</OPTION>
<OPTION value="'nedv','flerram7.html', 'nedm','flerram5.html', 'nedh','flerram6.html'">C
+ A + B</OPTION>
<OPTION value="'nedv','flerram7.html', 'nedm','flerram6.html', 'nedh','flerram5.html'">C
+ B + A</OPTION>
</SELECT>
</FORM>
onChange="kollMeny(this.options[this.selectedIndex].value)"
Så länge ingenting förändras i menyn händer ingenting. Men när besökaren gör ett val, kommer den här händelsehanteraren att fånga upp det och anropa funktionen kollMeny(). Dit tar den med sig värdet som finns i "value".
<OPTION VALUE="'','','','','',''">Välj nedan:</OPTION>
Det här är det inledande värdet i menyn. Jag har skrivit det som sex par av enkla citationstecken, för att markera att det är sex tomma strängvärden som händelsehanteraren får med sig. Men i själva verket behövs inte det här långa värdet. Vi kan ändra det till ett enda par enkla citationstecken om vi vill, men motsvarande ändring måste då göras i if-satsen i funktionen kollMeny(valet).
Där tas värdet emot av en if-sats, och eftersom "value" stämmer överens med villkoret i if-satsen, kommer "valet" i funktionen laddaRam(valet) inte att innehålla några värden. Skriptkörningen går igenom funktionen laddaRam() utan att någonting händer.
<OPTION value="'nedv','flerram5.html', ... ">A + B + C</OPTION>
När besökaren väljer något av dessa sex alternativ får "value" i stället sex strängvärden som händelsehanteraren tar med sig till funktionen kollMeny(valet). Då kommer
if-satsen att innehålla sex värden, nämligen i tur och ordning den första ramen, den första sidan, den andra ramen, den andra sidan, den tredje ramen och den tredje sidan. Därmed stämmer inte villkoret i if-satsen, och skriptkörningen går då vidare till nästa funktion, laddaRam(valet).
Sedan skriptet i HEAD:
<SCRIPT LANGUAGE="JavaScript">
<!-- Göm
function kollMeny(valet) {
if (valet != "'','','','','',''")
eval('laddaRam(' + valet + ')');
}
function laddaRam(ram1,sida1,ram2,sida2,ram3,sida3) {
eval("parent."+ram1+".location='"+sida1+"'");
eval("parent."+ram2+".location='"+sida2+"'");
eval("parent."+ram3+".location='"+sida3+"'");
}
// Sluta gömma -->
</SCRIPT>
eval('laddaRam(' + valet + ')');
Det här är en fördefinierad funktion i JavaScript – eval tar innehållet i parentesen och skickar det till motsvarande funktion, i det här fallet laddaRam(). Funktionen laddaRam() får därmed det innehåll som hämtats från anropet i FORM-taggen.
function laddaRam(ram1,sida1,ram2,sida2,ram3,sida3)
Här kommer ram1, sida1 och så vidare att ersättas med värdena från "value".
eval("parent."+ram1+".location='"+sida1+"'");
De tre eval-satserna får sina värden från funktionen. Om besökaren har valt "B + C + A", kommer satserna att lyda:
eval("parent.nedv.location='flerram6.html'");
eval("parent.nedm.location='flerram7.html'");
eval("parent.nedh.location='flerram5.html'");
Den första sidan öppnas i ramen "nedv", den andra i ramen "nedm" och den tredje i ramen "nedh".
© SupportData.Net