javascript - Menu-system med AJAX - Udvikleren.dk - Programmering, webdesign og grafik

Tags: ajax javascript navigation

Bruger #16590 @ 26.04.11 22:55

Hej Udviklere

Jeg forsøger at lave en side med ganske få menupunkter/sider, men med musik der skal kunne køre på tværs af alle siderne (undlad at bemærke at musik, som starter automatisk er irriterende - det er ikke hvad jeg ønsker).

Jeg tænker da at den mest optimale måde må være, at opdatere hovedindholdet uden af genindlæse siden - altså ved at bruge AJAX. Jeg har lavet en meget stabil side, som loader hovedindholdet fra HTML-kode i en .txt fil og indsætter det på siden. Jeg har så lavet en javascript funktion og en .txt fil for hver side og indsat scriptet, som loader startsiden i <head> af HTML filen. Alt dette fungere helt fint, men hvis f.eks. javascript er deaktiveret, så er siden jo helt tom fra starten af og det er heller ikke muligt at vælge en ny i menuen.

Hvordan kan dette løses? Altså at lave et helt almindeligt menu-system, som er udtyret med AJAX og ingen browser-genindlæsning.

Tak på forhånd

Udover det er det jo heller ikke muligt at bruge browserens "tilbage" knap, men det er dog mindre vigtigt, da det jo er tilfældet ved mange andre sider, herunder flash etc.

9 svar postet i denne tråd vises herunder
5 indlæg har modtaget i alt 26 karma

Sorter efter stemmer Sorter efter dato

Bruger #8884 @ 27.04.11 00:03

300

Jeg er ikke sikker på præcis hvad du mener men nu vil jeg prøve at komme med mit bud!

Her går jeg ud fra at du bruger jQuery.

Du skal lave en <div> der indholder den side du vil vise når man trykker på et menupunkt.

page_loader.js

JScript kode

 $(document).ready(function() {
     $("#indhold").load("filer/forside.php");
 
     $('#forside').click(function() {
         $("#indhold").load("filer/forside.php");
     });
 
     $('#nyheder').click(function() {
         $("#indhold").load("filer/nyheder.php");
     });
 
     $('#kontakt').click(function() {
         $("#indhold").load("filer/kontakt.php");
     });
 
 });

Den kode vil gøre så når du klikker på et link med ID'et 'forside', 'nyheder' eller 'kontakt' vil din <div id="indhold"></div> opdatere uden resten af siden opdatere!

Her er noget html kode så du kan se hvordan det kunne gøres:

index.html

HTML kode

 <!DOCTYPE html>
 <html>
 <head>
 <title>Ajax menu!</title>
 <script type="text/javascript" src="http://code.jquery.com/jquery-1.5.2.js"></script>
 <script type="text/javascript" src="filer/page_loader.js"></script>
 </head>
 <body>
 <div id="menu">
 <div id="forside">Forside</div>
 <div id="nyheder">Nyheder</div>
 <div id="kontakt">Kontakt</div>
 </div>
 <div id="indhold">
 </div>
 </body>
 </html>

Håber det hjalp dig og der ikke er alt for mange fejl i koden, fik den ikke testet.

Bruger #16594 @ 28.04.11 17:06

Nope, du behøves kun at lave én side med det du skal bruge.

Lad os tage udgangspunkt i mit forrige indlæg hvor jeg viste hvordan du kunne "fallback" til almindelig menu. Hvis vi bygger videre på dette eksempel, kan vi få:

HTML kode

 <!DOCTYPE html>
 <html>
 <head>
     <style>
         .nav { font-size:13px; }
         .nav#ajax { display: none; }
     </style>
 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
 
     <script>
         $(document).ready(function() {
             $(".nav#ajax").css("display", "block");
             $("#content").load("minSide.html #thisOne");
 
         });
     </script>
 </head>
 
 <body>
     <b>Navigation:</b>
 
     <div id="nav">
         <ul class="nav" id="ajax">
             <li>Index Ajax</li>
             <li>Some Ajax</li>
         </ul>
 
         <noscript>
             <ul class="nav">
                 <li><a href="#">Index Normal</a></li>
                 <li><a href="#">Some Normal</a></li>
             </ul>
         </noscript>
     </div>
 
     <div id="content"></div>
 
 </body>
 </html>

Som du nok allerede har bemærket er der blevet tilføjet en stump javascript mere i form af

JScript kode

 $("#content").load("minSide.html #thisOne");

som betyder "Load minSide.html og giv mig indholdet af elementet med id #thisOne".

Et eksempel på hvordan minSide.html kunne se ud:

HTML kode

 <!DOCTYPE html>
 <html>
 <head>
     <title>Hello World</title>
 </head>
 <body>
     <div id="thisOne">
         <b>Show this text</b>
     </div>
 
     something...
 </body>
 </html>

Indlæg senest redigeret d. 28.04.2011 18:52 af Bruger #16594

Bruger #3143 @ 27.04.11 08:09

1.965

Du kan ikke lave en JavaScript-menu uden JavaScript. Du kan lave en JavaScript-menu med fallback til en almindelig menu, som genindlæser hele siden, hvis JavaScript er slået fra. I din HTML laver du almindelige links, som du så erstatter med JavaScript-funktioner, når siden indlæses.

For at få frem- og tilbageknapperne, bogmærker og links til at virke kan du bruge HTML5 history API'et, eller du kan bruge et af de mange biblioteker til at få det til at virke i ældre browsere. Søg på Google efter fx "ajax history".

Bruger #8884 @ 27.04.11 13:41

300

Hej Anders,

