JQUERY UI tabs

Maljuna Kris · 11-10-2012 11:12:37

Saluton,
Une petite précision quand vous utilisez le plugin "Tabs" de JQUERY UI qui gère l'accès à différentes <div> par des onglets.
Vous définissez d'abord vos onglets dans des <li></li> d'un <ul></ul> puis chacune des <div> concernées.
Dans chaque <li></li> il doit y avoir une balise <a> dont l'attribut href contient une ancre vers l'id de la <div> ciblée.
Mais l'ensemble des <div> et l'<ul> doivent, en outre, être dans le même conteneur.
Ne pas avoir respecté cet impératif vient de me coûter des heures de doute et d'incompréhension.
Voici un exemple

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html lang="eo">

    <head>

        <meta charset="utf-8">

        <title>jQuery UI Example Page</title>

        <link rel="StyleSheet" type="text/css" href="../../JQUERYUI/css/ui-lightness/jquery-ui-1.9.0.custom.min.css"/>

        <script type="text/javascript" src="../../JQUERYUI/js/jquery-1.8.2.js"></script>

        <script type="text/javascript" src="../../JQUERYUI/js/jquery-ui-1.9.0.custom.min.js"></script>

        <script>

        $(function() {

            $( "#tabs" ).tabs();

            });

        </script>

        <style>

        body{

            font: 62.5% "Trebuchet MS", sans-serif;

            margin: 50px;

            }

        .demoHeaders {

                margin-top: 2em;

                }

        </style>

    </head>

    <body>

        <h1>Bonvenon al jQuery UI!</h1>

        <h1>VIAJ KOMPONENTOJ :</h1>

        <h2 class="demoHeaders">Ongletoj</h2>

        <div id="tabs">

            <ul>

                <li><a href="#tabs-1">Unua</a></li>

                <li><a href="#tabs-2">Dua</a></li>

                <li><a href="#tabs-3">Tria</a></li>

                <li><a href="#tabs-4">Kvara</a></li>

                <li><a href="#tabs-5">Kvina</a></li>

                <li><a href="#tabs-6">Sesa</a></li>

                <li><a href="#tabs-7">Sepa</a></li>

            </ul>

            <div id="tabs-1">Nia civilizacio ne plu eksistas : giganta arbaro etendiĝas longo de duonEuropo. Iu ermito kaj sia disĉiplo vojiras al Parizajn ruinojn. Interesega, mirigata, la leganto eniĝas malantaŭe ili tiun strangegan arbaron, plenegan je grandegaj termitoj kaj karnomanĝaj floroj, je defalintaj herooj kaj sangaj milicioj... Oni eniras La Iskambarbaron kaj oni eliras ĝin aliforma por eterne.</div>

            <div id="tabs-2">Signoj anoncas al la homo sian trapason al pli klara vivo, aŭtentikaj mesaĝoj el estonto kiujn oni necesas mediti, lumigi per eklumetoj de la intuicio, interpreti tra sinsekvaj metaforoj por trafi ĝian sekretan sencon kaj esti, samtempe malpacienca kaj kvietigita, atenta pri fataleco. Kaj jaroj poste, kiam It'van, en lia memoro retrovonte tiun tagon, provos eltrovi tiujn atentigojn, li pensos pri la fenikoptamoroj flugarado kiun li ekvidis ĉi-tiu mateno, en sennube ĉielo, tiam li eliris la Smeralda valo fuorteton.</div>

            <div id="tabs-3">« Tio reekas ! » diri al si Evaristo ekvidante la ĵetstangeton pinte enfiskiĝi en la teron kaj tremi tiel se la sago volus dikti ĝian efekton. Jes, « tio » reekis : de antaŭ tri monatoj ke ili forlasis la urbon kaj la posedaĵoj de la Populara Estraro, oni atakis ilin dekduafoje. Ĝenerale « tio » bone finiĝis, dank'al la Fandisto bondona influo kaj la impono ke li ne malfruis ekzerci sur la atakantoj menso. Jes, sed se ili estus surdaj, ekzemple ? Aŭ se ili parolus nekonitan lingvon ? Tiel angoriĝis Evaristo. Tial li abupte diris al sian kunulon iele nervoza :

