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 ?
          Mon site en cours de construction avec de nouvelles catégories de documents...
          https://informaticien51.fr

          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>
              Mon site en cours de construction avec de nouvelles catégories de documents...
              https://informaticien51.fr

              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
                  https://addons.mozilla.org/en-us/firefox/addon/phoenix/
                  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
                  http://learn.jquery.com/using-jquery...ocument-ready/

                  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
                  https://docs.joomla.org/J3.x:Javascript_Frameworks

                  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 le nouveau service (en Beta) de la base de connaissance https://kb.joomla.fr

                  Commentaire


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

                    @gazhal :

                    Merci pour le cours.....
                    Mon site en cours de construction avec de nouvelles catégories de documents...
                    https://informaticien51.fr

                    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 le nouveau service (en Beta) de la base de connaissance https://kb.joomla.fr

                        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
                          1 sur 2 < >

                          C'est [Réglé] et on n'en parle plus ?

                          A quoi ça sert ?
                          La mention [Réglé] permet aux visiteurs d'identifier rapidement les messages qui ont trouvé une solution.

                          Merci donc d'utiliser cette fonctionnalité afin de faciliter la navigation et la recherche d'informations de tous sur le forum.

                          Si vous deviez oublier de porter cette mention, nous nous permettrons de le faire à votre place... mais seulement une fois
                          Comment ajouter la mention [Réglé] à votre discussion ?
                          1 - Aller sur votre discussion et éditer votre premier message :


                          2 - Cliquer sur la liste déroulante Préfixe.

                          3 - Choisir le préfixe [Réglé].


                          4 - Et voilà… votre discussion est désormais identifiée comme réglée.

                          2 sur 2 < >

                          Assistance au forum - Outil de publication d'infos de votre site

                          Compatibilité: PHP 4.1,PHP4, 5, 6DEV MySQL 3.2 - 5.5 MySQLi from 4.1 ( @ >=PHP 4.4.9)

                          Support Version de Joomla! : | J!3.0 | J!2.5.xx | J!1.7.xx | J!1.6.xx | J1.5.xx | J!1.0.xx |

                          Version française (FR) D'autres versions sont disponibles depuis la version originale de FPA

                          UTILISER À VOS PROPRES RISQUES :
                          L'exactitude et l'exhaustivité de ce script ainsi que la documentation ne sont pas garanties et aucune responsabilité ne sera acceptée pour tout dommage, questions ou confusion provoquée par l'utilisation de ce script.

                          Problèmes connus :
                          FPA n'est actuellement pas compatible avec des sites Joomla qui ont eu leur fichier configuration.php déplacé en dehors du répertoire public_html.

                          Installation :

                          1. Téléchargez l'archive souhaitée : http://afuj.github.io/FPA/

                          Archive zip : https://github.com/AFUJ/FPA/zipball/master

                          2. Décompressez le fichier de package téléchargé sur votre propre ordinateur (à l'aide de WinZip ou d'un outil de décompression natif).

                          3. Lisez le fichier LISEZMOI inclus pour toutes les notes de versions spécifiques.

                          4. LIRE le fichier de documentation inclus pour obtenir des instructions d'utilisation détaillées.

                          5. Téléchargez le script fpa-fr.php à la racine de votre site Joomla!. C'est l'endroit que vous avez installé Joomla et ce n'est pas la racine principale de votre serveur. Voir les exemples ci-dessous.

                          6. Exécutez le script via votre navigateur en tapant: http:// www. votresite .com/ fpa-fr.php
                          et remplacer www. votresite .com par votre nom de domaine


                          Exemples:
                          Joomla! est installé dans votre répertoire web et vous avez installé la version française du fichier FPA:
                          Télécharger le script fpa-fr.php dans: /public_html/
                          Pour executer le script: http://www..com/fpa-fr.php

                          Joomla! est installé dans un sous-répertoire nommé "cms" et vous avez installé la version française du fichier FPA:
                          Télécharger le script fpa-fr.php dans: /public_html/cms/
                          Pour executer le script: http://www..com/cms/fpa-fr.php

                          En raison de la nature très sensible de l'information affichée par le script FPA, il doit être retiré immédiatement du serveur après son utilisation.

                          Pour supprimer le script de votre site, utilisez le lien de script de suppression fourni en haut de la page du script. Si le lien de suppression échoue pour supprimer le script, utilisez votre programme FTP pour le supprimer manuellement ou changer le nom une fois que le script a généré les données du site et le message publié sur le forum. Si le script est toujours présent sur le site, il peut être utilisé pour recueillir suffisamment d'informations pour pirater votre site. Le retrait du script empêche des étrangers de l'utiliser pour jeter un oeil à la façon dont votre site est structuré et de détecter les défauts qui peuvent être utilisé à vos dépends.
                          Voir plus
                          Voir moins
                          Travaille ...
                          X