<div id=forside">Forside</div> virker kun hvis javascript er slået til, som du kan se i JS koden er der en funktion der hedder .click() dvs. når du trykker på en knap med id'et forside køre den den funktion nedenunder som i dette tilfælde er load("forside.php")

Du behøver ikke php for at benytte denne funktion, det kunne ligeså godt være en html fil du loader f.eks.:

JScript kode

 $(document).ready(function() {
      $("#indhold").load("filer/forside.html");
  
      $('#forside').click(function() {
          $("#indhold").load("filer/forside.html");
      });
  
      $('#nyheder').click(function() {
          $("#indhold").load("filer/nyheder.html");
      });
  
      $('#kontakt').click(function() {
          $("#indhold").load("filer/kontakt.html");
      });
  
 });

Har du prøvet at kopiere min kode for at se om det virker etc. etc?

Håber det hjalp dig lidt mere.

Forresten, hvis du ikke føler du kan i javascript skulle du måske starte med at prøve med iframes (jeg fraråder det da de ikke er optimale). Men det er en nem måde kun at ændre noget af indholdet på din side.

Indlæg senest redigeret d. 27.04.2011 13:45 af Bruger #8884

Bruger #16594 @ 27.04.11 15:27

"Fallback" til almindelig menu

Uddrag fra W3C:
For user agents that cannot or will not handle scripts, authors may include alternate content via the NOSCRIPT element.

Et eksempel kunne være:

HTML kode

 <!DOCTYPE html>
 <html>
 <head>
     <style>
         .nav { font-size:13px; }
         .nav#ajax { display: none; }
     </style>
 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
     <script>
         $(document).ready(function() {
             $(".nav#ajax").css("display", "block");
         });
     </script>
 </head>
 
 <body>
     <b>Navigation:</b>
 
     <ul class="nav" id="ajax">
         <li>Index Ajax</li>
         <li>Some Ajax</li>
     </ul>
 
     <noscript>
         <ul class="nav">
             <li><a href="#">Index Normal</a></li>
             <li><a href="#">Some Normal</a></li>
         </ul>
     </noscript>
 </body>
 </html>

Idéen er at sætte #ajax til:

CSS kode

 display:none;

Hvis javascript er aktiveret, vil et stump javascript kode blive kørt igennem, som vil sætte følgende på #ajax elementet:

CSS kode

 display:block;

Hvis ikke javascript er aktiveret, vil #ajax forblive:

CSS kode

 display:none;

...og i stedet vil koden i mellem

HTML kode

 <noscript>...</noscript>

blive vist.

Indlæg senest redigeret d. 27.04.2011 15:40 af Bruger #16594

Bruger #16590 @ 27.04.11 11:59

@ Andreas Voss

Ja, det er noget i den stil jeg havde tænkt mig, men jeg tror at mine færdigheder indenfor jQuery og PHP er alt for mangelfulde. Det skal siges, at jeg stadig er nybegynder og lærer lidt efter lidt som jeg får brug for det.

@ Jesper Kristensen
Ja det er jo klart, men jeg havde nemlig også tænkt mig at lave en JavaScript-menu med fallback til en almindelig menu, som genindlæser hele siden, hvis JavaScript er slået fra.

Hvordan kan jeg lave en side som Andreas Voss skriver, men med fallback til en almindelig menu?

Og hvordan kan <div id="forside">Forside</div> fungere som et menu-link?

Hvis en vil lave en af .php filerne, så jeg kan se opbygningen (da jeg ikke har så meget erfaring deromkring), ville det også være meget hjælpsomt.

Jeg ved godt at det er meget jeg spørger om, men det er alligevel lige en smule mere end det HTML, CSS og JavaScript, som jeg efterhånden er ved at have fint nok styr på.

Bruger #16590 @ 28.04.11 12:53

Mange tak for hjælpen ind til videre.

Jeg er dog lidt i tvivl om noget:
Hvis jeg laver en menu med jQuery, som i filen page_loader.js:

JScript kode

 $(document).ready(function() {
     $("#indhold").load("filer/forside.html");
     
     $('#forside').click(function() {
         $("#indhold").load("filer/forside.html");
     });
     
     $('#nyheder').click(function() {
         $("#indhold").load("filer/nyheder.html");
     });
     
     $('#kontakt').click(function() {
         $("#indhold").load("filer/kontakt.html");
     });
 });

så skal de .html filer som der linkes til jo kun indeholde den kode, som skal indsættes i <div id="indhold">.

Hvis brugeren derimod har Javascript deaktiveret vil en anden menu med helt normale links blive vist og her vil f.eks. forside.html jo skulle være hele siden inklusiv menu, idet den genindlæser hele den side.

Er det så nødvendigt at lave to sider for hvert menupunkt: én til javascript-menuen og en til den normale menu?

Eller er det muligt at linke til den samme fil, og skal denne så helst indeholde hele siden eller blot indholdet af <div id="indhold"> ?

Bruger #3143 @ 28.04.11 16:31

1.965

Er det så nødvendigt at lave to sider for hvert menupunkt: én til javascript-menuen og en til den normale menu?

Ja, men du kan nøjes med at gemme JavaScript-varianten i en fil, og så lave en PHP-vil der automatisk genererer ikke-JavaScript-varianten.

Bruger #16590 @ 28.04.11 18:50

@ebb
Ja det var jo lige den lille "#thisOne" der gjorde det:

JScript kode

 $("#content").load("minSide.html #thisOne");

så nu har jeg vist styr på hvordan jeg skal få det lavet.

Tusind tak for hjælpen.

Menu-system med AJAX

Karma barometer (30 dage)

Modtaget

Givet

Favorit hos
Forum tråde
Artikler