Ich habe einige statische Seiten in einem Navigationsmenü. Ich möchte dem aktuell angezeigten Element eine Klasse wie "aktuell" hinzufügen.
Ich füge dazu Tonnen von Hilfsmethoden hinzu (jeweils für einen Gegenstand), um den Controller und die Aktion zu überprüfen.
def current_root_class
'class="current"' if controller_name == "homepage" && action_name == "index"
end
<ul>
<li <%= current_root_class %>><%= link_to "Home", root_path %>
Gibt es einen besseren Weg, dies zu tun? Mein aktueller Weg ist so dumm ......
navigation
ruby-on-rails-3
PeterWong
quelle
quelle
controller_name
undaction_name
anstelle von Params wahrscheinlichIch habe einen Helfer namens gemacht
nav_link
:verwendet wie:
das wird HTML wie produzieren
quelle
Verwenden Sie den
current_page?
Helfer, um zu bestimmen, ob Sie die"current"
Klasse zuweisen sollen oder nicht . Beispielsweise:Beachten Sie, dass Sie auch einen Pfad übergeben können (nicht nur einen Hash von Optionen), z
current_page?(root_path)
.quelle
Ich verwende diese Funktion nav_link (Text, Link) in application_helper.rb (Rails 3), um die Arbeit zu erledigen, und sie rollt meine Bootstrap-Twitter 2.0-Navigationsleisten-Links für mich.
Beispiel:
quelle
current_page?
Methode wie in anderen Antworten vereinfacht werden .Ich habe es so gemacht, dass ich dem application_helper eine Hilfsfunktion hinzufüge
Dann in der Navi,
Dadurch wird der Verknüpfungspfad mit der aktuellen Seiten-URL verglichen und entweder Ihre aktuelle Klasse oder eine leere Zeichenfolge zurückgegeben.
Ich habe dies nicht gründlich getestet und bin sehr neu in RoR (nach einem Jahrzehnt mit PHP). Wenn dies also einen großen Fehler aufweist, würde ich es gerne hören.
Zumindest auf diese Weise benötigen Sie nur 1 Hilfsfunktion und einen einfachen Aufruf in jedem Link.
quelle
Um die Antwort von @Skilldrick auszubauen ...
Wenn Sie diesen Code zu application.js hinzufügen, wird sichergestellt, dass alle Dropdown-Menüs mit aktiven untergeordneten Elementen auch als aktiv markiert werden ...
So rekapitulieren Sie unterstützenden Code> Fügen Sie einen Helfer namens nav_link hinzu:
verwendet wie:
das wird HTML wie produzieren
quelle
Ich denke der beste Weg ist
application_helper.rb:
Und im Menü:
quelle
<%= content_tag(:li, "Click me", class: is_active('controller', 'action')) %>
, es wird kein Klassenattribut für nil gedruckt. apidock.com/rails/ActionView/Helpers/TagHelper/content_tagIch weiß, dass es eine veraltete Antwort ist, aber Sie können all diese aktuellen Seitenprüfungen leicht ignorieren, indem Sie einen Link_to-Helfer-Wrapper namens active_link_to gem verwenden. Es funktioniert genau so, wie Sie es möchten . Fügen Sie dem aktuellen Seitenlink eine aktive Klasse hinzu
quelle
Hier ist das vollständige Beispiel zum Hinzufügen einer aktiven Klasse auf der Bootstrap-Menüseite in der Rails-Ansicht.
quelle
Ich benutze ein tolles Juwel namens Tabs on Rails .
quelle
Ich habe eine prägnantere Version von nav_link, die genau wie link_to funktioniert, aber angepasst ist, um ein umhüllendes li-Tag auszugeben.
Fügen Sie Folgendes in Ihre application_helper.rb ein
Wenn Sie sich den obigen Code ansehen und ihn mit dem link_to-Code in url_helper.rb vergleichen, besteht der einzige Unterschied darin, dass überprüft wird, ob die URL die aktuelle Seite ist, und die Klasse "active" zu einem umhüllenden li-Tag hinzugefügt wird. Dies liegt daran, dass ich den nav_link-Helfer mit der nav-Komponente von Twitter Bootstrap verwende, die bevorzugt, dass Links in li-Tags eingeschlossen werden und die "aktive" Klasse auf das äußere li angewendet wird.
Das Schöne am obigen Code ist, dass Sie einen Block in die Funktion übergeben können, genau wie Sie es mit link_to tun können.
Eine Bootstrap-Navigationsliste mit Symbolen würde beispielsweise folgendermaßen aussehen:
Schlank:
Ausgabe:
Darüber hinaus können Sie genau wie der link_to-Helfer HTML-Optionen an nav_link übergeben, die auf das a-Tag angewendet werden.
Ein Beispiel für die Übergabe eines Titels für den Anker:
Schlank:
Ausgabe:
quelle
Für mich persönlich habe ich hier eine Kombination von Antworten verwendet
Ich verwende materialise css und meine Art, die Hauptkategorien zusammenklappbar zu machen, ist die Verwendung des folgenden Codes
hoffe es hilft jemandem
quelle
Die
current_page?
Methode ist für mich nicht flexibel genug (sagen wir, Sie legen einen Controller fest, aber keine Aktion, dann wird nur bei der Indexaktion des Controllers true zurückgegeben), daher habe ich dies basierend auf den anderen Antworten gemacht:Beispiel:
quelle
Ja! Lesen Sie diesen Artikel: Eine bessere Möglichkeit, Links in Rails eine 'ausgewählte' Klasse hinzuzufügen
Legen Sie nav_link_helper.rb in app / helpers ab und es kann so einfach sein wie:
Der nav_link-Helper funktioniert genau wie der standardmäßige Rails link_to-Helfer, fügt jedoch Ihrem Link (oder seinem Wrapper) eine 'ausgewählte' Klasse hinzu, wenn bestimmte Kriterien erfüllt sind. Wenn die Ziel-URL des Links mit der URL der aktuellen Seite übereinstimmt, wird dem Link standardmäßig die Standardklasse "Ausgewählt" hinzugefügt.
Hier gibt es einen Kern: https://gist.github.com/3279194
UPDATE: Dies ist jetzt ein Juwel: http://rubygems.org/gems/nav_link_to
quelle
Ich verwende einen einfachen Helfer wie diesen für Links der obersten Ebene, damit die
/stories/my-story
Seite den/stories
Link hervorhebtquelle
Lassen Sie mich meine Lösung zeigen:
_header.html.erb :
application_helper.rb :
application_controller.rb :
quelle
Nach der Antwort von Skilldrick werde ich Folgendes ändern:
um es viel nützlicher zu machen.
quelle
Diese Version basiert auf der von @ Skilldrick, ermöglicht jedoch das Hinzufügen von HTML-Inhalten.
So können Sie tun:
nav_link "A Page", a_page_path
aber auch:
oder andere HTML-Inhalte (Sie können beispielsweise ein Symbol hinzufügen).
Hier ist der Helfer:
quelle
Ich denke, ich habe eine einfache Lösung gefunden, die für viele Anwendungsfälle hilfreich sein könnte. Das lässt mich:
link_to
(z. B. Hinzufügen eines Symbols innerhalb des Links)application_helper.rb
active
an den gesamten Klassennamen des Link-Elements an, anstatt dass es die einzige Klasse ist.Fügen Sie dies also hinzu zu
application_helper.rb
:Und auf Ihrer Vorlage können Sie so etwas haben:
Als Bonus können Sie a angeben oder nicht
class_name
und es wie folgt verwenden:<div class="<%= current_page?(root_path) %>">
Dank vorheriger Antworten 1 , 2 und Ressourcen .
quelle
Alle diese Funktionen funktionieren mit einfachen Navigationsleisten, aber was ist mit dem Dropdown-Untermenü? Wenn ein Untermenü ausgewählt ist, sollte der oberste Menüpunkt 'aktuell' gemacht werden. In diesem Fall ist tabs_on_rails die Lösung
quelle
So habe ich es in meinem aktuellen Projekt gelöst.
Dann..
quelle
Mein einfacher Weg -
application.html.erb
,main_controller.erb
,Vielen Dank.
quelle
Wenn Sie auch HTML-Optionen Hash in der Ansicht unterstützen möchten. Wenn Sie es beispielsweise mit einer anderen CSS-Klasse oder -ID aufrufen möchten, können Sie die Hilfsfunktion wie folgt definieren.
Rufen Sie diesen Helfer in der Ansicht genauso auf, wie Sie link_to helper aufrufen würden
quelle
Erstellen Sie eine Methode
ApplicationHelper
wie folgt.Verwenden Sie es jetzt in der folgenden Ansicht.
1. Für alle Aktionen eines bestimmten Controllers
2. Für alle Aktionen vieler Controller (mit Komma getrennt)
3. Für bestimmte Aktionen eines bestimmten Controllers
4. Für die spezifische Aktion vieler Steuerungen (durch Komma getrennt)
5. Für einige bestimmte Aktionen eines bestimmten Controllers
6. Für einige spezifische Aktionen vieler Controller (durch Komma getrennt)
Ich hoffe es hilft
quelle