web-dev-qa-db-fra.com

Comment faire un modèle d'une seule page?

Je veux créer un modèle d'une seule page à partir de rien, mais je ne sais pas vraiment par où commencer. J'utilise Joomla 3.x, mon approche devrait donc être bootstrap compatible.

Je suppose que puisque les boutons de menu font défiler la page, il est logique d’utiliser des modules pour chaque élément de menu. Mais ensuite je me demande comment je peux faire fonctionner correctement le défilement et les ancres.

Quelqu'un peut-il m'indiquer la bonne direction?

joomla-3.xtemplatesbootstrap
2
mattosmat

Tu es sur la bonne piste.

Eléments de menu

Créer tous les éléments de menu en tant que System Links > External URL et définir le lien comme #section-[MODULE_ID_HERE].

Par exemple, vos liens de menu devraient ressembler à ceci

<a href="#section-[MODULE_ID_HERE]">First section</a>

Modules

Je créerais un nouveau chrome pour les modules, afin qu'ils aient tous un attribut ID unique. Par exemple, avec un ID de module ou un alias. Vous pourrez ensuite établir un lien avec eux.

Joomla! Docs pour module chromes .

Le module wrapper div devrait ressembler à ceci.

<div id="#section-<?php echo $module->id; ?>">
    <!-- Module content here -->
</div>

section- _ Le préfixe est juste par exemple, vous n’avez pas à l’utiliser.

Défilement

J'ai trouvé un court exemple. Cela empêche les événements réguliers lorsque vous cliquez sur le lien et anime le navigateur dans la section droite.

/**
 * @author Paul Underwood
 * @source http://www.paulund.co.uk/smooth-scroll-to-internal-links-with-jquery
 */

$(document).ready(function(){
    $('a[href^="#"]').on('click',function (e) {
        e.preventDefault();

        var target = this.hash;
        var $target = $(target);

        $('html, body').stop().animate({
            'scrollTop': $target.offset().top
        }, 900, 'swing', function () {
            window.location.hash = target;
        });
    });
});
2
Rene Korss