Zend FR

__fabrice · 23-12-2009 15:08:24

Hello à tous,

Juste une petite question.. est-il possible (et comment ) ? de faire des tabs (avec jquery ui, jquery toolstip par exemple) et ZF ?

J'utilise des layouts (et un framework CSS).

Il y a plusieurs problemes :

- génère-t-on tous le code des 3 onglets ou un onglet et égal à une page, donc une action. Mais du coup, l'intéret des onglets n'est plus.

- comment on utilise çà dans un layout ?

Merci
Fabrice

dev-k · 23-12-2009 16:45:41

salut,

Personnellement je vois pas trop le problème.
Tout ça c'est du javascript, non??
tu écris le code dans ta vue ou ton layout et le css et javascript fait le reste.
ou bien j'ai pas saisi

__fabrice · 23-12-2009 23:32:12

oui, mais non .

En fait, si tu as des "faux" onglets qui sont juste des liens vers d'autres pages, cela ne change rien.

Mais si les onglets contiennent tout le code de toutes les pages, et donc, de tous les controlleurs, çà se complique un peu non ?

Fab

sekaijin · 23-12-2009 23:56:23

troisème solution tes onglets contiennent des iframe qui sont donc gérés par des contrôleur différents

perso une seule vue sans données les onglets sont construit à la volée en fonction des actions de l'utilisateurs chaque onglet une fois créé (en JS) il fait appel en ajax à un ou des contrôleurs pour obtenir ou traiter les données

A+JYT

mikaelkael · 24-12-2009 09:46:19

Hello,

Mon layout contient des tabs (presque) vides. Elles possèdent juste un <a> contenant le lien de la page à charger sont loadées lors du click sur le titre par un simple get() de jQuery. La première tabs est toutefois chargée automatiquement.

@+

__fabrice · 30-12-2009 17:36:53

Hello,

Merci à tous.

A la rigueur , un petit exemple ne serai pas de refus .

Fabrice

sekaijin · 30-12-2009 17:47:46

un exemple en 30 ligne de js
http://jeanyves.terrien.free.fr/DomTabs.html

__fabrice · 30-12-2009 21:19:05

Merci pour ton exemple, mais je parlais d'une interaction avec ZF. Les tabs y'a JqueryUI ou autres.

C'est vraiment comment faire pour remplir, par exemple, 3 tabs avec 3 controllers/actions différents.

Fab

mikaelkael · 30-12-2009 22:58:44

C'est bien parce que c'est Noël

Les tabs, les liens peuvent être générés avec $this->url() :

Code:

<div id="tabs">
    <ul>
        <li><a href="#mon-compte">Mon compte</a></li>
        <li><a href="#evenements">Evénements</a></li>
        <li><a href="#mes-inscriptions">Mes inscriptions</a></li>
    </ul>

    <div id="mon-compte"><a href="/index/mon-compte"></a></div>
    <div id="evenements"><a href="/index/voir-evenement"></a></div>
    <div id="mes-inscriptions"><a href="/index/mes-inscriptions"></a></div>
</div>

Le chargement en fin d'HTML :

Code:

<script type="text/javascript">
$(function() {
    $("#tabs").tabs({
        select: function(event, ui) {
            link = $(ui.panel).children(0).attr('href');
            $(ui.panel).html('<div style="text-align:center"><img src="/zf/images/ajax-loader.gif" alt="Chargement en cours..." /></div>');
            $.get(link, function(data){
                $(ui.panel).html('<a href="' + link + '"></a>' + data);
              });
        }
    });
    $("#tabs").tabs('select', 1);
});
</script></div>

Le (re)chargement des tabs se fait lors du click sur le titre.

@+

__fabrice · 30-12-2009 23:12:57

Merci Papa Noël

Je vais tester tout çà.

Fabrice

sekaijin · 31-12-2009 09:33:43

__fabrice a écrit:
Merci pour ton exemple, mais je parlais d'une interaction avec ZF. Les tabs y'a JqueryUI ou autres.

C'est vraiment comment faire pour remplir, par exemple, 3 tabs avec 3 controllers/actions différents.

Fab

dans le contenu des tab tu mets des iframe
et chaque iframe est un appel à une action ZF

c'est ce que j'ai expliqué plus haut

simple non ?
A+JYT

__fabrice · 02-01-2010 01:19:47

Hello,

Bonne année à tous
L'exemple de mikaelkael marche nickel.... c'était simple en fait ... je vois toujours la complication.

Par contre, le terme "iframe" semble sortir d'outre-tombe

Fabrice

throrin19 · 02-01-2010 11:38:35

et passer par ZendX_Jquery ??? il gère bien les tabls simplement.

__fabrice · 02-01-2010 12:35:56

Je connais pas du tout ZendX_Jquery.

Facile à utiliser ?, il existe de bons tutos ?

F.

throrin19 · 02-01-2010 14:48:57

très facile à utiliser, il y a un exemple concret sur la documentation Zend. En 3 lignes tu fais 3 parties de ton tab.

__fabrice · 03-01-2010 23:24:48

Bon, je file un exemple de l'utilisation de Jquery avec ZF. Plus précisement, ZendX_JQuery et ZF, tabs et ajax :
Le Layout :

Code:

