Hoe los je dit op

Voor deze antwoord kwam Ben Nolan op de beste manier uit, maak een behaviour systeem. Dit heeft hij voor ons gedaan, dit kun je gratis downloaden het is 5KB. Nu zou je denken 5KB dat is veel, ik kan je nu al zeggen liever 5KB aan externe oplossing dan interne oplossing, want alles wat buiten de HTML bestanden omgaat, wordt namelijk gecached.

Om het bestandje te downloaden heb ik hier de link:
http://www.bennolan.com/behaviour/behaviour.js

Dit hele systeem heeft een officiële naam, namelijk unobtrusive javascript behaviours (UJB).

Nadat je dit gedownload hebt, kun je natuurlijk in gaan rippen door spaties etc. weg te halen, dit kan het bestand aanzienlijk verkleinen. Bij mij lukte het bij de 2KB te komen, kan altijd nog minder, maar ik had de copyright rechten enzo ingelaten.

Na dit alles kan ik je eindelijk de beste oplossing laten zien, zie hier mijn eind voorbeeld:

Index.html

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
<html>
<head>
    <title>Welcome</title>
    <script src="behaviour.js"></script>
    <script src="ajax.js"></script>
</head>
<body>
    <a href=Ga.html class=link>LINK</a>
    <div id=content></div>
</body>
</html>


Voeg het volgende aan ajax.js toe:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
var myrules = {
    .link: function(el){
        el.onclick = function(){
            var url=getAttribute(href);
      doedit(url, GET);
      return false;
    }
    }
};

Behaviour.register(myrules);


Myrules is een object, waardoor je dus meerdere regels kunt toevoegen en Behaviour.register voegt de regels toe aan de behaviour.js, waardoor het systeem inwerking komt.

Nu zou alles weer moeten werken, en kijk geen javascript in de HTML bestand te zien. Alleen puur HTML, dit wilden we hebben. Denk eraan de gegeven voorbeelden kun je ook gebruiken met andere technieken. Voor meer informatie over UJB check: http://www.bennolan.com/behaviour/

Hoewel dit één manier is om alle javascript code uit de bron te halen zijn er andere mogelijkheden. Ik heb echter deze manier nu gekozen, omdat het simpel en eenvoudig te bevatten is. Het is waar er zitten fouten in, maar nu kun je javascript code uit laten voeren met behulp van classes en id's en is interne javascript niet meer nodig. Als je echter deze manier te overbodig vindt en te uitbundig, kijk dan even deze tutorial na: http://www.phphulp.nl/php/tutorials/8/309/611/, maak van af hier je eigen keuze met de stijl.

« Lees de omschrijving en reacties

Inhoudsopgave

  1. Inleiding
  2. CSS in HTML en Eruit
  3. Javascript in HTML
  4. Hoe los je dit op
  5. Conclusie

PHP tutorial opties

 
 

Om de gebruiksvriendelijkheid van onze website en diensten te optimaliseren maken wij gebruik van cookies. Deze cookies gebruiken wij voor functionaliteiten, analytische gegevens en marketing doeleinden. U vindt meer informatie in onze privacy statement.