JQuery et JavaScript pour template Joomla 3

Réduire
Ce sujet est fermé.
X
X
 
  • Filtrer
  • Heure
  • Afficher
Tout effacer
nouveaux messages

  • [RÉGLÉ] JQuery et JavaScript pour template Joomla 3

    Bonjour à tous,
    Je voudrais modifier un template "maison" construit à partir du template 1870j3 de Cédric Kieflin, pour y adapter mon menu à la navigation sur mobiles. Selon ce modèle: http://www.alsacreations.com/tuto/li...eb-mobile.html
    Inutile de préciser que je n'y connait pas grand chose en javascript... Sinon j'y serait arrivée, je pense que c'est assez simple!

    en Html ça donne:
    entre les balises <head>:
    Code:
    <head>
    <meta charset="utf-8">
    <!--[if lt IE 9]><script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
    <!--[if IE 7]><link rel="stylesheet" type="text/css" href="style-ie7.css"><![endif]-->
    </head>
    entre les balises <body>, à la fin:
    Code:
    <script type="text/javascript">
    $(document).ready(function(){
    	var timedrop = 2000;
    	var idMenu = 'ul.menu';
    	var classHover = 'hover';
    	var texteSub = "Affiche le sous-menu";
    	var arrowfff = "<span>▼</span>";
    	
    	if((idMenu)) {
    	// Ajoute la class .drop lorsque le JS est activé
    	$(idMenu).addClass('drop'); 
    	// Ajoute un span (fleche) lorsqu'il y a un sous menu et change le lien
    	$("li.sub > a",idMenu).text(function () {
            $(this).replaceWith('<a href="" title="	' + texteSub + $(this).text() + '"><span>' + $(this).text() + '</span> '+arrowfff+'</a> '); 
    	});
    	// On parcours les liens du menu
    	$('li a',idMenu).each(function () {
    		// 
    		var menuParent = $(this).closest('ul').parent();
    		// le cursor est sur l'élément
    		$(this).bind("mouseenter focus", function () {
    			$(this).addClass( classHover );
    			$(menuParent).addClass( classHover );
    		// le cursor n'est plus sur l'élément
    		}).bind("mouseleave blur", function () {
    			$(this).removeClass( classHover );
    			//
    			if (!$('.'+classHover, menuParent).length) {
    				// Retardement pour que le sous-menu disparaisse > 2000 = 2sec
    				setTimeout(function(){
    					$(menuParent).removeClass( classHover );
    				},timedrop);
    			}
    		});
    	});//end
    	
    	// ctrl + shift pour avoir le focus sur le premier item du menu
    	$(document).keyup(function (e) {
    	if(e.which == 17) isCtrl=false;
    	}).keydown(function (e) {
    		if(e.which == 17) isCtrl=true;
    		if(e.which == 16 && isCtrl == true) {
    			var Item = $(" > li:first-child a", idMenu);
    			var titleItem = $(Item).attr('title');
    				$(Item).addClass( classHover ).focus();
    	 	}
    	});
    	
    	}
    	
    });
    </script>
    </body>
    Pour adapter tout ça au template Joomla 3, est ce que je dois bien:
    - placer l'appel à la librairie JQuery en tout début de code d'index.php,
    - puis créer un fichier template.js (par exemple) placé dans un dossier nommé "js" dans le dossier de mon template, et appeler ce code avant la fermeture de la balise body d'index.php ?

    Mes essais ne fonctionnent pas, voici ce que j'ai fait:

    créé le fichier template.js:
    Code:
    (function($)
    {
    	$(document).ready(function()
    	{
    		$('*[rel=tooltip]').tooltip()
    
    		// Turn radios into btn-group
    		$('.radio.btn-group label').addClass('btn');
    		$(".btn-group label:not(.active)").click(function()
    		{
    			var label = $(this);
    			var input = $('#' + label.attr('for'));
    
    			if (!input.prop('checked')) {
    				label.closest('.btn-group').find("label").removeClass('active btn-success btn-danger btn-primary');
    				if (input.val() == '') {
    					label.addClass('active btn-primary');
    				} else if (input.val() == 0) {
    					label.addClass('active btn-danger');
    				} else {
    					label.addClass('active btn-success');
    				}
    				input.prop('checked', true);
    			}
    		});
    		$(".btn-group input[checked=checked]").each(function()
    		{
    			if ($(this).val() == '') {
    				$("label[for=" + $(this).attr('id') + "]").addClass('active btn-primary');
    			} else if ($(this).val() == 0) {
    				$("label[for=" + $(this).attr('id') + "]").addClass('active btn-danger');
    			} else {
    				$("label[for=" + $(this).attr('id') + "]").addClass('active btn-success');
    			}
    		});
    	})
    })(jQuery);

    Fichier index.php:

    Appel de la librairie JQuery :
    Code PHP:
    <?php
    defined
    ('_JEXEC') or die;
    $app JFactory::getApplication();

    JHtml::_('jquery.framework'true); 
    ?>
    <!DOCTYPE html>
    Placer l'appel au fichier javascript avant la fermeture du body:
    Code PHP:
    <script src="templates/hameauj3/js/template.js" type="text/javascript" charset="utf-8"></script
    </
    body
    Mais ça ne fonctionne pas!
    merci pour votre aide précieuse, je patauge...
    Dernière édition par marichon à 20/05/2015, 13h22

  • #2
    Re : JQuery et JavaScript pour template Joomla 3

    Personne ne peux m'aider?

    Commentaire


    • #3
      Re : JQuery et JavaScript pour template Joomla 3

      salut
      je dirais simplement qu'il existe des modules de menu qui font ça par défaut. Tu peux essayer mon module Maximenu CK qui le fait dans sa version gratuite, ou d'autres modules que tu trouveras sur la JED (extensions.joomla.org)
      CEd
      Vive Joomla! http://www.joomlack.fr Tutoriels et extensions pour Joomla!. Livre création de template Joomla de plus de 200 pages.
      http://www.template-creator.com Outil de création de templates
      Module Maximenu CK - Megamenu, multicolonnes, chargement de module, description de lien, deroulement animé - Compatible Virtuemart, Hikashop

      Commentaire


      • #4
        Re : JQuery et JavaScript pour template Joomla 3

        Ok Ced1870, je vais essayer Maximenu CK!
        et en passant merci pour les modules, tuto et astuces sur ton site!

        J'aurais bien aimé y arriver quand même... frustration de l'autodidacte... donc si quelqu'un veut bien m'expliquer, je suis preneuse.

        Commentaire


        • #5
          Re : JQuery et JavaScript pour template Joomla 3

          tu as un retour dans la console de firebug ?

          Commentaire


          • #6
            Re : JQuery et JavaScript pour template Joomla 3

            non, je vois du Javascript, mais pas le code qui doit "replier" mon menu. Il ne s'active pas, ma déclaration ne doit pas être bonne.
            Mais je ne sais pas débuger du js avec firebug, je ne comprend pas suffisamment...

            pour voir en direct: http://wip.atelier-matiere.com

            Commentaire


            • #7
              Re : JQuery et JavaScript pour template Joomla 3

              essaye de mettre ton code entre des balises <script> et </script> et non dans un fichier séparé.
              et juste dessus de la balise </head> afin qu il soit entre les balises <head> et </head>

              Commentaire


              • #8
                Re : JQuery et JavaScript pour template Joomla 3

                Merci pour la suggestion lefebdu51.
                Mais ça n'a rien changé!

                j'ai essayé aussi de remplacer l'appel à la librairie JQuery:
                Code:
                JHtml::_('jquery.framework', true);
                par:
                Code:
                <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
                entre les balises <head></head>

                Firebug voit le code javascript, mais le menu n'en tient pas compte.

                Commentaire


                • #9
                  Re : JQuery et JavaScript pour template Joomla 3

                  Salut,
                  J'aurais bien aimé y arriver quand même... frustration de l'autodidacte... donc si quelqu'un veut bien m'expliquer, je suis preneuse.
                  1- JAVASCRIPT
                  * Si tu veux t'amuser avec du JavaScript, il te faut quelques outils de debug (ici, pour Firefox) :

                  l'essentiel Firebug pour Firefox, mais j'espère que tu connais déjà.

                  Phoenix :: Add-ons for Firefox
                  Download Phoenix for Firefox. Burning Phoenix, is a beautiful fantasy theme for the fantasy lovers

                  qui permet de voir d'un seul coup d'oeil tous les fichiers JS et CSS chargés.

                  * essaye d'éviter les erreurs de base, comme ici charger deux versions de jQuery.

                  Tu n'as pas besoin de jquery 1.6.2 !
                  jQuery est chargé par défaut dans joomla.
                  Regarde les n° des versions des scripts trouvés sur Internet, et teste avec la version par défaut de joomla, qui se trouve ici :
                  /media/jui/js/jquery.min.js
                  jQuery v1.11.2

                  - je pense que la 2 version de jquery (1.6.2) chargée, est en grande partie à l'origine du souci.

                  j'ai testé l'exemple de alsacreations avec JQ 1.11.2 et ca fonctionne.

                  * dans ton 1er post, il y a 2 scripts différents.
                  Pourquoi ????
                  Celui utilisé dans l'exemple d'alsacréations est le 1er.

                  * il existe aujourd'hui deux possibilités d'ajouter du JS/jQuery dans joomla, dans le tag <head>, que ce soit en inline ou via l'appel à un fichier JS*:
                  jQuery(function($){
                  $(document).ready(function() {
                  // code ici


                  });

                  });
                  (function($){
                  $(document).ready(function() {
                  // code ici


                  });
                  })(jQuery);
                  il y a eu discussion par les devs de Joomla, la 1ere possibilité est la dernière adoptée.

                  PS : il faut comprendre :
                  $(document).ready(function() {

                  });
                  Référence :
                  $( document ).ready() | jQuery Learning Center


                  2- JAVASCRIPT DANS JOOMLA
                  * Enfin, ceci :
                  <?php
                  defined('_JEXEC') or die;
                  //ligne 1
                  $app = JFactory::getApplication();
                  // ligne2
                  JHtml::_('jquery.framework', true);
                  ?>
                  Ligne 1 et ligne 2 n'ont rien à voir.
                  Ligne 2 permet, via l'API Joomla, de "contraindre" le chargement de jQuery en mode "non-conflict".
                  Cette ligne permet, accessoirement, de garantir, dans un template, par exemple, que jQuery charge avant les scripts associés (à Jquery).
                  Ref : J3.x:Javascript Frameworks - Joomla! Documentation


                  La ligne 1 fait partie de l'API joomla.

                  * Appel JS classique dans un template joomla:
                  <?php
                  $document = JFactory::getDocument();
                  $document->addScript($this->baseurl . '/templates/' . $this->template . '/js/template.js');
                  ?>
                  Il y a une manière encore plus "moderne" d'appeler des fichiers JS ou CSS dans joomla, mais je ne veux pas t'embrouiller.

                  Hope it helps.
                  Un message d’erreur sur votre site Joomla ... ayez le reflexe de consulter lla base de connaissance : https://kb.joomla.fr

                  Ce forum, vous l'aimez ? il vous a sauvé la vie ? Vous y apprenez chaque jour ? Alors adhérez à l'AFUJ https://www.joomla.fr/association/adherer

                  Commentaire


                  • #10
                    Re : JQuery et JavaScript pour template Joomla 3

                    @gazhal :

                    Merci pour le cours.....

                    Commentaire


                    • #11
                      Re : JQuery et JavaScript pour template Joomla 3

                      Bonjour gazhal, et merci pour l'explication!

                      * dans ton 1er post, il y a 2 scripts différents.
                      Pourquoi ????
                      Celui utilisé dans l'exemple d'alsacréations est le 1er.
                      En effet, j'ai voulu adapter le code Html d'alsacréation pour le fichier index.php de mon template.

                      + j'ai ajouté Phoenix :: Add-ons for Firefox à mes outils de débug. Reste à apprendre à l'utiliser!

                      Donc si j'ai bien compris tes explications:
                      • Pas besoin d’appeler jQuery dans le head du template, puisqu'il est chargé par défaut dans joomla.

                      > donc je n'ajoute pas :
                      Code:
                      jQuery(function($){
                      $(document).ready(function() {
                      // code ici
                      
                      
                      });
                      
                      });
                      ni :
                      Code:
                      <?php
                      JHtml::_('jquery.framework', true); 
                      ?>
                      • Et j'insère seulement le lien vers mon fichier template.js dans le head du template :

                      Code:
                      <?php
                      	$document = JFactory::getDocument();
                      	$document->addScript($this->baseurl . '/templates/' . $this->template . '/js/template.js');
                      	?>
                      Bon, ça ne change pas le résultat, script chargé, mais sans effet sur mon menu.
                      J'ai du mal comprendre quelque chose...!

                      Bonne après midi
                      Dernière édition par marichon à 27/05/2015, 13h32

                      Commentaire


                      • #12
                        Re : JQuery et JavaScript pour template Joomla 3

                        <?php
                        JHtml::_('jquery.framework', true);
                        ?
                        * Si, tu peux rajouter cet appel à la librairie jQuery parce que, dans la majorité des cas, cela garantit que ton script arrive APRES celle-ci (ie, la lib jQuery), condition nécessaire à la bonne interprétation de ton script.

                        Bon, ça ne change pas le résultat, script chargé, mais sans effet sur mon menu.
                        * As-tu bien vérifié ton script ?
                        En JS, une virgule, un point-virgule, un point mal placés peuvent bloquer le rendu.

                        * tu écris :
                        donc je n'ajoute pas :
                        Code:

                        jQuery(function($){
                        $(document).ready(function() {
                        // code ici


                        });

                        });
                        -----> dans index.php, on est bien d'accord ?

                        Que tu appelles ton script dans le body ou via un fichier, <script type="text/javascript" src="" ...,
                        l'impact est le même.
                        En revanche, il est capital que tu comprennes*:
                        * appel SANS $(document).ready(function() {...
                        = doit se placer en fin de body (</body>)

                        * appel AVEC $(document).ready(function() {...
                        peut se placer dans la head

                        * L'encapsulage dans :
                        jQuery(function($){

                        });
                        sert à forcer jQuery à correctement interpréter le script.

                        Est-ce plus clair ?
                        Un message d’erreur sur votre site Joomla ... ayez le reflexe de consulter lla base de connaissance : https://kb.joomla.fr

                        Ce forum, vous l'aimez ? il vous a sauvé la vie ? Vous y apprenez chaque jour ? Alors adhérez à l'AFUJ https://www.joomla.fr/association/adherer

                        Commentaire


                        • #13
                          Re : JQuery et JavaScript pour template Joomla 3

                          MERCI Ghazal, j'ai compris
                          et ça marche enfin!

                          Dans le fichier template.js, je n'avais pas encapsulé mon code dans
                          jQuery(function($){
                          $(document).ready(function() {
                          // code ici


                          });

                          });
                          forcément, il ne pouvait pas être interprété.

                          pinaise, j'ai appris des trucs!
                          mais une petite formation de javascript ne serait pas inutile!

                          Donc je passe le sujet en réglé!

                          bonne après midi ... au soleil!

                          Commentaire

                          Annonce

                          Réduire
                          Aucune annonce pour le moment.

                          Partenaire de l'association

                          Réduire

                          Hébergeur Web PlanetHoster
                          Travaille ...
                          X