Javascript Tabs-systeem

Door Toby hinloopen, 13 jaar geleden, 4.326x bekeken

Een javascript-class om dynamisch tabs toe te voegen/ te verwijderen in een webpagina.
Is mijn 1e javascript object.

Werking:

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
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>


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)
PHP script in nieuw venster Selecteer het PHP script
1
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;
}


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

  1. javascript-tabssysteem

 

Er zijn 7 reacties op 'Javascript tabssysteem'

PHP hulp
PHP hulp
0 seconden vanaf nu
 

Gesponsorde koppelingen
Tom K
Tom K
13 jaar geleden
 
0 +1 -0 -1
zet het eens tussen de code tags, en het ziet het opzich goed uit, misschien iets met ajax doen?
Toby hinloopen
toby hinloopen
13 jaar geleden
 
0 +1 -0 -1
wat heeft een tab-systeem met ajax te maken?

Code (php)
PHP script in nieuw venster Selecteer het PHP script
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
<?
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
PHP erik
PHP erik
13 jaar geleden
 
0 +1 -0 -1
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.
Pieter van Linschoten
Pieter van Linschoten
13 jaar geleden
 
0 +1 -0 -1
Ik heb een ander script, gebruik gewoon de standaard functie jah();

kijk maar

Edit:
Niet standaard natuurlijk, maar wel heel bekend
Toby hinloopen
toby hinloopen
13 jaar geleden
 
0 +1 -0 -1
@PHPerik:
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.
Pim Vernooij
Pim Vernooij
13 jaar geleden
 
0 +1 -0 -1
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/
PHP hulp
PHP hulp
0 seconden vanaf nu
 

Gesponsorde koppelingen
Toby hinloopen
toby hinloopen
13 jaar geleden
 
0 +1 -0 -1
ik begin ook maar mootools te gebruiken :P
is toch best handig.

Om te reageren heb je een account nodig en je moet ingelogd zijn.

Inhoudsopgave

  1. javascript-tabssysteem

Labels

  • Geen tags toegevoegd.

Navigatie

 
 

Om de gebruiksvriendelijkheid van onze website en diensten te optimaliseren maken wij gebruik van cookies. Deze cookies gebruiken wij voor functionaliteiten, analytische gegevens en marketing doeleinden. U vindt meer informatie in onze privacy statement.