Mootools

Door Harmen , 14 jaar geleden, 6.714x bekeken

Een javascriptframework voor dynamische websites. Om wat voorbeelden te zien die in deze tutorial worden uitgelegd zou je hier kunnen klikken.

Update: Toegevoegd waarom je mootools zou gaan kiezen.

Gesponsorde koppelingen

Inhoudsopgave

  1. Wat kun je met mootools?
  2. Mootools “installeren”
  3. Elementen selecteren
  4. Voorbeeld 1: Tabs in mootools
  5. Voorbeeld 2: Coole effecten in mootools
  6. Mootools en Ajax
  7. Iets gaan doen met de elementen
  8. Voorbeeld 3 en handige links

 

Er zijn 29 reacties op 'Mootools'

PHP hulp
PHP hulp
0 seconden vanaf nu
 

Gesponsorde koppelingen
Harmen
Harmen
14 jaar geleden
 
0 +1 -0 -1
Hier is mijn tutorial dan. Veel plezier met mootoolen.

Edit:

Dank je Bas, nu ziet het er wat beter uit (zonder dubbele pagina's)
GaMer B
GaMer B
14 jaar geleden
 
0 +1 -0 -1
Herhaling is goed, maar of je nou serieus elke pagina dubbel moet posten... :P Anyway ik ga het eens doorlezen en hopelijk wordt ik dan wat wijzer van Mootools en kan ik het ook eens gaan gebruiken.
Chris Avontuur
Chris Avontuur
14 jaar geleden
 
0 +1 -0 -1
Ik heb het even vluchtig doorgekeken en ik ga het zeker downloaden en uitproberen op een rustiger tijdstip en een ander project. Tutorial ziet er goed uit en het voordeel is je hoeft maar de helft te lezen! (OK laatste opmerking is flauw!!)
Han eev
Han eev
14 jaar geleden
 
0 +1 -0 -1
Mootools is een erg mooi javascript framework :) erg handig! Goeie tut verder


14 jaar geleden
 
0 +1 -0 -1
Top,
had nog niet echt de energie gehad om eraan te beginnen, maar dit gaat me zeker over de drempel helpen.
Martijn B
Martijn B
14 jaar geleden
 
0 +1 -0 -1
Quote:
Waaaah, alle pagina's zijn dubbel :S!

Kun je niet snel ergens overheen lezen.

Ziet er goed uit.
Harmen
Harmen
14 jaar geleden
 
0 +1 -0 -1
hehe, dank jullie voor jullie positieve reacties en bedankt voor jullie gevoel van humor :P.

P.S. Alles ging dubbel: Eerst alle pagina's dubbel, toen een PM om de dubbele pagina's te verwijderen dubbel en als laatste mijn eerste reactie hierboven dubbel...
Hipska BE
Hipska BE
14 jaar geleden
 
0 +1 -0 -1
wat ik niet zie en wel verwacht had,

Waarom MooTools ipv bv. Prototype?
Harmen
Harmen
14 jaar geleden
 
0 +1 -0 -1
@Hipska
O ja, ik kan daar ook nog wel even wat over schrijven. Ik zal wel even een langer verhaal schrijven op de inleidingspagina.

Trouwens.. ik hoop dat Bas even langs komt, want zo lijkt het voor geen meter!
Bas, gooi ajb even alle 2e dubbele pagina's weg
Jan geen
Jan geen
14 jaar geleden
 
0 +1 -0 -1
Soms wat wazig taalgebruik maar toch goed te volgen. Mooi opstapje om nu eindelijk eens te verdiepen in mootools. Danke
MennoDikjo
MennoDikjo
14 jaar geleden
 
0 +1 -0 -1
Dankjewel, ik ga dit nog wel eens lezen :) Mootools is echt cool :)


14 jaar geleden
 
0 +1 -0 -1
Misschien ook even verwijzen naar andere JSFrameworks zoals jquery, prototype, etc (kan je mooi die laatste pagina: . voor gebruiken)
Harmen
Harmen
14 jaar geleden
 
0 +1 -0 -1
Ik heb dat toegevoegd op de eerste pagina "wat is mootools".
Het is volgens mij niet zo dat mootools veel beter is dan jquery en andersom. De enige die afvalt omdat het zo zwaar is is denk ik prototype. Keus ligt bij de gebruiker :)
Danny Roelofs
Danny Roelofs
14 jaar geleden
 
