jeudi 19 décembre 2013

Bootstrap ajout de la classe active class to li

Dans l'exemple ci-dessous, nous avons un menu classique Bootstrap. Il faut noter qu'aucune class active n'est présente :
    <div class="navbar navbar-default span12" role="navigation">
            <...>
            <div class="navbar-collapse collapse">
                <ul class="nav navbar-nav">
                    <li><a href="/fjLearning/"><g:message code="menu.home" /></a></li>
                    <li><a href="/fjLearning/page/training"><g:message code="menu.training" /></a></li>
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown"><g:message code="menu.about" /> <b class="caret"></b></a>
                        <ul class="dropdown-menu">
                            <li><a href="/fjLearning/page/about"><g:message code="menu.about.perso" /></a></li>
                            <li class="divider"></li>
                            <li class="dropdown-header"><g:message code="menu.about.site" /></li>
                            <li><a href="/fjLearning/page/under"><g:message code="menu.underTheHood" /></a></li>
                            <li><a href="#">FAQ</a></li>
                        </ul>
                    </li>
                </ul>
            </div>
    </div>

Pour que cela fonctionne, j'ai juste ajouté dans chaque page :
<body>
<script>
    $(document).ready(function() {
        $('a[href="' + this.location.pathname + '"]').parent().addClass('active');
    });
</script>
...

A présent, lorsque je clique sur un des éléments de mon menu, il est automatiquement sélectionné.
Si vous voulez voir un exemple pratique, vous pouvez voir mon projet Grails sur GitHub : https://github.com/drieu/fjLearning

Voici les deux fichiers utiles :
https://github.com/drieu/fjLearning/blob/master/grails-app/views/layouts/_menu.gsp
https://github.com/drieu/fjLearning/blob/master/grails-app/views/page/training.gsp