Avatar billede kimlarsen1978 Nybegynder
12. november 2007 - 22:29 Der er 21 kommentarer og
1 løsning

Skift indhold via "tabs" uden reload

Hejsa
Jeg har set noget smart flere steder, som jeg gerne vil høre om nogle kan give mig opskriften/koden på...

Bl.a. andet har jeg set det på http://www.nyhederne.tv2.dk. Prøv at åbne siden og rul ned i bunden, der er der en række tabs: Alle, Indland, Udland, Politik og så videre...

Når man klikker på dem skifter indholdet i boksen nedenunder - vel og mærket uden der hentes en ny side ind. Alt indholdet er, efter hvad jeg kan se, allerede i HTML'en pakket ind i DIV's og klar til at blive vist. Der linkes blot til et bogmærke ved klik på en ny tab - hvordan dælen har de lavet det?

Nogle der ved hvordan og vil give mig et stump kode som kan gøre det samme? 200 points fordi jeg meget gerne også vil have et lille style sheet til at danne layout'et af tabs'ne.

Tak :)
Avatar billede w13 Novice
12. november 2007 - 22:40 #1
Du kan gøre det sådan her med java script:
-----------------------------------------
<html>
<head>
<script type="text/javascript">
function ShowTab(id){
  arrTabs=new Array("nr1","nr2","nr3");
  for(i=arrTabs.length-1;i>=0;i--){
    document.getElementById(arrTabs[i]).style.display="none"
  }
  document.getElementById(id).style.display="block"
}
</script>
</head>
<body>

<span onclick="ShowTab('nr1')">Nr. 1</span>
<span onclick="ShowTab('nr2')">Nr. 2</span>
<span onclick="ShowTab('nr3')">Nr. 3</span>

<div id="nr1" style="display:none">Tekst her</div>
<div id="nr2" style="display:none">Tekst her</div>
<div id="nr3" style="display:none">Tekst her</div>

</body>
</html>
-----------------------------------------
Stylesheet'et må du selv lave. Denne kategori er hjælp til selvhjælp, og nu har du fået hele JavaScript-funktionaliteten udleveret. =) Jeg ved jo heller ikke, hvordan du vil designe dine tabs..
Avatar billede keysersoze Ekspert
12. november 2007 - 22:41 #2
Det er en lidt gammel kode - men idéen i det er god nok; http://activedeveloper.dk/articles/292/

Ellers led efter mere fx ud fra "show hide layer"
Avatar billede w13 Novice
12. november 2007 - 22:41 #3
Min kode er dog utestet og kunne meget vel _ikke_ virke, men så retter vi den bare til. =) Har jo lavet den så kort, at det nok sku' være til at rette fejl ret let.
Avatar billede w13 Novice
12. november 2007 - 22:56 #4
Nu er den testet. =)
Avatar billede kimlarsen1978 Nybegynder
13. november 2007 - 00:15 #5
Tak for input. Jeg kender godt til hide/show med divs, men jeg synes bare det TV2 har gjort ser ret cool ud :)

Men man skal jo heller ikke gøre det unødigt svært for en selv. Jeg kan vel blot style en punktopstilling <li> også ellers bruge din eller tilsvarende funktion...
Avatar billede roenving Novice
13. november 2007 - 01:08 #6
-- en bedre løsning er at bruge en variabel til at opbevare en gammel åbnet, som så kan lukkes ved visning:

<script type="text/javascript">
var oldTab = oldElm = null;
function ShowTab(id,elm){
  if(oldTab)
    oldTab.style.display = 'none';
  oldTab = document.getElementById(id);
  oldTab.style.display = "block";
  if(oldElm){
    oldElm.style.backgroundColor = "#876987";
  }
  oldElm = elm;
  elm.style.backgroundColor = "";
}
</script>

...
<span onclick="ShowTab('nr1',this)">Nr. 1</span>
...
Avatar billede kimlarsen1978 Nybegynder
13. november 2007 - 08:47 #7
Tror ikke helt jeg forstår hvordan det virker?
Avatar billede w13 Novice
13. november 2007 - 13:40 #8
Roenvings kode fungerer på samme måde, han har bare optimeret den. Så HTML-delen er stort set den samme som i mit eksempel, bortset fra at han også har "this" som parameter i ShowTab.
Avatar billede kimlarsen1978 Nybegynder
13. november 2007 - 23:47 #9
Okay, men jeg forstår faktisk ikke hvordan JS funktionen virker?

Derudover kunne jeg også godt tænke mig en scrool-funktion som den http://www.nyhederne.tv2.dk har til deres "Video tab". Åbn siden og vælg "Video" lige ved siden af "Nyheder", under indholdet til "ruden" er der nogle fine op og ned pile som får indholdet til at scrol'e - kan I hjælpe med at lave noget tilsvarende?

