jquery
Ik heb zelf nog nooit met deze taal gewerkt dus weet er weinig tot niets van af.
Ik heb het volgende waar ik tegen aan loop.
Drie knoppen langs elkaar. Daar onder een plaats waar wat content kan.
Ik begin met 3 knoppen zonder content. Als ik op 1 van de knoppen klik moet er content komen van de betreffende knop, klik ik op een andere knop dan komt er die content te staan. Klik ik nogmaals op de zelfde knop dan zou ik graag willen dat de content weer volledig verdwijnt.
Ik heb echt alles afgezocht maar niet gevonden waar ik naar opzoek ben. kan iemand mij aan een stukje code helpen waar ik mee verder kan.
Maar ik ben niet tegen gekomen waar ik naar opzoek was.
hier is een voorbeeld van wat ik zoek. let niet op de inhoud zelf ik heb zo maar wat in getypt.
http://www.youtube.com/watch?v=IXlFSAIi3vc
wanneer je iets naar beneden scrolled onder de video zelf zie je. Delen, favoriet, afspeellijst enz. als je der op klikt komt er wat nieuwe content bij en wanneer je op een andere klikt wordt de content vervangen voor de des betreffende knop.
het enige verschil is dat ik ook graag zou willen dat wanneer je met een bepaalde knop de content opent dat je hem ook me de zelfde knop weer kan sluiten.
Kan iemand mij ook aan zo'n script helpen??
Gewijzigd op 01/01/1970 01:00:00 door peter paul
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
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
<!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=iso-8859-1" />
<title>Untitled Document</title>
</head>
<script type="text/javascript">
function setContent(bron,doel)
{
document.getElementById(doel).innerHTML = document.getElementById(bron).value ;
}
function clearContent(doel)
{
document.getElementById(doel).innerHTML = "" ;
}
</script>
<body>
<textarea id="input_content"></textarea>
<input type="button" value="Set content" onclick="setContent('input_content','content')" />
<input type="button" value="Clear content" onclick="clearContent('content')" />
<div id="content">
</div>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
</head>
<script type="text/javascript">
function setContent(bron,doel)
{
document.getElementById(doel).innerHTML = document.getElementById(bron).value ;
}
function clearContent(doel)
{
document.getElementById(doel).innerHTML = "" ;
}
</script>
<body>
<textarea id="input_content"></textarea>
<input type="button" value="Set content" onclick="setContent('input_content','content')" />
<input type="button" value="Clear content" onclick="clearContent('content')" />
<div id="content">
</div>
</body>
</html>
Of denk ik nu te makkelijk?
Ik zal het nog wat duidelijker proberen uit te leggen.
Als ik naar de pagina ga zie je alleen 3 buttons langs elkaar. Wanneer je op een van de buttons klikt dan komt er onder deze buttons een content gedeelte. De knoppen zijn dus bedoeld om de content te laten zien of juist niet. Maar de knoppen moet en ook zo werken, dat wanneer er al content van button 1 is te zien en je klikt op twee dat dan de content van 1 weg gaat en de content van button 2 er komt te staan.
Hier zie je eigenlijk precies wat ik bedoel.
http://www.youtube.com/watch?v=IXlFSAIi3vc
Wanneer je iets naar beneden scrolled onder de video zelf zie je. Delen, favoriet, afspeellijst enz. als je der op klikt, komt er wat nieuwe content bij en wanneer je op een andere klikt, wordt de content vervangen voor de des betreffende knop.
Btw je zegt: Je googled even naar de naam. Maar waar haal je die naam vandaan dan??
Dit kan ideaal met jquery. Wat youtube doet is in combinatie met ajax, maar dit hoeft niet. In principe zet je al je content van de verschillende tabjes al in de broncode, je regelt dan alleen nog met jquery welke je laat zien of verbergt.
Kijk hier maar ff. Je kan zelf dan nog erbij scripten dat je standaard niks laat zien.
(Dit is de oudere versie)
Je vroeg ook nog wat jqeury is. Het is simpel gezegd een javascript library (dus het is geen taal). Ik vind hem ideaal, het is een goede library waar je met relatief weinig en makkelijke code leuke dingen uithaalt.
Gewijzigd op 01/01/1970 01:00:00 door Niek Weevers
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
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
<html>
<head>
<script language="javascript">
function toggle(showHideDiv, switchTextDiv) {
var ele = document.getElementById(showHideDiv);
var text = document.getElementById(switchTextDiv);
if(ele.style.display == "block") {
ele.style.display = "none";
text.innerHTML = "open";
} else {
ele.style.display = "block";
text.innerHTML = "close";
}
}
</script>
</head>
<body>
<a id="myFilter" href="javascript:toggle('Filter','myFilter');" >open</a>
<div id="Filter" style="display: none;">
content</div>
</body>
</html>\
<head>
<script language="javascript">
function toggle(showHideDiv, switchTextDiv) {
var ele = document.getElementById(showHideDiv);
var text = document.getElementById(switchTextDiv);
if(ele.style.display == "block") {
ele.style.display = "none";
text.innerHTML = "open";
} else {
ele.style.display = "block";
text.innerHTML = "close";
}
}
</script>
</head>
<body>
<a id="myFilter" href="javascript:toggle('Filter','myFilter');" >open</a>
<div id="Filter" style="display: none;">
content</div>
</body>
</html>\
Dit is een beetje wat ik bedoel makkelijk maar het werkt goed. Nou zou ik graag alleen 3 van deze links naast elkaar willen. en als de een geopend is dat die sluit wanneer er op een andere link geklikt wordt.
peter schreef op 29.11.2008 15:31:
bedankt voor een reactie maar ik heb eens naar je link gekeken en het is totaal iets anders dan waar ik naar opezoek ben.
Btw je zegt: Je googled even naar de naam. Maar waar haal je die naam vandaan dan??
Btw je zegt: Je googled even naar de naam. Maar waar haal je die naam vandaan dan??
nou, dat filmpje heeft een naam/titel... en die titel heb ik gegoogled
Zorg dus eerst dat je de jquery.js inlaadt.
Daarna maak je de volgende html.
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<ul id="items">
<li>
<a class="dicht" href="#" title="Eerste item">Eerste item</a>
<div>
Content 1e item
</div>
</li>
<li>
<a class="dicht" href="#" title="Tweede item">Tweede item</a>
<div>
Content 2e item
</div>
</li>
<li>
<a class="dicht" href="#" title="Derde item">Derde item</a>
<div>
Content 3e item
</div>
</li>
</ul>
<li>
<a class="dicht" href="#" title="Eerste item">Eerste item</a>
<div>
Content 1e item
</div>
</li>
<li>
<a class="dicht" href="#" title="Tweede item">Tweede item</a>
<div>
Content 2e item
</div>
</li>
<li>
<a class="dicht" href="#" title="Derde item">Derde item</a>
<div>
Content 3e item
</div>
</li>
</ul>
De volgende javascript zet je eronder of in de header
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
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
<script type="text/javascript">
$("#items div").hide();
// Eerste blok is zichtbaar en de link krijgt class=open
$("#items div:first").show();
$("#items a:first").addClass("open");
$("#items a:first").removeClass("dicht");
$("#items a").click( function()
{
if ( $(this).hasClass("open") )
{
$(this).removeClass("open");
$(this).addClass("dicht");
$("div", this.parentNode).hide();
}
else
{
// Alle links met class open, krijgen de class dicht
$("#items a.open").addClass("dicht");
$("#items a.open").removeClass("open");
// Alleen de link waar op is geklikt krijgt de class open
$(this).removeClass("dicht");
$(this).addClass("open");
// Alle blokken worden ingeklapt
$("#items div").hide();
// Betreffende blok wordt uitgeklapt
$("div", this.parentNode).show();
}
});
</script>
$("#items div").hide();
// Eerste blok is zichtbaar en de link krijgt class=open
$("#items div:first").show();
$("#items a:first").addClass("open");
$("#items a:first").removeClass("dicht");
$("#items a").click( function()
{
if ( $(this).hasClass("open") )
{
$(this).removeClass("open");
$(this).addClass("dicht");
$("div", this.parentNode).hide();
}
else
{
// Alle links met class open, krijgen de class dicht
$("#items a.open").addClass("dicht");
$("#items a.open").removeClass("open");
// Alleen de link waar op is geklikt krijgt de class open
$(this).removeClass("dicht");
$(this).addClass("open");
// Alle blokken worden ingeklapt
$("#items div").hide();
// Betreffende blok wordt uitgeklapt
$("div", this.parentNode).show();
}
});
</script>
Dit zorgt ervoor dat standaard de eerste open is en wanneer je een andere open klikt dat degene die open is, weer dicht gaat.
Ook heb ik classes toegevoegd zodat je met css de class open anders kan open dan de class dicht.
Ik heb dit ingeladen http://code.google.com/p/jqueryjs/downloads/detail?name=jquery-1.2.6.min.js
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
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
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Eerste item</title>
<script src="jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$("#items div").hide();
// Eerste blok is zichtbaar en de link krijgt class=open
$("#items div:first").show();
$("#items a:first").addClass("open");
$("#items a:first").removeClass("dicht");
$("#items a").click( function()
{
if ( $(this).hasClass("open") )
{
$(this).removeClass("open");
$(this).addClass("dicht");
$("div", this.parentNode).hide();
}
else
{
// Alle links met class open, krijgen de class dicht
$("#items a.open").addClass("dicht");
$("#items a.open").removeClass("open");
// Alleen de link waar op is geklikt krijgt de class open
$(this).removeClass("dicht");
$(this).addClass("open");
// Alle blokken worden ingeklapt
$("#items div").hide();
// Betreffende blok wordt uitgeklapt
$("div", this.parentNode).show();
}
});
</script>
</head>
<body>
<ul id="items">
<li>
<a class="dicht" href="#" title="Eerste item">Eerste item</a>
<div>
Content 1e item
</div>
</li>
<li>
<a class="dicht" href="#" title="Tweede item">Tweede item</a>
<div>
Content 2e item
</div>
</li>
<li>
<a class="dicht" href="#" title="Derde item">Derde item</a>
<div>
Content 3e item
</div>
</li>
</ul>
</body>
</html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Eerste item</title>
<script src="jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$("#items div").hide();
// Eerste blok is zichtbaar en de link krijgt class=open
$("#items div:first").show();
$("#items a:first").addClass("open");
$("#items a:first").removeClass("dicht");
$("#items a").click( function()
{
if ( $(this).hasClass("open") )
{
$(this).removeClass("open");
$(this).addClass("dicht");
$("div", this.parentNode).hide();
}
else
{
// Alle links met class open, krijgen de class dicht
$("#items a.open").addClass("dicht");
$("#items a.open").removeClass("open");
// Alleen de link waar op is geklikt krijgt de class open
$(this).removeClass("dicht");
$(this).addClass("open");
// Alle blokken worden ingeklapt
$("#items div").hide();
// Betreffende blok wordt uitgeklapt
$("div", this.parentNode).show();
}
});
</script>
</head>
<body>
<ul id="items">
<li>
<a class="dicht" href="#" title="Eerste item">Eerste item</a>
<div>
Content 1e item
</div>
</li>
<li>
<a class="dicht" href="#" title="Tweede item">Tweede item</a>
<div>
Content 2e item
</div>
</li>
<li>
<a class="dicht" href="#" title="Derde item">Derde item</a>
<div>
Content 3e item
</div>
</li>
</ul>
</body>
</html>
Maar dan krijg ik het volgende
Eerste item
Content 1e item
Tweede item
Content 2e item
Derde item
Content 3e item
ik krijg dus alles te zien. doe ik iets fout?
Wat je dan even moet doen is het volgende om je javascript heen zetten
Code (php)
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
<script type="text/javascript">
$(function()
{
//je script die je er nu hebt staan
});
</script>
$(function()
{
//je script die je er nu hebt staan
});
</script>
Dan gebruikt hij dit pas als de pagina is geladen. Wanneer je het script in de html onder je stukje html zet dan hoeft bovenstaande niet
Daaronder zet je de divs neer, waarvan je er dus maar een laat zien.
Met het klikken moet je dus de juiste div aanroepen.
Het script wat je nu hebt gebruikt (die van mij) roept deze div door te kijken naar de div indezelfde li als de link.
Ik heb er vanavond geen tijd meer voor om dit even om te bouwen (de Sint komt he :D)
Als je een beetje door hebt hoe deze jquery in elkaar zit, dan kun je het natuurlijk ook eerst zelf gaan proberen, volgens de volgende structuur
Code (php)
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
<ul class="tabs">
<li><a href="#1" title="Eerste item">Eerste item</a></li>
<li><a href="#2" title="Eerste item">Eerste item</a></li>
<li><a href="#3" title="Eerste item">Eerste item</a></li>
</ul>
<div id="1"></div>
<div id="2"></div>
<div id="3"></div>
<li><a href="#1" title="Eerste item">Eerste item</a></li>
<li><a href="#2" title="Eerste item">Eerste item</a></li>
<li><a href="#3" title="Eerste item">Eerste item</a></li>
</ul>
<div id="1"></div>
<div id="2"></div>
<div id="3"></div>
Of kijk ff op http://www.degraafschap.nl/ . Daar is dit ook zo toegepast.
Gewijzigd op 01/01/1970 01:00:00 door Niek Weevers
Dus alles binnen de <script> </script> tag.
Code (php)
1
2
3
4
5
6
2
3
4
5
6
$(document).ready(function() {
// Hier je javascript code
#
});
// Hier je javascript code
#
});
Zie: http://snipplr.com/view/3739/jquery-showhide/
Als voorbeeld.
En hier nog een mooie tab:
http://docs.jquery.com/UI/Tabs
De code
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
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
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<link rel="stylesheet" href="http://dev.jquery.com/view/tags/ui/latest/themes/flora/flora.all.css" type="text/css" media="screen" title="Flora (Default)">
<script type="text/javascript" src="http://dev.jquery.com/view/tags/ui/latest/ui/ui.core.js"></script>
<script type="text/javascript" src="http://dev.jquery.com/view/tags/ui/latest/ui/ui.tabs.js"></script>
<script>
$(document).ready(function(){
$("#example > ul").tabs();
});
</script>
</head>
<body>
<div id="example" class="flora">
<ul>
<li><a href="#fragment-1"><span>One</span></a></li>
<li><a href="#fragment-2"><span>Two</span></a></li>
<li><a href="#fragment-3"><span>Three</span></a></li>
</ul>
<div id="fragment-1">
<p>First tab is active by default:</p>
<pre><code>$('#example > ul').tabs();</code></pre>
</div>
<div id="fragment-2">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
</div>
<div id="fragment-3">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
</div>
</div>
</body>
</html>
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<link rel="stylesheet" href="http://dev.jquery.com/view/tags/ui/latest/themes/flora/flora.all.css" type="text/css" media="screen" title="Flora (Default)">
<script type="text/javascript" src="http://dev.jquery.com/view/tags/ui/latest/ui/ui.core.js"></script>
<script type="text/javascript" src="http://dev.jquery.com/view/tags/ui/latest/ui/ui.tabs.js"></script>
<script>
$(document).ready(function(){
$("#example > ul").tabs();
});
</script>
</head>
<body>
<div id="example" class="flora">
<ul>
<li><a href="#fragment-1"><span>One</span></a></li>
<li><a href="#fragment-2"><span>Two</span></a></li>
<li><a href="#fragment-3"><span>Three</span></a></li>
</ul>
<div id="fragment-1">
<p>First tab is active by default:</p>
<pre><code>$('#example > ul').tabs();</code></pre>
</div>
<div id="fragment-2">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
</div>
<div id="fragment-3">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
</div>
</div>
</body>
</html>
Je ziet 3 links:
Code (php)
1
2
3
2
3
<li><a href="#fragment-1"><span>One</span></a></li>
<li><a href="#fragment-2"><span>Two</span></a></li>
<li><a href="#fragment-3"><span>Three</span></a></li>
<li><a href="#fragment-2"><span>Two</span></a></li>
<li><a href="#fragment-3"><span>Three</span></a></li>
In de href staat de locatie. Deze locatie (achter de #) wordt de div's die daaronder staan bedoelt.
Code (php)
1
<div id="fragment-1">
Gewoon dezelfde naam. Makkelijker kan niet.