jQuery Plugin
Kan zijn dat het niet perfect werkt maar simpelweg omdat ik het effe snel gemaakt heb, Dus commentaar over fouten mag je voor je houden tenzij je het script beter wil maken.
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
<!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" xml:lang="en" lang="en">
<head>
<title>jQuery</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-639-1" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery("#go_right").click(function() {
jQuery(".left_on").each(function() {
jQuery(this).appendTo("#div2");
jQuery(this).removeClass("left_on");
jQuery(this).addClass("right_off");
});
});
jQuery("#go_left").click(function() {
jQuery(".right_on").each(function() {
jQuery(this).appendTo("#div1");
jQuery(this).removeClass("right_on");
jQuery(this).addClass("left_off");
});
});
jQuery(".left_off").click(function() {
jQuery(this).removeClass("left_off");
jQuery(this).addClass("left_on");
});
jQuery(".right_off").click(function() {
jQuery(this).removeClass("right_off");
jQuery(this).addClass("right_on");
});
jQuery(".left_on").click(function() {
jQuery(this).removeClass("left_on");
jQuery(this).addClass("left_off");
});
jQuery(".right_on").click(function() {
jQuery(this).removeClass("right_on");
jQuery(this).addClass("right_off");
});
});
</script>
<style>
.div1 {
border: 1px solid black;
width: 40%;
float: left;
height: 300px;
}
.div2 {
border: 1px solid blue;
width: 40%;
float: right;
height: 300px;
}
.left_off {
background: #CCCCCC;
border-bottom: 1px solid black;
cursor: pointer;
}
.left_on {
background: orange;
border-bottom: 1px solid black;
cursor: pointer;
}
.right_off {
background: #CCCCCC;
border-bottom: 1px solid black;
cursor: pointer;
}
.right_on {
background: orange;
border-bottom: 1px solid black;
cursor: pointer;
}
</style>
<body>
<div id="div1" class="div1">
<div id="move1" class="left_off">
Move1
</div>
<div id="move2" class="left_off">
Move2
</div>
</div>
<div id="div2" class="div2">
<div id="move3" class="right_off">
Move3
</div>
</div>
<input id="go_right" type="submit" value=">>"><br />
<input id="go_left" type="submit" value="<<">
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>jQuery</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-639-1" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery("#go_right").click(function() {
jQuery(".left_on").each(function() {
jQuery(this).appendTo("#div2");
jQuery(this).removeClass("left_on");
jQuery(this).addClass("right_off");
});
});
jQuery("#go_left").click(function() {
jQuery(".right_on").each(function() {
jQuery(this).appendTo("#div1");
jQuery(this).removeClass("right_on");
jQuery(this).addClass("left_off");
});
});
jQuery(".left_off").click(function() {
jQuery(this).removeClass("left_off");
jQuery(this).addClass("left_on");
});
jQuery(".right_off").click(function() {
jQuery(this).removeClass("right_off");
jQuery(this).addClass("right_on");
});
jQuery(".left_on").click(function() {
jQuery(this).removeClass("left_on");
jQuery(this).addClass("left_off");
});
jQuery(".right_on").click(function() {
jQuery(this).removeClass("right_on");
jQuery(this).addClass("right_off");
});
});
</script>
<style>
.div1 {
border: 1px solid black;
width: 40%;
float: left;
height: 300px;
}
.div2 {
border: 1px solid blue;
width: 40%;
float: right;
height: 300px;
}
.left_off {
background: #CCCCCC;
border-bottom: 1px solid black;
cursor: pointer;
}
.left_on {
background: orange;
border-bottom: 1px solid black;
cursor: pointer;
}
.right_off {
background: #CCCCCC;
border-bottom: 1px solid black;
cursor: pointer;
}
.right_on {
background: orange;
border-bottom: 1px solid black;
cursor: pointer;
}
</style>
<body>
<div id="div1" class="div1">
<div id="move1" class="left_off">
Move1
</div>
<div id="move2" class="left_off">
Move2
</div>
</div>
<div id="div2" class="div2">
<div id="move3" class="right_off">
Move3
</div>
</div>
<input id="go_right" type="submit" value=">>"><br />
<input id="go_left" type="submit" value="<<">
</body>
</html>
Het kan natuurlijk ook nog op veel meer manieren maar dit is een simpele waar ik even de tijd voor genomen heb om te maken. Succes
Gewijzigd op 02/11/2010 17:32:53 door Maarten PHP
Tim Kampherbeek op 02/11/2010 16:47:44:
Effe snel een onbenullig script gemaakt dat laat zien hoe simpel het is,
Kan zijn dat het niet perfect werkt maar simpelweg omdat ik het effe snel gemaakt heb, Dus commentaar over fouten mag je voor je houden tenzij je het script beter wil maken.
Het kan natuurlijk ook nog op veel meer manieren maar dit is een simpele waar ik even de tijd voor genomen heb om te maken. Succes
Kan zijn dat het niet perfect werkt maar simpelweg omdat ik het effe snel gemaakt heb, Dus commentaar over fouten mag je voor je houden tenzij je het script beter wil maken.
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
<!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" xml:lang="en" lang="en">
<head>
<title>jQuery</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-639-1" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery("#go_right").click(function() {
jQuery(".left_on").each(function() {
jQuery(this).appendTo("#div2");
jQuery(this).removeClass("left_on");
jQuery(this).addClass("right_off");
});
});
jQuery("#go_left").click(function() {
jQuery(".right_on").each(function() {
jQuery(this).appendTo("#div1");
jQuery(this).removeClass("right_on");
jQuery(this).addClass("left_off");
});
});
jQuery(".left_off").click(function() {
jQuery(this).removeClass("left_off");
jQuery(this).addClass("left_on");
});
jQuery(".right_off").click(function() {
jQuery(this).removeClass("right_off");
jQuery(this).addClass("right_on");
});
jQuery(".left_on").click(function() {
jQuery(this).removeClass("left_on");
jQuery(this).addClass("left_off");
});
jQuery(".right_on").click(function() {
jQuery(this).removeClass("right_on");
jQuery(this).addClass("right_off");
});
});
</script>
<style>
.div1 {
border: 1px solid black;
width: 40%;
float: left;
height: 300px;
}
.div2 {
border: 1px solid blue;
width: 40%;
float: right;
height: 300px;
}
.left_off {
background: #CCCCCC;
border-bottom: 1px solid black;
cursor: pointer;
}
.left_on {
background: orange;
border-bottom: 1px solid black;
cursor: pointer;
}
.right_off {
background: #CCCCCC;
border-bottom: 1px solid black;
cursor: pointer;
}
.right_on {
background: orange;
border-bottom: 1px solid black;
cursor: pointer;
}
</style>
<body>
<div id="div1" class="div1">
<div id="move1" class="left_off">
Move1
</div>
<div id="move2" class="left_off">
Move2
</div>
</div>
<div id="div2" class="div2">
<div id="move3" class="right_off">
Move3
</div>
</div>
<input id="go_right" type="submit" value=">>"><br />
<input id="go_left" type="submit" value="<<">
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>jQuery</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-639-1" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery("#go_right").click(function() {
jQuery(".left_on").each(function() {
jQuery(this).appendTo("#div2");
jQuery(this).removeClass("left_on");
jQuery(this).addClass("right_off");
});
});
jQuery("#go_left").click(function() {
jQuery(".right_on").each(function() {
jQuery(this).appendTo("#div1");
jQuery(this).removeClass("right_on");
jQuery(this).addClass("left_off");
});
});
jQuery(".left_off").click(function() {
jQuery(this).removeClass("left_off");
jQuery(this).addClass("left_on");
});
jQuery(".right_off").click(function() {
jQuery(this).removeClass("right_off");
jQuery(this).addClass("right_on");
});
jQuery(".left_on").click(function() {
jQuery(this).removeClass("left_on");
jQuery(this).addClass("left_off");
});
jQuery(".right_on").click(function() {
jQuery(this).removeClass("right_on");
jQuery(this).addClass("right_off");
});
});
</script>
<style>
.div1 {
border: 1px solid black;
width: 40%;
float: left;
height: 300px;
}
.div2 {
border: 1px solid blue;
width: 40%;
float: right;
height: 300px;
}
.left_off {
background: #CCCCCC;
border-bottom: 1px solid black;
cursor: pointer;
}
.left_on {
background: orange;
border-bottom: 1px solid black;
cursor: pointer;
}
.right_off {
background: #CCCCCC;
border-bottom: 1px solid black;
cursor: pointer;
}
.right_on {
background: orange;
border-bottom: 1px solid black;
cursor: pointer;
}
</style>
<body>
<div id="div1" class="div1">
<div id="move1" class="left_off">
Move1
</div>
<div id="move2" class="left_off">
Move2
</div>
</div>
<div id="div2" class="div2">
<div id="move3" class="right_off">
Move3
</div>
</div>
<input id="go_right" type="submit" value=">>"><br />
<input id="go_left" type="submit" value="<<">
</body>
</html>
Het kan natuurlijk ook nog op veel meer manieren maar dit is een simpele waar ik even de tijd voor genomen heb om te maken. Succes
Ik zou zoiets doen:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
<!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" xml:lang="en" lang="en">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<title>jQuery</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-639-1" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<script type="text/javascript">
$(document).ready(function () {
$(".move").click(function() {
$(this).toggleClass('on').toggleClass('off');
});
$('#go_right').click(function() {
$('#div1 > div.on').each(function() {
$(this).appendTo('#div2').toggleClass('on').toggleClass('off');
});
});
$('#go_left').click(function() {
$('#div2 > div.on').each(function() {
$(this).appendTo('#div1').toggleClass('on').toggleClass('off');
});
});
});
</script>
<style>
#div1 {
border: 1px solid black;
width: 40%;
float: left;
height: 300px;
}
#div2 {
border: 1px solid blue;
width: 40%;
float: right;
height: 300px;
}
.off {
background: #CCCCCC;
border-bottom: 1px solid black;
cursor: pointer;
}
.on {
background: orange;
border-bottom: 1px solid black;
cursor: pointer;
}
</style>
<body>
<div id="div1">
<div class="off move">
Move1
</div>
<div class="off move">
Move2
</div>
</div>
<div id="div2">
<div class="off move">
Move3
</div>
</div>
<input id="go_right" type="submit" value=">>"><br />
<input id="go_left" type="submit" value="<<">
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<title>jQuery</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-639-1" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<script type="text/javascript">
$(document).ready(function () {
$(".move").click(function() {
$(this).toggleClass('on').toggleClass('off');
});
$('#go_right').click(function() {
$('#div1 > div.on').each(function() {
$(this).appendTo('#div2').toggleClass('on').toggleClass('off');
});
});
$('#go_left').click(function() {
$('#div2 > div.on').each(function() {
$(this).appendTo('#div1').toggleClass('on').toggleClass('off');
});
});
});
</script>
<style>
#div1 {
border: 1px solid black;
width: 40%;
float: left;
height: 300px;
}
#div2 {
border: 1px solid blue;
width: 40%;
float: right;
height: 300px;
}
.off {
background: #CCCCCC;
border-bottom: 1px solid black;
cursor: pointer;
}
.on {
background: orange;
border-bottom: 1px solid black;
cursor: pointer;
}
</style>
<body>
<div id="div1">
<div class="off move">
Move1
</div>
<div class="off move">
Move2
</div>
</div>
<div id="div2">
<div class="off move">
Move3
</div>
</div>
<input id="go_right" type="submit" value=">>"><br />
<input id="go_left" type="submit" value="<<">
</body>
</html>
Kleiner, simpeler, duidelijker en makkelijker, ook in onderhoud.