0 +1 -0 -1
Dank je, Ik was een beetje te lui om mootools uit te zoeken, hoe en wat te installeren (had niet zo veel zin om dat allemaal uit te zoeken op dat moment).

Maar ik denk dat mootools voor mijn CMS en MCMS een mooie samenwerking kan aangaan gezien ik een CMS aan het schrijven ben die eigenlijk specifiek voor web 2.0 doeleinden is bedoeld.

Gezien ik graag een wat levendige manier van een (M)CMS wil bouwen en dat aangaande anti flash ben om daar een website mee te bouwen, is dit wel een uitkomst om toch hier wat mee te gaan doen.

Maar moet het maar even uitzoeken nog of ik dit kan integreren in mijn project. maar in ieder geval bedankt voor de uitleg.
Rudie dirkx
rudie dirkx
14 jaar geleden
 
0 +1 -0 -1
Is het mogelijk om Ajax een standaard onStart en onComplete function te geven? de onStart moet uitgevoerd worden op het moment dat request() aangeroepen wordt, en onComplete nadat de custom onComplete is uitgevoerd... Zoiets heeft mijn eigen Ajax class wel, maar die is nu niet meer te gebruiken, omdat Mootools mijn Ajax lib overschrijft (op zich prima, want mootools is veel beter :)).
Maar als ik voor ELKE request (supersupersuperveel verschillende) elke keer weer een onStart en onComplete moet aanhangen.... bah bah
Iemand?
Danny Roelofs
Danny Roelofs
14 jaar geleden
 
0 +1 -0 -1
Niet dat het iets met jouw tutorial te maken heeft, maar ik heb er uren aan besteed om een oplossing te vinden voor de slider functie.

Mocht er toevallig iemand een slide bar gaan plaatsen in een element welke te verslepen is, ofwel de positie van het element kan veranderen. Dan vertoond de slider functie een raar effect.

Zodra je op de slide bar knop klikt, verplaatst deze zich onder je muis vandaan en komt weer terug zodra je de muis vast houd en dan zou bewegen.

Dat is dan al gauw een schoonheid foutje in je ontwerp, maar de oplossing ligt
hem erin om de mootools.js bestand even aan te passen op regel 4533 (als je alles hebt gedownload) maar in ieder geval bij de functie:

clickedElement:

en dan regel :
var position = event.page[this.axis] - this.element.getRelativePosition()[this.axis] - this.half;

vervangen met :
var position = event.page[this.axis] - this.element.getPosition()[this.axis] - this.half;
Toine vd P
Toine vd P
14 jaar geleden
 
0 +1 -0 -1
MooTools is wel lollig, die drag 'n drop ruled zwaar
Appz
Appz
14 jaar geleden
 
0 +1 -0 -1
ben ik nou de enige die hier niets van snapt? ik krijg het niet aan de praat..

dit is mijn html code:

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
        <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
      
        <title>Moo tie het nou?</title>
      
        <script type="text/javascript" src="mootools.js"> </script>
        <script type="text/javascript" src="mootest.js"> </script>
      
        </head>
    
    <body>
    
        <p>
            <a id="klik" href="#">Klik</a>
        </p>
      
        <p id="normaal">
            Dit is een normale tekst.
        </p>
    
    </body>
</html>


In mootools.js zit het downloadbestand van mootools.net en in mootest.js staat:

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
// JavaScript Document
window.addEvent('domready', function() {
    // en hier gaat dan straks je code komen
    // alle javascript-voorbeelden die in deze tutorial staan kunnen hierin komen
$('klik').addEvent('click',function(){
    $('normaal').setStyle('color','#990000');
});

});


precies zoals het voorbeeld lijkt me...

wat doe ik verkeerd??
Harmen
Harmen
14 jaar geleden
 
0 +1 -0 -1
Het zou gewoon moeten werken, tenminste, als ik het zelf test in firebug. Misschien heb je het pad naar mootools.js en mootest.js niet goed?
En als je in firefox zit, kijk eens bij extra > foutconsole. Krijg je daar een error als je op de link klikt?

Tip: Gebruik firebug en ga dan naar de console en zet daar je stukje javascript in en druk op run. Kijk eens wat er dan gebeurt
Kees
Kees
14 jaar geleden
 
