CIO Tech Eksperten IT-JOB IT-Kurser Events Podcast Søg

Log ind eller opret profil

Du kan også logge ind via nedenstående tjenester

davidchristensen Praktikant

14. april 2004 - 16:40 Der er 12 kommentarer og
1 løsning

XML, XSL, CSS og måske noget JavaScript til en menu

Lige et spørgsmål mere..

Jeg har lavet en menu via xml/xsl. Nu vil jeg gerne have at når man klikker på et menupunkt, så skifter dette punkt style, f.eks teksten bliver hvid.

Hvordan laver man dette client-sidet på den bedst mulige måde?

David
-

Synes godt om

nute Nybegynder

14. april 2004 - 17:09 #1

hvad skal der ske når du klikker på menupunktet ? skifter siden ? skal det bare skifte farve ? er det noget ála dette du mener:

http://xperimentum.com/xperten/solutions/asp/faneblade.asp

/nute

Synes godt om

davidchristensen Praktikant

14. april 2004 - 19:05 #2

Hey Nute.. Ja det er noget i stil med detder.. og ja, siden skal skifte - det tror jeg godt jeg véd hvordan man skal gøre.. Men ihvertfald skal styl'en på det link man trykker på skifte, så man kan se hvilken side man er på..

David
-

Synes godt om

davidchristensen Praktikant

14. april 2004 - 19:08 #3

Altså man har en xml-fil der indeholder menuen, så har man en xsl-fil der generer den - og i den skal der vel være noget der kan afgøre om man har trykket på et link og dermed ændre på stylen af det link man har trykket på..

Egentlig er det ret basalt.. :)

David
-

Synes godt om

nute Nybegynder

15. april 2004 - 09:49 #4

hvis siden skal skifte ... hvorfor vil du så gøre det client-side ?

I øvrigt så er xml/xsl transformationer stadig bedre at lave serverside, hvis denne type effekt skal opnås. For det første, så er det ikke alle browsere der understøtter xsl (http://www.w3schools.com/xsl/xsl_browsers.asp) og der er stadig en del der har javascript slået fra (8% i januar 2004 iflg http://www.w3schools.com/browsers/browsers_stats.asp).

/nute

Synes godt om

davidchristensen Praktikant

15. april 2004 - 13:09 #5

Jeg ville bare rigtig gerne slippe for serversidet styring, men istedet gøre det hos klienten..

Nu er første skridt lige at lave sådan et script der kan ændre farven på et link når man er på siden linket fører til (og man kunne jo bare lave det som a:active, men det er mere princippet i hvordan man kan deffinere en variabel og xsl transformerer så alt efter denne variabel)

Det kunne på samme måde være godt hvis man kan lave et javascript der kan indsætte nye noder i en xml-fil.

Og grunden til at det ikke skal være serversidet, handler lidt om konsistens.. Det varer ikke længe før alle browsere kan transformerer xsl.. og dem der slår javascript fra, de er bare dumme.. :)

Synes godt om

nute Nybegynder

15. april 2004 - 13:47 #6

hvis du har 100% kontrol over klienterne, så er det jo ikke så forfærdelig ... jeg ville stadig holde mig til serverside. du kan jo gøre noget ála dette:

*********
menu.xml
*********
<?xml version="1.0" encoding="UTF-16"?>
<menu>
<item>Menu 1</item>
<item>Menu 2</item>
<item>Menu 3</item>
</menu>

**********
menu.xsl
**********
<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:fo="http://www.w3.org/1999/XSL/Format">
<xsl:template match="/">
<html>
<head>
<title/>
<style type="text/css">
.inactive
{
background-color:red;
}
.active
{
background-color:green;
}
</style>
<script language="JavaScript" type="text/javascript">
<xsl:comment>
<![CDATA[
var strPage = null;
var strQueryString = document.location.search.substring(1);
function setPage()
{
if( strQueryString.length > 0 )
{
var arrParams = strQueryString.split( "&" );

for( i = 0; i < arrParams.length; i++ )
{
if( arrParams[ i ].toLowerCase().indexOf( "page" ) > -1 )
{
strPage = arrParams[ i ].split( "=" )[1];
break;
}
}
}
else
{
strPage = 1;
}
if( strPage )
{
var objTD = document.getElementById( "td" + strPage );
if( objTD )
{
objTD.style.className = "active";
}
}
}
window.onload = setPage;
]]>
</xsl:comment>
</script>
</head>
<body>
<table>
<tr>
<xsl:apply-templates/>
</tr>
</table>

</body>
</html>
</xsl:template>
<xsl:template match="item">
<td>
<xsl:attribute name="id">td<xsl:value-of select="position()"/></xsl:attribute>
<xsl:attribute name="class">inactive</xsl:attribute>
<a>
<xsl:attribute name="href">?page=<xsl:value-of select="position()"/></xsl:attribute>
<xsl:value-of select="." />
</a>
</td>
</xsl:template>
</xsl:stylesheet>