-Majstro, kion necesas pensi pri tiu sago ? Li petis. Ĉu oni provas murdi nin antaŭ ĉiu konversado ? Ĉu mi devas elingigi kaj svingi mian spadon ?

-Ne timu nenion, monaĥeto, diris lin la Fandisto. Antastaŭ persistege laboru eltirante vian animon el la dika ingo kie ĝi duondormas. Fajrelĵetigu ĝin ekstere. Dumvoje la arĥipelagojn, ne estas veraj danĝeroj sed proviloj per kiuj forĝiĝas la volo. Tiele…

-Ho ! Rigardu, Majstro ! ekkriis Evaristo.</div>

            <div id="tabs-4">Tangi ne rekonis tuj la Fandiston, aŭ pli ĝuste ne volis rekoni lin. La vaga saĝulo partoprenis laŭ li en preskaŭ mortinta mondo, estinteco kiun li deziris forgesi, epoko el sia vivo kiam li pasie kredis je la arkipelagoj kaj prepariĝis por antingi ilin. Kaj poste iu tago lian okuloj malfermiĝis. Li komprenis ke tiuj insuloj nur estis alloga fatamorgano, mensogo kiu la angula realo zorgis pri detrui. Tiam li fuĝis. Li turnis la dorson al liaj dek jaroj da junaĝo perdita kaj alvenis ĉi-tie, senforta kaj malsatega, sed ĉefe malsatega pri agado. De kiom da tempo jam ? Li eĉ ne volis plu kalkuli : jardekoj, li diris. Ĉiuokaze, li sukcesis lian entreprenon. Kiam li ekaperis en la Smeralda valo, ĝiaj loĝantoj estis duonsovaĝaj, ili vivis pluke kaj ĉase. Oni povus konfuzi ilin kun la arbaro kreitaĵoj, tiom ili estis malsategantaj kaj ŝtelaj, ekfrenezaj per krueleco eksaltoj sed ĝenerale timemaj kaj kiuj forkuris ekde la unua minaco. Ili sininterbatalis, helpe de cerbatanoj kiujn malfacile tenis rekte iliaj febraj manoj.</div>

            <div id="tabs-5">Li sciis paroli al ili, li kvietiĝis ilin kaj arigis ilin sub lia standardo. Unue li fiksi ilin al la grundo, trudpelante ilin por tiel diri al terkultivado. Sekve li varbis iujn militulojn, dizertintojn aŭ banditojn, per kiuj li okazigis sekurecon por la Smeraldanoj. Post multaj bataloj, il finiĝis per disvenki la rabistoj tribojn enradikitajn en la savano. Ekde iam, starigita la paco, la valon prosperis kaj estis ĉiumatene Tangi plezuro iris flanke la monteto, inspekti la terasaj rizejoj kie la irigacio estis tiel klere organizita ke klara akvo sajnis fonti el ĉie. Viroj kaj virinoj, laboremaj kaj kantemaj formikoj, rikoltis aŭ priklis. Aliaj, apud la rivero, sin fordonis al senŝeligo dum en la vilaĝo taĉmentoj stringis la rizon en zorge faritaj pakegoj. Karavanoj envojigis ĝin sekve forege ĝis la florantaj metiistoj komunaĵoj el Rejnlando el kie ili revenis monatoj malfrue kun la ĉaroj plenŝtopiotaj kun objktoj manufakturitaj, teksaĵoj el Treviri, parfumoj el Kolonjo, mebloj el Duseldorfo.</div>

            <div id="tabs-6">Jes, Tanguy venkis. Li trudis la ĥaosan naturon submetiĝi al lian voloj; li superis ĝin. Li aliigis senordan spacon, malriĉan grundon kondanitan por veprejiĝi en ordena kaj harmonia loko kie la bela homa planto povis ekflori. Kaj li-mem, la antaŭa junulon, maldika kaj febra, kiu vagis sonĝe en la Marseljon stratoj, aliformiĝis. Sufiĉis al li nun sin rigardi en spegulo por konstati ĝin. Li iĝis kolosa maljunulo kun tufa blanka hararaĉo, kaj kun tiel nedifektiblaj ŝultroj le li kapablis dorsenfali bubon nur korne kaptitan. La longa cikatro kiu bridis lian nazon kaj partigist liajn lipojn en kvara ŝvelajoj, tute ne malnobligi lian aspekton, ankoraŭ plitimigigis lin.</div>

            <div id="tabs-7">Kiom malsamis al la Fandisto ! Tiu ne ŝanĝis kaj se li estis nun falta kiel maljuna pomo, li estis ankoraŭ tiel malfortika, magrega kaj kurbema per la plej malgranda skuo. Tiu kiu mirigis Tangi, kiu eĉ skandalis lin (ĉar li malaprobis ke iun tiele persistis erari), estis retrovi lin tiel ideisto kiel en la estinteco, tiel kroĉigita al siaj juneco sonĝoj, al siaj arkipelagoj ĥimeroj kiuj antaŭlonge formis, multe pli ol la lakto aŭ la karno, ilian tagan nutraĉon. Ĉar ili malmute manĝis en la tempoj de ilia pensema adoleskeco ! Multe okazis ke ili dormiĝis ventrovaka, la spirito digistante iun bonegan koncepton.</div>

        </div>

    </body>

