web-dev-qa-db-fra.com

Changer la classe active d'un lien avec le bootstrap css de Twitter dans python/flask

J'ai l'extrait de code 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 de démarrage de Twitter. 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 en tant qu'onglet actif.

Bien sûr, je pourrais facilement le faire avec Javascript/jQuery mais je préférerais ne pas l'utiliser dans cette situation.

Il y a déjà une solution de travail pour Ruby on Rails mais je ne sais pas comment convertir cela en python/jinja (je suis plutôt nouveau dans le jinja/flask, je n'ai jamais travaillé avec Ruby)

pythonclasstwitter-bootstrapflaskjinja2
27
Azeirah

Avez-vous regardé ça? http://jinja.pocoo.org/docs/tricks/

Mise en surbrillance des éléments de menu actifs

Souvent, vous voulez avoir une barre de navigation avec un élément de navigation actif. C'est très simple à réaliser. Les affectations hors blocs dans les modèles enfants étant globales et exécutées avant l'évaluation du modèle de présentation, 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 présentation 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>

...

62
codegeek

Voici un autre moyen plus simple si vous avez des menus répartis sur toute la page. De cette façon, les instructions inline if sont imprimées pour afficher 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>

Classe active est pour mettre en évidence

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" %}
4
varun

Pour jinja/flask/bootstrap users:

Si vous définissez votre navigation comme dans l'exemple de blog http://getbootstrap.com/examples/blog/ Attribuez simplement à vos liens des identifiants correspondant à vos arguments url_for et il vous suffit de modifier le modèle de présentation, le reste ne fonctionne que #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/maquette, ajoutez simplement ceci

<script>
  $(document).ready(function () {
  $("#{{request.endpoint}}").addClass("active"); })
</script>

et les bons éléments seront activés.

MODIFIER: Si vous avez 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 le  parent()  fonction pour obtenir l'élément li au lieu du lien.

<script>
    $(document).ready(function () {
    $("#{{request.endpoint}}").parent().addClass("active"); })
</script>
4
philmaweb

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, définissez page_name, par exemple:

{% extends "template.html" %} {% set page_name = "gallery" %}

Cela semble beaucoup plus simple et plus facile à construire que d’autres options.

0
0c370t