/nute

Synes godt om

davidchristensen Praktikant

17. april 2004 - 16:22 #7

hey nute

jeg har først lige nu set på det.. det ser jo..indviklet ud. Jeg tror lige jeg skal sætte mig ned og gennemgå det grundigt her.

Men mange tak du! :)

-og smid et svar

David
-

Synes godt om

davidchristensen Praktikant

17. april 2004 - 16:48 #8

Hvis du har tid, må du gerne lige uddybe hvad der sker her:

<xsl:template match="item">
<td>
<xsl:attribute name="id">td<xsl:value-of select="position()"/></xsl:attribute>
<xsl:attribute name="class">inactive</xsl:attribute>
<a>
<xsl:attribute name="href">?page=<xsl:value-of select="position()"/></xsl:attribute>
<xsl:value-of select="." />
</a>
</td>
</xsl:template>

Synes godt om

davidchristensen Praktikant

17. april 2004 - 16:50 #9

..f.eks position(), hvad er det? Og i href er der indsat ?page= - hvad er det forn'en?

:)

Synes godt om

nute Nybegynder

17. april 2004 - 17:02 #10

du skal ikke give points, med mindre du er fornøjd med forslaget ;o]

Det der sker, er at jeg laver nogle tabelceller, for hvert menu punkt. for at kunne lægge en unik id på disse celler, så skriver jeg:

<xsl:attribute name="id">td<xsl:value-of select="position()"/></xsl:attribute>

Denne linie gør, at jeg lægger et 'id' attribut på min <td>, hvor værdien er 'td' og derefter et tal, som bliver sat ind med 'position()'

position() er en xslt funktion, der returnerer hvilken node man står på, af en række af noder. Dvs at ved den første <item> node, så vil 'position()' returnere 1, ved den anden <item> node, så vil 'position()' returnere 2 osv.

Derefter skriver jeg:

<xsl:attribute name="class">inactive</xsl:attribute>

hvor jeg simpelthen sætter en css-class på min <td>. I udgangspunktet, så er alle td'er inaktive, dvs ikke valgt (jeg forklarer lidt mere om dette om lidt).

derefter skriver jeg:

<a>
<xsl:attribute name="href">?page=<xsl:value-of select="position()"/></xsl:attribute>
<xsl:value-of select="." />
</a>

Dette er selve linket der gør det muligt at skifte mellem fanerne. de to sidste stumper kode, skal ses i sammenhæng med javascriptet jeg inkluderer på siden.

Javascriptet fungerer på den måde at jeg kigger på querystringen for at finde ud af hvilken side jeg "står på". Når jeg har fundet ud af dette (ved at kigge på værdien af parameteret "page"), så hiver jeg fat i den <td> der representerer den side jeg står på. Hvis fx min querystring indeholder "page=2", så betyder det at jeg skal lade den <td>, der representerer side 2 (hvilket har id'et "td2"), få en anden farve. Det gøres i disse linier kode:

var objTD = document.getElementById( "td" + strPage );
if( objTD )
{
objTD.style.className = "active";
}

håber dette var en forklaring du kunne bruge til noget :o]

/nute

Synes godt om

davidchristensen Praktikant

26. juni 2004 - 14:32 #11

Smider du ik lige et svar? :)

Synes godt om

nute Nybegynder

28. juni 2004 - 09:54 #12

svar

Synes godt om

davidchristensen Praktikant

21. marts 2005 - 03:42 #13

Nu har jeg endelig fået afprøvet det (det tog kun et halvt år ;) - og det virker! Men der er et helt nyt problem nu: IE, med XP servicepack 2 - den blokere for scripts der bliver eksekveret, så det dur ikke rigtig..

Men anyway.. Hvordan får jeg så loadet xml ind en tabel under fanebladene? altså, hvordan deffinere jeg hvilken og xml er relativ til ?page ?

Synes godt om

Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Følg dette spørgsmål

Opret Preview

Programmeringssprog kurser

Kurser inden for grundlæggende programmering

Se alle Programmeringssprog kurser

Flere spørgsmål fra XML & XSLT kategorien

Titel	Indlæg	Oprettet	Seneste aktivitet
Gyldig XML? Af jpi i XML & XSLT	8	13/03/202314:56	14/03/202316:28
håber nogen kan hjælpe Af offenbach1 i XML & XSLT	4	01/02/202310:27	01/02/202314:13
Hvordan skal der svares på dette telegram Af scb i XML & XSLT	0	03/03/202121:25	-
ZIP > XML > HTML Af kodak i XML & XSLT	2	07/03/202001:19	07/03/202010:41
Skjule forretningslogik Af ABCit i XML & XSLT	1	24/01/202012:54	25/01/202017:43

Se alle spørgsmål i kategorien Opret spørgsmål

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester

Alle kategorier på Eksperten

Seneste artiklerRSS