</html>

Ici, le conteneur est la <div> d'id="tabs".
Bien sûr, vous adapterez, les href des link à votre configuration.
Amike
(pour les petits curieux, les textes des <div> sont extraits d'une traduction libre, en espéranto bien sûr (what else), de l'ouvrage de Christian Charrière "la Forêt d'Iscambe" par votre serviteur.)

Pierrot · 11-10-2012 12:17:21

pas très dynamique tout çà
on peut optimiser

q++

Maljuna Kris · 11-10-2012 15:41:24

Pierrot a écrit :

pas très dynamique tout çà
on peut optimiser

Ne te gêne surtout pas, mon Pierrot.

Pierrot · 11-10-2012 18:54:16

pas de problème

fichier testtab.php

<?php

    /*--- à changer si néccessaire ----*/

?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[url]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd[/url]">

<html lang="eo">

    <head>

        <meta charset="utf-8">

            <title>jQuery UI Example Page</title>

            <link rel="stylesheet" type="text/css" href="/css/jquery-ui.css"></link>

            <script type="text/javascript" src="/js/jquery-1.7.1.min.js"></script>

            <script type="text/javascript" src="/js/jquery-ui.min.js"></script>

            <script>

                $(document).ready(function() {

                    $( "#tabs" ).tabs({

                        create : function(){

                            $('#tabs-1').append($.ajax({

                                url : 'tabs.php?tab=1',

                                async: false,

                                success: function(){

                                    // alert('tabs is loaded');

                                }    

                            }).responseText)

                        },

                        select : function(event, ui){

                            var ind = parseInt(ui.index)+1;

                            $('#tabs-'+ ind).empty().append($.ajax({

                                url : 'tabs.php?tab='+ ind,

                                async: false,

                                success: function(){

                                    // alert('tabs is loaded');

                                }    

                            }).responseText)

                        }

                    });

                });

            </script>

            <style>

                body{

                    font: 62.5% "Trebuchet MS", sans-serif;

                    margin: 50px;

                }

                .demoHeaders {

                    margin-top: 2em;

                }

            </style>

    </head>

    <body>

        <h1>Bonvenon al jQuery UI!</h1>

        <h1>VIAJ KOMPONENTOJ :</h1>

        <h2 class="demoHeaders">Ongletoj</h2>

        <div id="tabs">

            <ul>

                <li><a href="#tabs-1">Unua</a></li>

                <li><a href="#tabs-2">Dua</a></li>

                <li><a href="#tabs-3">Tria</a></li>

                <li><a href="#tabs-4">Kvara</a></li>

                <li><a href="#tabs-5">Kvina</a></li>

                <li><a href="#tabs-6">Sesa</a></li>

                <li><a href="#tabs-7">Sepa</a></li>

            </ul>

            <div id="tabs-1"></div>

            <div id="tabs-2"></div>

            <div id="tabs-3"></div>

            <div id="tabs-4"></div>

            <div id="tabs-5"></div>

            <div id="tabs-6"></div>

            <div id="tabs-7"></div>

        </div>

    </body>

