javascript-tabssysteem
Gesponsorde koppelingen
PHP script bestanden
document heeft
Code (php)
1
<? en ?>
het is dus GEEN php document, maar een JAVASCRIPT document.
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
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
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
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
<?
function tab_container(element_id) {
var current_tab_container = this;
this.element = document.getElementById(element_id);
if(!this.element) {
throw 'tab_container: element "'+element_id+'" does not exist.';
return false;
}
this.active_tab = -1;
this.tabs = new Array();
this.local_id = element_id;
this.element.innerHTML = '<div class="tab_buttons" id="tab_buttons_'+this.local_id+'"></div><div class="tab_container" id="tab_container_'+this.local_id+'"></div>';
this.buttons = document.getElementById('tab_buttons_'+this.local_id);
this.content = document.getElementById('tab_container_'+this.local_id);
this.on_new_tab = function() {return true;}//wat te doen wanneer er een nieuwe tab wordt gemaakt
this.tab = function(title,content,auto_focus) {
var current_tab = this;
//functions
this.focus = function() {
if(current_tab_container.active_tab!=-1) {
if(!current_tab_container.tabs[current_tab_container.active_tab]) {
throw 'tab_container.tab.focus: tab "'+current_tab_container.active_tab+'" does not exist.';
}
current_tab_container.tabs[current_tab_container.active_tab].blur();
}
if(current_tab_container.active_tab!=-1) {
return false;
}
if(current_tab.on_focus()===false) {//wanneer "return false" gebruikt is in "on_focus"
return false;//voorkom het activeren van de tab.
}
current_tab.button_element.className = 'tab_button_active';
current_tab.content_element.className = 'tab_content_active';
current_tab_container.active_tab = current_tab.local_id;
}
this.blur = function() {
if(current_tab.on_blur()===false) {//wanneer "return false" gebruikt is in "on_focus"
return false;//voorkom het activeren van de tab.
}
current_tab.button_element.className = 'tab_button_inactive';
current_tab.content_element.className = 'tab_content_inactive';
current_tab_container.active_tab = -1;
}
this.destroy = function() {
if(current_tab.on_destroy()===false) {//wanneer "return false" gebruikt is in "on_focus"
return false;//voorkom het activeren van de tab.
}
if(current_tab.button_element) {
current_tab_container.buttons.removeChild(current_tab.button_element);
}
if(current_tab.content_element) {
current_tab_container.content.removeChild(current_tab.content_element);
}
current_tab_container.tabs[current_tab.local_id] = null;
}
//events
this.on_focus = function() {return true;}
this.on_blur = function() {return true;}
this.on_destroy = function() {return true;}
//constructors and variables
if(!title) {
throw 'tab_container.tab: first argument "title" required.';
return false;
}
if(!content) {
var content = '';
}
title = title.toString();
content = content.toString();
if(auto_focus===undefined || auto_focus===null) {//stel auto_focus in als "true" wanneer deze niet is ingesteld.
auto_focus = true;
}
auto_focus = !!auto_focus;//maak een BOOL van auto_focus
this.local_id = 0;//maak een id aan voor de nieuwe tab.
while(current_tab_container.tabs[this.local_id]) {//loop door totdat er een vrij id gevonden is.
this.local_id++;
}
current_tab_container.tabs[this.local_id] = this;
if(current_tab_container.on_new_tab(this.local_id)===false) {//wanneer "on_new_tab" een return-false heeft...
return false;//voorkom het maken van een nieuwe tab.
}
this.button_element = document.createElement('button');
this.button_element.className = 'tab_button_inactive';
this.button_element.id = 'tab_button_' + this.local_id;
this.button_element.onclick = this.focus;
this.button_element.innerHTML = title;
current_tab_container.buttons.appendChild(this.button_element);
this.content_element = document.createElement('div');
this.content_element.className = 'tab_content_inactive';
this.content_element.id = 'tab_content_' + this.local_id;
this.content_element.innerHTML = content;
current_tab_container.content.appendChild(this.content_element);
if(auto_focus || current_tab_container.active_tab==-1) {
this.focus();
}
}
}
?>
function tab_container(element_id) {
var current_tab_container = this;
this.element = document.getElementById(element_id);
if(!this.element) {
throw 'tab_container: element "'+element_id+'" does not exist.';
return false;
}
this.active_tab = -1;
this.tabs = new Array();
this.local_id = element_id;
this.element.innerHTML = '<div class="tab_buttons" id="tab_buttons_'+this.local_id+'"></div><div class="tab_container" id="tab_container_'+this.local_id+'"></div>';
this.buttons = document.getElementById('tab_buttons_'+this.local_id);
this.content = document.getElementById('tab_container_'+this.local_id);
this.on_new_tab = function() {return true;}//wat te doen wanneer er een nieuwe tab wordt gemaakt
this.tab = function(title,content,auto_focus) {
var current_tab = this;
//functions
this.focus = function() {
if(current_tab_container.active_tab!=-1) {
if(!current_tab_container.tabs[current_tab_container.active_tab]) {
throw 'tab_container.tab.focus: tab "'+current_tab_container.active_tab+'" does not exist.';
}
current_tab_container.tabs[current_tab_container.active_tab].blur();
}
if(current_tab_container.active_tab!=-1) {
return false;
}
if(current_tab.on_focus()===false) {//wanneer "return false" gebruikt is in "on_focus"
return false;//voorkom het activeren van de tab.
}
current_tab.button_element.className = 'tab_button_active';
current_tab.content_element.className = 'tab_content_active';
current_tab_container.active_tab = current_tab.local_id;
}
this.blur = function() {
if(current_tab.on_blur()===false) {//wanneer "return false" gebruikt is in "on_focus"
return false;//voorkom het activeren van de tab.
}
current_tab.button_element.className = 'tab_button_inactive';
current_tab.content_element.className = 'tab_content_inactive';
current_tab_container.active_tab = -1;
}
this.destroy = function() {
if(current_tab.on_destroy()===false) {//wanneer "return false" gebruikt is in "on_focus"
return false;//voorkom het activeren van de tab.
}
if(current_tab.button_element) {
current_tab_container.buttons.removeChild(current_tab.button_element);
}
if(current_tab.content_element) {
current_tab_container.content.removeChild(current_tab.content_element);
}
current_tab_container.tabs[current_tab.local_id] = null;
}
//events
this.on_focus = function() {return true;}
this.on_blur = function() {return true;}
this.on_destroy = function() {return true;}
//constructors and variables
if(!title) {
throw 'tab_container.tab: first argument "title" required.';
return false;
}
if(!content) {
var content = '';
}
title = title.toString();
content = content.toString();
if(auto_focus===undefined || auto_focus===null) {//stel auto_focus in als "true" wanneer deze niet is ingesteld.
auto_focus = true;
}
auto_focus = !!auto_focus;//maak een BOOL van auto_focus
this.local_id = 0;//maak een id aan voor de nieuwe tab.
while(current_tab_container.tabs[this.local_id]) {//loop door totdat er een vrij id gevonden is.
this.local_id++;
}
current_tab_container.tabs[this.local_id] = this;
if(current_tab_container.on_new_tab(this.local_id)===false) {//wanneer "on_new_tab" een return-false heeft...
return false;//voorkom het maken van een nieuwe tab.
}
this.button_element = document.createElement('button');
this.button_element.className = 'tab_button_inactive';
this.button_element.id = 'tab_button_' + this.local_id;
this.button_element.onclick = this.focus;
this.button_element.innerHTML = title;
current_tab_container.buttons.appendChild(this.button_element);
this.content_element = document.createElement('div');
this.content_element.className = 'tab_content_inactive';
this.content_element.id = 'tab_content_' + this.local_id;
this.content_element.innerHTML = content;
current_tab_container.content.appendChild(this.content_element);
if(auto_focus || current_tab_container.active_tab==-1) {
this.focus();
}
}
}
?>