Tweet
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>:
entre les balises <body>, à la fin:
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:
Fichier index.php:
Appel de la librairie JQuery :
Placer l'appel au fichier javascript avant la fermeture du body:
Mais ça ne fonctionne pas!
merci pour votre aide précieuse, je patauge...
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>
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>
- 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>
Code PHP:
<script src="templates/hameauj3/js/template.js" type="text/javascript" charset="utf-8"></script>
</body>
merci pour votre aide précieuse, je patauge...
frustration de l'autodidacte... donc si quelqu'un veut bien m'expliquer, je suis preneuse.
pinaise, j'ai appris des trucs!
Commentaire