</html>

fichier tabs.php

<?php

    $tab = isset($_GET['tab']) ? $_GET['tab'] : 1;

    //$var = array();

    $var[1] = <<<EOM

        Nia civilizacio ne plu eksistas : giganta arbaro etendiĝas longo de duonEuropo. Iu ermito kaj sia disĉiplo vojiras al Parizajn ruinojn. 

        Interesega, mirigata, la leganto eniĝas malantaŭe ili tiun strangegan arbaron, plenegan je grandegaj termitoj kaj karnomanĝaj floroj, 

        je defalintaj herooj kaj sangaj milicioj... Oni eniras La Iskambarbaron kaj oni eliras ĝin aliforma por eterne.';

EOM;

    $var[2] = <<<EOM

        Signoj anoncas al la homo sian trapason al pli klara vivo, aŭtentikaj mesaĝoj el estonto kiujn oni necesas mediti, 

        lumigi per eklumetoj de la intuicio, interpreti tra sinsekvaj metaforoj por trafi ĝian sekretan sencon kaj esti, 

        samtempe malpacienca kaj kvietigita, atenta pri fataleco. Kaj jaroj poste, kiam It'van, en lia memoro retrovonte tiun tagon, 

        provos eltrovi tiujn atentigojn, li pensos pri la fenikoptamoroj flugarado kiun li ekvidis ĉi-tiu mateno, 

        en sennube ĉielo, tiam li eliris la Smeralda valo fuorteton.

EOM;

    $var[3] = <<<EOM

        « Tio reekas ! » diri al si Evaristo ekvidante la ĵetstangeton pinte enfiskiĝi en la teron kaj tremi tiel se la sago volus dikti ĝian efekton. 

            Jes, « tio » reekis : de antaŭ tri monatoj ke ili forlasis la urbon kaj la posedaĵoj de la Populara Estraro, 

            oni atakis ilin dekduafoje. Ĝenerale « tio » bone finiĝis, dank'al la Fandisto bondona influo kaj la impono 

            ke li ne malfruis ekzerci sur la atakantoj menso. Jes, sed se ili estus surdaj, ekzemple ? 

            Aŭ se ili parolus nekonitan lingvon ? Tiel angoriĝis Evaristo. Tial li abupte diris al sian kunulon iele nervoza :

            -Majstro, kion necesas pensi pri tiu sago ? Li petis. Ĉu oni provas murdi nin antaŭ ĉiu konversado ? 

            Ĉu mi devas elingigi kaj svingi mian spadon ?

            -Ne timu nenion, monaĥeto, diris lin la Fandisto. Antastaŭ persistege laboru eltirante vian animon 

            el la dika ingo kie ĝi duondormas. Fajrelĵetigu ĝin ekstere. Dumvoje la arĥipelagojn, ne estas veraj danĝeroj sed proviloj per kiuj forĝiĝas la volo. Tiele…

            -Ho ! Rigardu, Majstro ! ekkriis Evaristo.

