Javascript Tabs-systeem
Een javascript-class om dynamisch tabs toe te voegen/ te verwijderen in een webpagina. Is mijn 1e javascript object. Werking: Eerst wordt er een tab_container aangemaakt in het block-element () 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: 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.
document heeft <? en ?> voor de syntax highlighting.
het is dus GEEN php document, maar een JAVASCRIPT document.
[code]<?
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();
}
}
}
?>[/code]
Reacties
0