// Utilisation de jquery et jqueryUI  
if ($this->jQuery()->isEnabled()) {

      $this->jQuery()
      ->setLocalPath($this->baseUrl()   .'/js/jquery/jquery-1.3.2.min.js')
      ->setUiLocalPath($this->baseUrl() .'/js/jquery/jquery-ui-1.7.2.custom.min.js')
      ->addStyleSheet($this->baseUrl()  .'/css/custom-theme/jquery-ui-1.7.2.custom.css');

      echo $this->jQuery();

  }

La vue :

Code:

<?php
// Les 3 tabs
echo $this->tabPane(
    'tabs',
    'news',
    array('title'=>'news'
    )
);

echo $this->tabPane(
    'tabs',
    'guestbook',
    array('title'=>'guestbook',
    'contentUrl'=> $this->baseUrl().'/guestbook/index'
    )
);

echo $this->tabPane(
    'tabs',
    'contact',
    array('title'=>'contact',
    'contentUrl'=> $this->baseUrl().'/contact/index'
    )
);
// Affichage du container, des tabs  + parametres optionnels de jquery.
echo $this->tabContainer('tabs',array('active'=>'none'));

?>

Avece le parametre contentUrl on précise à ZF et Jquery d'afficher le contenu du tab en utilisant le couple controller/action de ZF. Le tout est automatique.

Autre méthode sans ZendX_jQuery (merci à mikaelkael). La vue :

Code:

<div id="tabs">
            <ul>
                <li><a href="#tabs-news">news</a></li>
                <li><a href="#tabs-guestbook">guestbook</a></li>
                <li><a href="#tabs-contact">contact</a></li>
            </ul>

            <div id="tabs-news">
                <a href="<?php echo $this->baseUrl();?>/news/index">news</a>
            </div>

            <div id="tabs-guestbook">
                <a href="<?php echo $this->baseUrl();?>/guestbook/index">guestbook</a>
            </div>

            <div id="tabs-contact">
                <a href="<?php echo $this->baseUrl();?>/contact/index">contact</a>
            </div>

</div>

et le fichier js :

Code:

$(document).ready(function() {
    $("#tabs").tabs({
        select: function(event, ui) {
            link = $(ui.panel).children(0).attr('href');

            $(ui.panel).html('<div style="text-align:center"><img src="images/ajax-loader.gif" alt="Chargement en cours..." /></div>');
            $.get(link, function(data){
                $(ui.panel).html('<a href="' + link + '"></a>' + data);
            });
        }
    });
});

Après, je ne suis pas encore allé en profondeur avec ZendX_jQuery. J'ai lu que la gestion de Jquery avec ZF en était encore au début.

A+Fabrice

__fabrice · 09-02-2010 22:58:36

Salut,

Autre question , pour la version sans ZendX_jQuery, on ne peut faire çà avec un layout.html... ou du moins je vois pas comment.

Possible ?

F.

Dernière modification par __fabrice (09-02-2010 22:59:01)

nORKy · 10-02-2010 07:50:07

biensur que c'est possible. tu faits du code javascript (voir la doc de JQuery pour l'utilisation de tabs) dans un .js et tu colles des liens js avec l'aide de vue headscript

Zend FR

#1 23-12-2009 15:08:24

Utilisation des tabs genre JqueryUI avec ZF ?

#2 23-12-2009 16:45:41

Re: Utilisation des tabs genre JqueryUI avec ZF ?

#3 23-12-2009 23:32:12

Re: Utilisation des tabs genre JqueryUI avec ZF ?

#4 23-12-2009 23:56:23

Re: Utilisation des tabs genre JqueryUI avec ZF ?

#5 24-12-2009 09:46:19

Re: Utilisation des tabs genre JqueryUI avec ZF ?

#6 30-12-2009 17:36:53

Re: Utilisation des tabs genre JqueryUI avec ZF ?

#7 30-12-2009 17:47:46

Re: Utilisation des tabs genre JqueryUI avec ZF ?

#8 30-12-2009 21:19:05

Re: Utilisation des tabs genre JqueryUI avec ZF ?

#9 30-12-2009 22:58:44

Re: Utilisation des tabs genre JqueryUI avec ZF ?

Code:

Code:

#10 30-12-2009 23:12:57

Re: Utilisation des tabs genre JqueryUI avec ZF ?

#11 31-12-2009 09:33:43

Re: Utilisation des tabs genre JqueryUI avec ZF ?

__fabrice a écrit:

#12 02-01-2010 01:19:47

Re: Utilisation des tabs genre JqueryUI avec ZF ?

#13 02-01-2010 11:38:35

Re: Utilisation des tabs genre JqueryUI avec ZF ?

#14 02-01-2010 12:35:56

Re: Utilisation des tabs genre JqueryUI avec ZF ?

#15 02-01-2010 14:48:57

Re: Utilisation des tabs genre JqueryUI avec ZF ?

#16 03-01-2010 23:24:48

Re: Utilisation des tabs genre JqueryUI avec ZF ?

Code:

Code:

Code:

Code:

#17 09-02-2010 22:58:36

Re: Utilisation des tabs genre JqueryUI avec ZF ?

#18 10-02-2010 07:50:07

Re: Utilisation des tabs genre JqueryUI avec ZF ?

Pied de page des forums