EOM;

    $var[4] = <<<EOM

        Tangi ne rekonis tuj la Fandiston, aŭ pli ĝuste ne volis rekoni lin. La vaga saĝulo partoprenis laŭ li en preskaŭ mortinta mondo, 

            estinteco kiun li deziris forgesi, epoko el sia vivo kiam li pasie kredis je la arkipelagoj kaj prepariĝis por antingi ilin. 

            Kaj poste iu tago lian okuloj malfermiĝis. Li komprenis ke tiuj insuloj nur estis alloga fatamorgano, mensogo kiu la angula realo zorgis pri detrui. 

            Tiam li fuĝis. Li turnis la dorson al liaj dek jaroj da junaĝo perdita kaj alvenis ĉi-tie, senforta kaj malsatega, 

            sed ĉefe malsatega pri agado. De kiom da tempo jam ? Li eĉ ne volis plu kalkuli : jardekoj, 

            li diris. Ĉiuokaze, li sukcesis lian entreprenon. Kiam li ekaperis en la Smeralda valo, ĝiaj loĝantoj estis duonsovaĝaj, 

            ili vivis pluke kaj ĉase. Oni povus konfuzi ilin kun la arbaro kreitaĵoj, tiom ili estis malsategantaj kaj ŝtelaj, 

            ekfrenezaj per krueleco eksaltoj sed ĝenerale timemaj kaj kiuj forkuris ekde la unua minaco. 

            Ili sininterbatalis, helpe de cerbatanoj kiujn malfacile tenis rekte iliaj febraj manoj.

EOM;

    $var[5] = <<<EOM

            Li sciis paroli al ili, li kvietiĝis ilin kaj arigis ilin sub lia standardo. Unue li fiksi ilin al la grundo, 

                trudpelante ilin por tiel diri al terkultivado. Sekve li varbis iujn militulojn, dizertintojn aŭ banditojn, 

                per kiuj li okazigis sekurecon por la Smeraldanoj. Post multaj bataloj, il finiĝis per disvenki la rabistoj 

                tribojn enradikitajn en la savano. Ekde iam, starigita la paco, la valon prosperis kaj estis ĉiumatene Tangi 

                plezuro iris flanke la monteto, inspekti la terasaj rizejoj kie la irigacio estis tiel klere organizita 

                ke klara akvo sajnis fonti el ĉie. Viroj kaj virinoj, laboremaj kaj kantemaj formikoj, rikoltis aŭ priklis. 

                Aliaj, apud la rivero, sin fordonis al senŝeligo dum en la vilaĝo taĉmentoj stringis la rizon en zorge faritaj pakegoj. 

                Karavanoj envojigis ĝin sekve forege ĝis la florantaj metiistoj komunaĵoj el Rejnlando el kie ili revenis monatoj 

                malfrue kun la ĉaroj plenŝtopiotaj kun objktoj manufakturitaj, teksaĵoj el Treviri, parfumoj el Kolonjo, mebloj el Duseldorfo.

EOM;

    $var[6] = <<<EOM

                Jes, Tanguy venkis. Li trudis la ĥaosan naturon submetiĝi al lian voloj; li superis ĝin. 

                    Li aliigis senordan spacon, malriĉan grundon kondanitan por veprejiĝi en ordena kaj harmonia loko kie 

                    la bela homa planto povis ekflori. Kaj li-mem, la antaŭa junulon, maldika kaj febra, kiu vagis sonĝe en la Marseljon stratoj, 

                    aliformiĝis. Sufiĉis al li nun sin rigardi en spegulo por konstati ĝin. Li iĝis kolosa maljunulo kun tufa blanka hararaĉo, 

                    kaj kun tiel nedifektiblaj ŝultroj le li kapablis dorsenfali bubon nur korne kaptitan. La longa cikatro kiu bridis lian nazon 

                    kaj partigist liajn lipojn en kvara ŝvelajoj, tute ne malnobligi lian aspekton, ankoraŭ plitimigigis lin.

EOM;

    $var[7] = <<<EOM

        Kiom malsamis al la Fandisto ! Tiu ne ŝanĝis kaj se li estis nun falta kiel maljuna pomo, li estis ankoraŭ tiel malfortika, 

            magrega kaj kurbema per la plej malgranda skuo. Tiu kiu mirigis Tangi, kiu eĉ skandalis lin (ĉar li malaprobis ke iun 

            tiele persistis erari), estis retrovi lin tiel ideisto kiel en la estinteco, tiel kroĉigita al siaj juneco sonĝoj, 

            al siaj arkipelagoj ĥimeroj kiuj antaŭlonge formis, multe pli ol la lakto aŭ la karno, ilian tagan nutraĉon. 

            Ĉar ili malmute manĝis en la tempoj de ilia pensema adoleskeco ! Multe okazis ke ili dormiĝis ventrovaka, 

            la spirito digistante iun bonegan koncepton.