Tak!
Avatar billede w13 Novice
14. november 2007 - 00:50 #10
Roenvings JS-funktion virker ligesom min ved, at den skjuler den sidst valgte tab og viser den valgte med style-funktionen "display", som enten kan være "none" (usynlig) eller "block" (synlig som block-element).
Hvis der er bestemte dele af den, du ikke forstår, må du fremhæve dem, så skal jeg nok forklare dem nærmere.

Ang. videofunktionen, så kan jeg slet ikke se den. Jeg ser "Video" et sted, men der står, at de er blevet flyttet. Ser ingen scroll. Og en scroll er - med mindre du mener standard scrollbars - ikke bare noget, man lige kan lave. Og slet ikke, så det fungerer cross-browser. Det er naturligvis muligt og ikke ligefrem atomfysik, men du bør nok oprette et helt nyt spørgsmål.
Avatar billede kimlarsen1978 Nybegynder
14. november 2007 - 10:37 #11
Det var min fejl det er på deres valg side de har den scroll http://nyhederne.tv2.dk/politik/ men det er fortsat under "video"
Avatar billede w13 Novice
14. november 2007 - 15:25 #12
Ja, det er ikke helt ligetil, så synes, du skal oprette et nyt JavaScript-spørgsmål om det.
Avatar billede kimlarsen1978 Nybegynder
17. november 2007 - 13:27 #13
Hejsa
Svar på det med scroll findes her: http://www.eksperten.dk/spm/396940

Men jeg har et problem i forbindelse med min tilpasning af scriptet. I denne funk:

***************
function MoveAreaDown(move, parObjContainer){
    if(this.y>-this.scrollHeight+objContainer1.clipHeight){
    this.MoveArea(0,this.y-move)
    if(loop) setTimeout(this.obj+".down("+move+", parObjContainer)",speed)
    }
}
**************
Her har jeg taget det div-objekt som jeg vil scrolle på med ind som parameter (parObjContainer). Det fungerer ved at den gennem setTimeout kalder sig selv og laver scroll til man flytter musen, men...

Hvordan skal

setTimeout(this.obj+".down("+move+", parObjContainer)",speed)

skrives for at parObjContainer korrekt bliver medsendt som objekt når funktionen kalder sig selv?

Jeg har prøvet lidt af hvert men intet vil virke?
Avatar billede kimlarsen1978 Nybegynder
17. november 2007 - 13:28 #14
Ups:
Funktionen ser sådan he ud:

***************
function MoveAreaDown(move, parObjContainer){
    if(this.y>-this.scrollHeight+parObjContainer.clipHeight){
    this.MoveArea(0,this.y-move)
    if(loop) setTimeout(this.obj+".down("+move+", parObjContainer)",speed)
    }
}
**************
Avatar billede kimlarsen1978 Nybegynder
17. november 2007 - 14:35 #15
Mit bedste "gæt" er:

function MoveAreaDown(move, parObjContainer){
    objContainer = eval(parObjContainer);
    if(this.y>-this.scrollHeight+objContainer.clipHeight){
    this.MoveArea(0,this.y-move)
    if(loop) setTimeout(this.obj+".down("+move+", '"+objContainer+"')",speed)
    }
}


Men jeg får denne fejl:
Error: missing ] after element list
Source File: ../JScript/scroll.js
Line: 56, Column: 8
Source Code:
objContainer = eval(parObjContainer);
[object Object]
Avatar billede kimlarsen1978 Nybegynder
17. november 2007 - 14:38 #16
Det virker fint når funktionen kaldes, det er når den i loop'et skal kalde sig selv det går galt?
Avatar billede kimlarsen1978 Nybegynder
17. november 2007 - 15:14 #17
Hmmm, det her virker, men det er jo ikke så pænt...

*****************
function MoveAreaDown(move, containernumber){
    switch (containernumber){
    case 1:
        if(this.y>-this.scrollHeight+objContainer1.clipHeight){
            this.MoveArea(0,this.y-move)
            if(loop){
                setTimeout(this.obj+".down("+move+", 1)",speed)
            }
        }
        break
    case 2:
        if(this.y>-this.scrollHeight+objContainer2.clipHeight){
            this.MoveArea(0,this.y-move)
            if(loop){
                setTimeout(this.obj+".down("+move+", 2)",speed)
            }
        }
        break
    case 3:
        if(this.y>-this.scrollHeight+objContainer3.clipHeight){
            this.MoveArea(0,this.y-move)
            if(loop){
                setTimeout(this.obj+".down("+move+", 3)",speed)
            }
        }
        break
    }
}
****************
Avatar billede kimlarsen1978 Nybegynder
17. november 2007 - 15:15 #18
...
Avatar billede w13 Novice
02. februar 2008 - 13:36 #19
Lukketid?
Avatar billede kimlarsen1978 Nybegynder
02. februar 2008 - 15:20 #20
Ja, smid et svar...
Avatar billede w13 Novice
02. februar 2008 - 16:26 #21
Oki
Avatar billede kimlarsen1978 Nybegynder
03. februar 2008 - 12:16 #22
:-)
Avatar billede 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.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

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