css class as parameter

rubyonrails-talk
1

hello,

I would like to know how could it be possible to set a css class as parameter and a default one.

For instance class="active" will be located on the first, second lines, depending on the action.

application.html.erb:

<li class="active"><a href="#">Tasks</a></li> <li><a href="#">Categories</a></li> <li><a href="#">Calendar</a></li> <li><a href="#">Eisenhower matrix</a></li>

Any help would be highly appreciated.

bye

2

For instance class="active" will be located on the first, second lines, depending on the action.

application.html.erb:

<li class="active">

things.each_with_index do |thing, index|

  <li <%= 'class="active"' if index == 2 and params[:action] == 'foo' %> >Tasks</li>

That's just the sketch of the behaviors - but you must clean it up. The 2 and the 'foo' should appear in a table, preferably inside the thing model. Controllers should have the minimum possible logical statements, and View should have less.

<li class="<%= thing.get_class(index, params[:action]) %>" >Tasks</li>

3

Thanks for helping.

Does it mean that I need to create a get_class function in each model (tasks, categories, calendar ...)?

Thanks for your help.

4

You could use a method call from a helper.

For your example:

in the application.html.erb <li class="<%=get_class 'Tasks' %>"><a href="#">Tasks</a></li> <li class="<%=get_class 'Categories' %>"><a href="#">Categories</a></

<li class="<%=get_class 'Calendar' %>"><a href="#">Calendar</a></li> <li class="<%=get_class 'Eisenhower matrix' %>"><a href="#">Eisenhower matrix</a></li>

then in the application_helper.rb

def get_class(active_action)   "active" if @active_action == active_action end

then in your actions set the @active_action variable

for your default, you could set the @active_action in the application.rb controller, then it will be overwritten if some action specifically overrides the variable

5

If you are trying to highlight the active tab a good way of doing it is by giving all the tabs an id as well as a body id for each of the pages that the tabs exist on. Once you do this you have control of the active tab style.

ex.

<body id="tasks">    <ul id="tabs">       <li id="task_tab">...</li>       <li id="categories_tab">...</li> ...

# css   # the active tab body#tasks li#task_tab, body#categories li#category_tab ... {    ... }   # the inactive tabs ul#tabs { ... }