0 +1 -0 -1
Dag Harmen (en anderen),
met enige jalouzie lees ik bovenstaande berichten. Ik krijg MooTools niet eens geinstalleerd!
Als ik op download klik verschijnt er een foutmelding, iets met 'navigator is niet gedefinieerd' en 'Runtime-fout Microsoft JSScript'

Wie kan mij adviseren?

Groet, Kees
Storeman storeman
storeman storeman
14 jaar geleden
 
0 +1 -0 -1
Je moet een JS bestand nooit direct openen, windows ziet dit als een uitvoerbaar bestand maar kan er maar bar weinig mee.

Je kunt twee dingen doen, of gewoon op je schijf opslaan en daarna openen met kladblok, of je veranderd het zo dat een JS bestand standaard wordt geopend door kladblok, notepad++, wordpad, dreamweaver, you name it!
Kees
Kees
14 jaar geleden
 
0 +1 -0 -1
Hallo,

ik zie dat het een js bestand betreft. Maar dit is voor mij toch onbekend. Wat is een js bestand? Ik doe 'intuitief' wat ik altijd doe bij downloaden, namelijk een 'download' aanklikken en dan wachten op de dingen die komen gaan, en dat is dus die foutmelding. Dus 'gewoon' op mijn schijf opslaan krijg ik helaas niet voor elkaar. Volgens mij doe ik iets fout, of ik doe iets niet wat wel moet gebeuren.
Ik ontwerp al 1 jaar websites, heb dus wel enige ervaring met allerlei soorten van bestanden, scripts, enzovoorts, maar dit heb ik nog niet meegemaakt.

groet, Kees
Erwin Nieuwenhuis
Erwin Nieuwenhuis
14 jaar geleden
 
0 +1 -0 -1
kun je niet rechtermuisknop en dan opslaan als ofzoiets??

En anders zul je toch wat anders dan IE moeten instaleren.(ik neem aan dat je IE hebt door je foutmelding ?)

Het gaat er dus om dat IE in dit geval probeert het bestand te openen in plaats van op te slaan.
Storeman storeman
storeman storeman
14 jaar geleden
 
0 +1 -0 -1
Doe je niet toevallig opslaan op schijf > openen (dit kan namelijk problematisch zijn).

Een .js bestand is een javascript bestand. Overigens, mocht je er tegenaan blijven lopen, open even een topic op het forum, deze reacties zijn niet voor dit soort berichten.
J A
J A
14 jaar geleden
 
0 +1 -0 -1
Weet iemand toevallig hoe je iets update zonder dat je daarvoor ergens op moet klikken?
Douwe
Douwe
14 jaar geleden
 
0 +1 -0 -1
Gewoon dit in je source zetten:
<script type="text/javascript">
updateFunctie();
</script>
J A
J A
14 jaar geleden
 
0 +1 -0 -1
Slim, :P .. had ik zelf niet eens aan gedacht...
Tom K
Tom K
14 jaar geleden
 
0 +1 -0 -1
is het mogenlijk om met mootools, met ajax, de tekst in een string te zetten,en niet meteen in een object zetten?
PHP hulp
PHP hulp
0 seconden vanaf nu
 

Gesponsorde koppelingen
Pieter Heijnen
Pieter Heijnen
13 jaar geleden
 
0 +1 -0 -1
Weet iemand of je ImageMenu van Mootools kunt combineren met Milkbox van Mootools.
Ik krijg het niet aan het werk, ImageMenu werkt wel maar de foto?s die Milkbox moet openen, worden in een nieuw venster geopend.Het is net alsof het pad naar het javascript van Milkbox niet gevonden wordt.Ik heb al alles geprobeerd maar ik krijg het niet werkend.

Graag info voor een oplossing.

Groet Pieter

Om te reageren heb je een account nodig en je moet ingelogd zijn.

Inhoudsopgave

  1. Wat kun je met mootools?
  2. Mootools “installeren”
  3. Elementen selecteren
  4. Voorbeeld 1: Tabs in mootools
  5. Voorbeeld 2: Coole effecten in mootools
  6. Mootools en Ajax
  7. Iets gaan doen met de elementen
  8. Voorbeeld 3 en handige links

Labels

  • Geen tags toegevoegd.

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.