EOM;

    echo $var[$tab];

?>

voila de quoi méditer

a++

Maljuna Kris · 11-10-2012 22:42:04

Ben, à vrai dire, je ne vois pas en quoi c'est optimisé.
C'est plus dynamique certes, s'agissant du contenu des <div>, mais si ces contenus sont figés, c'est juste plus lent à charger, non ?

Pierrot · 12-10-2012 13:10:02

>>Ben, à vrai dire, je ne vois pas en quoi c'est optimisé.

regarde bien et réfléchi, ça doit être dans tes capacités

a++

Maljuna Kris · 12-10-2012 13:48:55

Pierrot a écrit :

regarde bien et réfléchi, ça doit être dans tes capacités

Ça, ça reste à démontrer.
Alzheimer, Alzheimer ...

Ce matin j'ai pris ma première leçon de conduite (125cc), si tu savais le nombre de fois que j'ai calé !
Disons 2 fois sur 3 la première 1/2heure puis 1 fois sur 2 la deuxième pour finir à 1 fois sur 3 au bout d'une heure.
Et tout cela juste en 1ère.
Bon, par contre je n'ai renversé aucun plot.
Dire que dès mardi soir on considèrera que je suis apte à la conduite, ils sont fous !

Pierrot · 12-10-2012 14:38:41

passe à la maison, tu essayeras mon 600 bandit

Sinon, seul le 1er onglet est chargé et les autres onglets sont chargés à la demande.
donc, la 1er page est plus rapide à charger et si les autres onglets ne sont pas sélectionnés (ce qui est bien souvent le cas) il ne prennent aucun temps
donc, oui, c'est plus optimisé

a++

Maljuna Kris · 12-10-2012 17:43:40

En fait, dans l'appli finale, il s'agira de l'édition de sept tables de nomenclatures (une par onglet).
Elles ont toutes à peu près la même structure mais il n'existe pas de hiérarchie entre elles, en fonction des circonstances fonctionnelles, on pourra avoir à s'occuper plutôt de telle table que des autres, mais ce n'est pas prévisible.
Ceci étant, du coup, puisqu'il est vrai qu'on voudra rarement éditer toutes les tables, il faut que j'essaye de déterminer qu'elle sera celle (s'il y en a une) qui sera le plus fréquentée pour la mettre dans l'onglet 1 et utiliser pour les autres ton chargement dynamique uniquement à la sollicitation des onglets.
J'avais bien vu un traitement différent de l'onglet 1, mais (pris par d'autres préoccupations), je n'avais pas approfondi.
Comme quoi, une bonne action est toujours récompensée, je voulais juste éviter à d'autres de se fourvoyer sur un détail de structuration de document et je reçois, en prime une optimisation, elle n'est pas belle la vie ?

Merci mon Pierrot.

Pierrot · 13-10-2012 17:42:42

j'ai encore tout plein d'idées pour optimiser

bon, celle ci te coûtera 250€

a++

Maljuna Kris · 13-10-2012 21:49:25

Tu es impayable, mon Pierrot.

PHP|Débutant :: Forums

Advertisement

#1 11-10-2012 11:12:37

JQUERY UI tabs

#2 11-10-2012 12:17:21

Re : JQUERY UI tabs

#3 11-10-2012 15:41:24

Re : JQUERY UI tabs

#4 11-10-2012 18:54:16

Re : JQUERY UI tabs

#5 11-10-2012 22:42:04

Re : JQUERY UI tabs

#6 12-10-2012 13:10:02

Re : JQUERY UI tabs

#7 12-10-2012 13:48:55

Re : JQUERY UI tabs

#8 12-10-2012 14:38:41

Re : JQUERY UI tabs

#9 12-10-2012 17:43:40

Re : JQUERY UI tabs

#10 13-10-2012 17:42:42

Re : JQUERY UI tabs

#11 13-10-2012 21:49:25

Re : JQUERY UI tabs

Pied de page des forums