Modification de la classe active d'un lien avec le CSS twitter bootstrap en python / flask
J'ai obtenu l'extrait html suivant de ma page template.html.
<ul class='nav'>
<li class="active"><a href='/'>Home</a></li>
<li><a href='/lorem'>Lorem</a></li>
{% if session['logged_in'] %}
<li><a href="/account">Account</a></li>
<li><a href="/projects">Projects</a>
<li><a href="/logout">Logout</a></li>
{% endif %}
{% if not session['logged_in'] %}
<li><a href="/login">Login</a></li>
<li><a href="/register">Register</a></li>
{% endif %}
</ul>
Comme vous pouvez le voir sur la ligne 2, Il y a la classe active. Cela met en évidence l'onglet actif avec le fichier CSS twitter bootstrap. Maintenant, cela fonctionnera bien si je visiterais www.page.com/ mais pas quand je visiterais www.page.com/login par exemple. Il mettrait toujours en évidence le lien d'accueil comme onglet actif.
Bien sûr, je pourrais facilement le faire avec Javascript/jQuery mais je préfère ne pas l'utiliser dans cette situation.
Il y a déjà un solution de travail pour ruby on rails mais je ne sais pas comment convertir cela en python / jinja (je suis plutôt nouveau sur jinja/flask, Je n'ai jamais travaillé avec ruby)
4 réponses
Avez-vous regardé ça? http://jinja.pocoo.org/docs/tricks/
Mettre En Surbrillance Les Éléments De Menu Actifs
Souvent, vous voulez avoir une barre de navigation avec un élément de navigation. C'est vraiment simple à réaliser. Étant donné que les affectations en dehors des blocs dans les modèles enfants sont globales et exécutées avant l'évaluation du modèle de mise en page, il est possible de définir l'élément de menu actif dans le modèle enfant:
{% extends "layout.html" %}
{% set active_page = "index" %}
Le modèle de mise en page peut alors accéder à active_page. De plus, il est logique de définir une valeur par défaut pour cette variable:
{% set navigation_bar = [
('/', 'index', 'Index'),
('/downloads/', 'downloads', 'Downloads'),
('/about/', 'about', 'About')
] -%}
{% set active_page = active_page|default('index') -%}
...
<ul id="navigation">
{% for href, id, caption in navigation_bar %}
<li{% if id == active_page %} class="active"{% endif
%}><a href="{{ href|e }}">{{ caption|e }}</a>
</li>
{% endfor %}
</ul>
...
Pour jinja/flacon/bootstrap utilisateurs:
Si vous définissez votre nav comme ils l'ont fait dans l'exemple de blog http://getbootstrap.com/examples/blog/ il suffit d'attribuer des ID à vos liens qui correspondent à vos argumentsurl_for et vous avez juste besoin de modifier le modèle de mise en page, le reste fonctionne simplement #magic.
<nav class="blog-nav">
<a id="allposts" class="blog-nav-item" href="{{ url_for('allposts')}}">All Posts</a>
<a id="index" class="blog-nav-item" href="{{ url_for('index')}}">Index</a>
<a id="favorites" class="blog-nav-item" href="{{ url_for('favorites')}}">Favorites</a>
</nav>
Au bas de votre modèle de base/mise en page, ajoutez simplement ceci
<script>
$(document).ready(function () {
$("#{{request.endpoint}}").addClass("active"); })
</script>
Et les bons éléments seront activés.
modifier: Si vous avoir une mise en page avec des éléments dans une liste, comme ceci:
<nav class="blog-nav">
<ul class="nav navbar-nav">
<li>
<a id="allposts" class="blog-nav-item" href="{{ url_for('allposts')}}">All Posts</a>
</li>
<li>
<a id="index" class="blog-nav-item" href="{{ url_for('index')}}">Index</a>
</li>
<li>
<a id="favorites" class="blog-nav-item" href="{{ url_for('favorites')}}">Favorites</a>
</li>
</ul>
</nav>
Utilisez la fonction parent () pour obtenir l'élément li au lieu du lien.
<script>
$(document).ready(function () {
$("#{{request.endpoint}}").parent().addClass("active"); })
</script>
Voici un autre moyen plus simple si vous avez des menus répartis sur toute la page. De cette façon, utilise les instructions if inline pour imprimer la classe active.
<ul>
<li class="{{ 'active' if active_page == 'menu1' else '' }}">
<a href="/blah1">Link 1</a>
</li>
<li class="{{ 'active' if active_page == 'menu2' else '' }}">
<a href="/blah2"> Link 2 </a>
</li>
</ul>
La classe active sert à mettre en surbrillance
Vous devez toujours définir la variable sur chaque page pour les marquer
{% extends "master.html" %}
{% set active_page = "menu1" %}
Ou
{% set active_page = "menu2" %}
Ajoutez le CSS suivant quelque part sur votre page:
a[href $= {{ page_name|default("'/'"|safe) }}]{ [INSERT YOUR ACTIVE STYLING HERE] }
Maintenant, sur chaque modèle define page_name, par exemple:
{% extends "template.html" %}
{% set page_name = "gallery" %}
Cela semble beaucoup plus simple et plus facile à construire, que d'autres options.