Zend FR

cyrille.t · 16-01-2012 22:34:13

Bonjour,

Je débute sous Zend, j'ai fait le tutoriel sur la gestion des albums sans problèmes.

Je suis passé sur un autre projet et je bloque dès le "layout", le JS ne semble pas s'exécuter.

J'ai bien l'appel à mon script entre les balises <head> du fichier :
/application/layouts/scripts/layout.phtml

Code:

[lang=phtml]
....
<head
<?php echo $this->headMeta(); ?>
<?php echo $this->headTitle(); ?> 
<?php echo $this->headLink()->prependStylesheet($this->baseUrl().'/css/001_menu.css'); ?>
<?php echo $this->headScript()->appendFile('/js/000_menu.js','text/javascript'); ?>
</head>
....

l'appel du menu dans le code HTML est fait en appelant l'objet CSS correspondant (ici : 'menu_pp')

Code:

[lang=phtml]<body>
....
<div id="back_menu">
        <ul id="menu_pp">
            <li>Accueil</li>
            <li>BlaBla
                <ol>
                <li><a href="#">RiRi</a></li>
                <li><a href="#">FiFi</a></li>
                <li><a href="#">LouLou</a></li>
                </ol>
            </li>
        </ul>
    </div>
....
</body>

Enfin, voici le script JS chargé entre les balises <head>
/public/js/000_menu.js

Code:

[lang=javascript]    if(!window.Node)
        {
        var Node = {ELEMENT_NODE : 1, TEXT_NODE : 3};
        }
    function checkNode(node, filter)
        {
        return (filter == null || node.nodeType == Node[filter] || node.nodeName.toUpperCase() == filter.toUpperCase());
        }
    function getChildren(node, filter)
        {
        var result = new Array();
        var children = node.childNodes;
        for(var i = 0; i < children.length; i++)
            {
            if(checkNode(children[i], filter)) result[result.length] = children[i];
            }
        return result;
        }
    function getChildrenByElement(node)
        {
        return getChildren(node, "ELEMENT_NODE");
        }
    function getFirstChild(node, filter)
        {
        var child;
        var children = node.childNodes;
        for(var i = 0; i < children.length; i++)
            {
            child = children[i];
            if(checkNode(child, filter)) return child;
            }
        return null;
        }
    function getFirstChildByText(node)
        {
        return getFirstChild(node, "TEXT_NODE");
        }
    function getNextSibling(node, filter)
        {
        for(var sibling = node.nextSibling; sibling != null; sibling = sibling.nextSibling)
            {
            if(checkNode(sibling, filter)) return sibling;
            }
        return null;
        }
    function getNextSiblingByElement(node)
        {
        return getNextSibling(node, "ELEMENT_NODE");
        }

    var activeMenu_pp = null;
    function showMenu_pp()
        {
        if(activeMenu_pp)
            {
            activeMenu_pp.className = "";
            getNextSiblingByElement(activeMenu_pp).style.display = "none";
            }
        if(this == activeMenu_pp)
            {
            activeMenu_pp = null;
            }
        else
            {
            this.className = "active";
            getNextSiblingByElement(this).style.display = "block";
            activeMenu_pp = this;
            }
        return false;
        }
    function initMenu_pp()
        {
        var menus, menu, text, a, i;
        menus = getChildrenByElement(document.getElementById("menu_pp"));
        for(i = 0; i < menus.length; i++)
            {
            menu = menus[i];
            text = getFirstChildByText(menu);
            a = document.createElement("a");
            menu.replaceChild(a, text);
            a.appendChild(text);
            a.href = "#";
            a.onclick = showMenu_pp;
            a.onfocus = function(){this.blur()};
            }
        }
    if(document.createElement) window.onload = initMenu_pp;

avec les CSS qui vont bien dans le fichier déclaré entre les balises <head> :
/public/css/001_menu.css

Code:

ul#menu_pp {
  width: 25%;
  list-style-type: none;
  padding: 5px 0px 0px 10px;
  font-weight: bold;
}      
ul#menu_pp ol {
  display: none;
  text-align: right;
  list-style-type: none;
  margin: 0;
  padding: 3px;
}
ul#menu_pp li, 
  ul#menu_pp a {
  font-family: verdana, sans-serif;
  color: #785a3c;
}
ul#menu_pp li {
  border-top: solid 1px #b9a894;
  line-height: 15px;
}
ul#menu_pp ol li {
  border-top: none;
  text-align: left;
  padding: 0px 0px 0px 10px;
}
ul#menu_pp ol li:before {
  content: "- ";
}
ul#menu_pp a {
  text-decoration: none;
  outline: none;
  color: #785a3c;
}
ul#menu_pp a:hover {
  color: #539dbc;
}
ul#menu_pp a.active {
  color: #be5028;
}

En temps normal (hors Zend), ce script fonctionne très bien. Le code JS est une source que j'ai trouvé sur le net car néophyte en javascript.
Étant donné mon inexpérience sur Zend, je dois sûrement me tromper dans la déclaration du script avec le $this->headScript()

Si qq1 a une idée car je sèche un peu
Par avance merci pour votre aide,
++

Dernière modification par cyrille.t (17-01-2012 09:50:02)

_Fuse_ · 17-01-2012 09:05:47

Bonjour,

La fonction que tu utilise pour appeler le script est correcte.
Assure toi que le script est correctement chargé dans la page HTML. Peut être a tu oublié d'appeler $this->baseUrl()?

Code:

echo $this->headScript()->appendFile($this->baseUrl().'/js/000_menu.js','text/javascript');

Les fonctions prependFile() et appendFile() permettent de charger les scripts avant ou après les autres.

Code:

echo $this->headScript()->prependFile('/js/000_menu.js','text/javascript');

Dernière modification par _Fuse_ (17-01-2012 09:06:31)

cyrille.t · 17-01-2012 09:49:28

Tout bêtement, c'était ça ; Désolé pour mon ignorance -_-
Je comprends mieux maintenant, en effet...

Merci _Fuse_

Zend FR

#1 16-01-2012 22:34:13

[Résolu] Inclure un menu JS dans une appli Zend

Code:

Code:

Code:

Code:

#2 17-01-2012 09:05:47

Re: [Résolu] Inclure un menu JS dans une appli Zend

Code:

Code:

#3 17-01-2012 09:49:28

Re: [Résolu] Inclure un menu JS dans une appli Zend

Pied de page des forums