Tijden veranderen
jquery slider
vervolgens moet jQuery dus gaan sliden. ik heb het volgende:
html:
Code (php)
1
2
3
4
5
6
7
2
3
4
5
6
7
<div id="quotes">
<ul>
<li>item1</li>
<li>item2</li>
<li>item3</li>
</ul>
</div>
<ul>
<li>item1</li>
<li>item2</li>
<li>item3</li>
</ul>
</div>
css:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
2
3
4
5
6
7
8
9
10
11
12
13
14
#quotes {
margin-left: auto;
margin-right: auto;
overflow : hidden;
}
#quotes li {
float: left;
display : none;
}
#quotes li:nth-child(1) {
display : block;
}
margin-left: auto;
margin-right: auto;
overflow : hidden;
}
#quotes li {
float: left;
display : none;
}
#quotes li:nth-child(1) {
display : block;
}
jQuery:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
(function($){
var Slider = {
slide: function( element, time ){
var direction = 0,
element = element,
length = element.length(),
time = time,
width = element.width();
setInterval(function(){
element.animate({
'margin-left': (direction >= length) ? '0' : '-' + (direction * width)
}, 500);
(direction >= length) ? direction = 0 : direction++;
}, time);
}
}
})(jQuery);
var slider = new Slider(),
li = $('#quotes').find('li');
slider.slide( li, 2000 );
var Slider = {
slide: function( element, time ){
var direction = 0,
element = element,
length = element.length(),
time = time,
width = element.width();
setInterval(function(){
element.animate({
'margin-left': (direction >= length) ? '0' : '-' + (direction * width)
}, 500);
(direction >= length) ? direction = 0 : direction++;
}, time);
}
}
})(jQuery);
var slider = new Slider(),
li = $('#quotes').find('li');
slider.slide( li, 2000 );
in de console staan geen fouten. maar hij slide niet. verder wordt alleen het eerste item weergegeven, dus de css doet zn werk. alleen jQuery niet. ziet iemand een fout?
Code (php)
1
2
3
4
5
6
7
2
3
4
5
6
7
<script language="javascript" type="text/javascript">
$(document).ready(function() {
var slider = new Slider(),
li = $('#quotes').find('li');
slider.slide( li, 2000 );
});
</script>
$(document).ready(function() {
var slider = new Slider(),
li = $('#quotes').find('li');
slider.slide( li, 2000 );
});
</script>
Jeroen, ik zou er een Plugin interface van maken.
Tevens staan er in de console wel fouten:
Quote:
Uncaught ReferenceError: Slider is not defined
Dit komt omdat je Slider hebt aangemaakt in die IIFE: (function() { ... })() Die zorgt voor een global scope, precies zoals in PHP functies.
Je moet die Slider variabele dus nog in de global scope zetten:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
2
3
4
5
6
7
8
9
10
11
12
13
14
(function($) {
var Slider = { ... };
window.Slider = Slider;
})(jQuery);
// of
(function($) {
window.Slider = { ... };
})(jQuery);
var Slider = { ... };
window.Slider = Slider;
})(jQuery);
// of
(function($) {
window.Slider = { ... };
})(jQuery);
@wouter, het is een plugin. Alleen ter duidelijkheid heb ik het hier achter elkaar gezet.
Werkelijk waar, ik heb geen errors in chrome developers tools. Iksnap je uitleg niet echt. Het hele slider object is toch in die var slider met new? Dus is de scope toch die van het object?
Code (php)
1
2
3
2
3
(function() {
// some code
)();
// some code
)();
Is gewoon een functie:
Code (php)
1
2
2
function() {
}
}
Die meteen wordt aangeroepen (die () erachter) en voor de duidelijkheid nog een extra () om zich heen heeft.
Binnen die functie heb je een eigen scope. Kijk eens naar dit PHP voorbeeld, is hetzelfde als wat hierboven staat in JS:
Code (php)
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
<?php
function sayHello($name)
{
$hello = 'Hello '.$name;
}
sayHello();
echo $hello;
?>
function sayHello($name)
{
$hello = 'Hello '.$name;
}
sayHello();
echo $hello;
?>
Je begrijpt hopelijk wel dat dit niet kan hé? Nou in jouw JS doe je precies hetzelfde:
Code (php)
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
function init() {
var Slider = {
slide : ...,
};
}
init();
new Slider();
var Slider = {
slide : ...,
};
}
init();
new Slider();
Je haalt nu een slider variabele op die in de functie is aangemaakt. Maar dat werkt dus helemaal niet.
Nu kun je in PHP het keyword global gebruiken om een variabele in de global scope te plaatsen:
Code (php)
Dit zal werken, volgens mij. In JS doe je dit door de variabele in het window object (dat is het global object) te plaatsen:
Code (php)
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
function init() {
window.Slider = {
slider : ...
}
}
init();
new Slider();
window.Slider = {
slider : ...
}
}
init();
new Slider();
Ook dit werkt geweldig, omdat we het nu in de global scope hebben geplaatst. Die function init() en direct erachteraan init() kan korter worden geschreven als:
Code (php)
1
2
3
4
5
6
7
2
3
4
5
6
7
(function() {
window.Slider = {
slide : ...
};
})();
new Slider();
window.Slider = {
slide : ...
};
})();
new Slider();
En dan zijn we bij een code aangekomen die perfect zal werken.
En met plugin interface bedoel ik dat je zoiets kunt doen:
Code (php)
1
$('#quotes').slide(2000);
Dat staat natuurlijk veel mooier, in jQuery dan. Dit doe je door de functie aan te maken in de jQuery.fn array. Hierin staan alle jQuery functies:
Code (php)
1
2
3
4
2
3
4
jQuery.fn.slide = function(time) {
var elements = $(this); // $(this) is het element dat geselecteerd is (in dit geval $('#quotes')
// make slide
};
var elements = $(this); // $(this) is het element dat geselecteerd is (in dit geval $('#quotes')
// make slide
};
Gewijzigd op 12/05/2012 22:32:38 door Wouter J
Wat vind je overigens van die code? Het is mijn eerste echte plugin, dus wat kan er beter?
Quote:
(...)maar slider is nog steeds een variabele(...)
dit is inderdaad waar mensen die van PHP naar JS overstappen problemen mee krijgen.
In PHP heb je variabelen ($ gevolgd door hun naam) en dan nog klassenamen en functie namen. In JS zijn dit allemaal variabelen. Alleen deze variabelen een aparte waarde gekregen. Maar het zijn en blijven altijd variabelen.
Quote:
Wat vind je overigens van die code? Het is mijn eerste echte plugin, dus wat kan er beter?
De plugin interface die ik hierboven uitlegde. En:
- argumenten hoeven in JS niet per se ingevuld te worden. Doe dus altijd een check:
Code (php)
1
2
3
4
2
3
4
function sayHello(name) {
name || (name = 'World');
return 'Hello ' + name;
}
name || (name = 'World');
return 'Hello ' + name;
}
Hierbij kijken we of name bestaat. Zoniet dan gaan we naar de andere kant van de or en zetten we de variabele name met een default value, in dit geval World.
- Regel 5 en 7 zijn nergens voor nodig
- setInterval is nou niet de beste functie in JS, al zou het nu wel meevallen. Meer info: http://youtu.be/i_qE1iAmjFg?t=7m46s
Gewijzigd op 12/05/2012 22:47:45 door Wouter J