Javascript Tabs-systeem
Door Toby hinloopen, 19 jaar geleden, 7.713x bekeken
Een javascript-class om dynamisch tabs toe te voegen/ te verwijderen in een webpagina.
Is mijn 1e javascript object.
Werking:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>PHP emulator</title>
<link rel="stylesheet" type="text/css" media="screen" href="css/ui.tabs.css" />
<script type="text/javascript" src="js/ui.tabs.js"></script>
</head>
<body>
<div id="texteditor_tabs"></div>
<script><?/* <<< voor de syntax-highlighting */
var texteditors = new tab_container('texteditor_tabs');
var tab1 = new texteditors.tab('tab_titel1','tab1 inhoud');
var tab2 = new texteditors.tab('tab_titel2','tab2 inhoud');
/*voor de syntax highlighting >>> */?></script>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>PHP emulator</title>
<link rel="stylesheet" type="text/css" media="screen" href="css/ui.tabs.css" />
<script type="text/javascript" src="js/ui.tabs.js"></script>
</head>
<body>
<div id="texteditor_tabs"></div>
<script><?/* <<< voor de syntax-highlighting */
var texteditors = new tab_container('texteditor_tabs');
var tab1 = new texteditors.tab('tab_titel1','tab1 inhoud');
var tab2 = new texteditors.tab('tab_titel2','tab2 inhoud');
/*voor de syntax highlighting >>> */?></script>
</body>
</html>
Eerst wordt er een tab_container aangemaakt in het block-element (<div>) met als id "texteditor_tabs".
Daarin worden 2 tabs aangemaakt met als titel "tab_titel1" en "tab_titel2" en met als inhoud "tab1 inhoud" en "tab2 inhoud".
Je kan onbeperkt aantal tabs toevoegen.
Tab Functies:
-tab.blur();
functie die een tab de-activeert en verbergt. Wordt automatisch gestart wanneer een andere tab focus krijgt.
-tab.focus();
functie die huidige tag de-activeert en de betreffende tab activeert.
-tab.destroy();
functie die tab verwijderd.
Tab Events:
-tab.on_blur = function() {/*doe iets*/};
event bij het de-activeren/blurren van de betreffende tab.
-tab.on_focus = function() {/*doe iets*/};
event bij het activeren/focusen van de betreffende tab.
-tab.on_destroy = function(){/*doe iets*/};
event bij het verwijderen van de betreffende tab.
Hint:
Je kan via events bepaalde acties voorkomen. Zo kan je voorkomen dat een tab gesloten wordt door bij de event "return false" te gebruiken. Voorbeeld:
Code (php)
1
2
3
4
5
6
7
2
3
4
5
6
7
var texteditors = new tab_container('tab_container_element');
var tab1 = new texteditors.tab('tab_titel1','tab1 inhoud');
var tab2 = new texteditors.tab('tab_titel2','tab2 inhoud');
tab2.on_blur = function() {
alert('can\'t focus any other tab. Too bad');
return false;
}
var tab1 = new texteditors.tab('tab_titel1','tab1 inhoud');
var tab2 = new texteditors.tab('tab_titel2','tab2 inhoud');
tab2.on_blur = function() {
alert('can\'t focus any other tab. Too bad');
return false;
}
Wanneer men de focus van tab2 probeert te blurren, zal er een popup komen en zal de focus op tab2 blijven.
Hetzelfde kan ook met on_destroy en on_focus.
Hopelijk kan je er wat mee en is mijn uitleg een beetje begrijpbaar.
Voorbeeld: http://www.levensweg.net/php_emulator/
Gesponsorde koppelingen
PHP script bestanden
Er zijn 7 reacties op 'Javascript tabssysteem'
0 
-0 
-0
zet het eens tussen de code tags, en het ziet het opzich goed uit, misschien iets met ajax doen?
0 -0
-0
wat heeft een tab-systeem met ajax te maken?
Veel plezier ermee. (mijn ajax script)
Is al wel 1 van mijn oudste scripts dus is wat rommelig. Wordt eens tijd dat ik die eens ga vernieuwen... :P
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
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
<?
var xmlHttp=new Array();
function ajax(script,action,query,on_succes,on_error){
try {
var a=0;
while(xmlHttp[a]!=null) {
a++;
}
if (window.XMLHttpRequest) {
xmlHttp[a]=new XMLHttpRequest();
} else if (window.ActiveXObject) {
xmlHttp[a]=new ActiveXObject('Microsoft.XMLHTTP');
}
if(xmlHttp[a]!=null) {
xmlHttp[a].onreadystatechange=function() {
if(xmlHttp[a] && xmlHttp[a].readyState==4) {
//try {
eval(xmlHttp[a].responseText);
/*} catch(e) {
if(on_error) {
try {
eval(on_error);
} catch(e) {
alert('FATAL ERROR:\n\nERROR CATCHING FAILED: '+e.description+'\n\nIn other words:\nA piece of code which should handle the error failed and another error occurred while solving another error.');
}
} else {
alert('CORRUPT RESPONSETEXT:\n\n'+xmlHttp[a].responseText+'\n\nError: '+e.description);
}
}*/
if(on_succes) {
try {
eval(on_succes);
} catch(e) {
alert('ERROR EXECUTING "ON_SUCCES" STATEMENT.');
}
}
xmlHttp[a]=null;
}
}
var url = 'ajax/';
if(script) {url+=script+'.php';}
if(action) {url+='?a='+action;}
if(query) {
xmlHttp[a].open('POST',url,true);
xmlHttp[a].setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xmlHttp[a].send(query);
} else {
xmlHttp[a].open('GET',url,true);
xmlHttp[a].send(null);
}
}
} catch(e) {
alert('FATAL ERROR:\n\naJaX communication failed:\nplease update your browser. Error details:\n\n'+e.description);
}
}
?>
var xmlHttp=new Array();
function ajax(script,action,query,on_succes,on_error){
try {
var a=0;
while(xmlHttp[a]!=null) {
a++;
}
if (window.XMLHttpRequest) {
xmlHttp[a]=new XMLHttpRequest();
} else if (window.ActiveXObject) {
xmlHttp[a]=new ActiveXObject('Microsoft.XMLHTTP');
}
if(xmlHttp[a]!=null) {
xmlHttp[a].onreadystatechange=function() {
if(xmlHttp[a] && xmlHttp[a].readyState==4) {
//try {
eval(xmlHttp[a].responseText);
/*} catch(e) {
if(on_error) {
try {
eval(on_error);
} catch(e) {
alert('FATAL ERROR:\n\nERROR CATCHING FAILED: '+e.description+'\n\nIn other words:\nA piece of code which should handle the error failed and another error occurred while solving another error.');
}
} else {
alert('CORRUPT RESPONSETEXT:\n\n'+xmlHttp[a].responseText+'\n\nError: '+e.description);
}
}*/
if(on_succes) {
try {
eval(on_succes);
} catch(e) {
alert('ERROR EXECUTING "ON_SUCCES" STATEMENT.');
}
}
xmlHttp[a]=null;
}
}
var url = 'ajax/';
if(script) {url+=script+'.php';}
if(action) {url+='?a='+action;}
if(query) {
xmlHttp[a].open('POST',url,true);
xmlHttp[a].setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xmlHttp[a].send(query);
} else {
xmlHttp[a].open('GET',url,true);
xmlHttp[a].send(null);
}
}
} catch(e) {
alert('FATAL ERROR:\n\naJaX communication failed:\nplease update your browser. Error details:\n\n'+e.description);
}
}
?>
Veel plezier ermee. (mijn ajax script)
Is al wel 1 van mijn oudste scripts dus is wat rommelig. Wordt eens tijd dat ik die eens ga vernieuwen... :P
0 -0
-0
Hmm op zich wel een leuk script, ik zie alleen niet helemaal in waarom je dit zou verkiezen boven iets als jQuery, Dojo of YUI. Daarbij heb je iets dat 100% gedocumenteerd, stijlbaar, schaalbaar en makkelijk in gebruik is.
Bij Prototype of Mootools kan ik me nog voorstellen dat het te traag of te groot is.
Bij Prototype of Mootools kan ik me nog voorstellen dat het te traag of te groot is.
0 -0
-0
Ik heb een ander script, gebruik gewoon de standaard functie jah();
kijk maar
kijk maar
Edit:
Niet standaard natuurlijk, maar wel heel bekend
0 -0
-0
@PHPerik:
IK kies dit omdat ik het zelf gemaakt heb :P
waarom het een ander zou gebruiken over mootools o.i.d.... geen flauw idee. Enige rede die ik kan bedenken is dat men misschien geen compleet framework wilt voor alleen een tab-systeem.
Quote:
ik zie alleen niet helemaal in waarom je dit zou verkiezen boven iets als jQuery, Dojo of YUI.
IK kies dit omdat ik het zelf gemaakt heb :P
waarom het een ander zou gebruiken over mootools o.i.d.... geen flauw idee. Enige rede die ik kan bedenken is dat men misschien geen compleet framework wilt voor alleen een tab-systeem.
0 -0
-0
PHPErik:
Bij Prototype of Mootools kan ik me nog voorstellen dat het te traag of te groot is.
Check aub onderstaande URL ff. MooTools, Dojo en jQuery ontlopen elkaar niet zoveel qua performance. http://blog.creonfx.com/javascript/mootools-vs-jquery-vs-prototype-vs-yui-vs-dojo-comparison-revised
En als je toch bezig bent, dan is deze ook wel interessant:
http://www.clientcide.com/best-practices/jquery-and-the-ajax-experience-programming-to-the-pattern-and-what-really-makes-one-framework-different-from-another/
Om te reageren heb je een account nodig en je moet ingelogd zijn.
PHP hulp
0 seconden vanaf nu