(first posted: Feb 12, 2008)
(1029 Reads)
keywords: helpers link_to tabs
Permalink
link to tag current
I don't usually write about simple helpers that I make, but this one is more generally helpful and important, I think.
"link_to_tag_current is a variant of link_to_unless_current which tags the current item. Whereas link_to_unless_current generates plain text when the link would be the current page, this new helper wraps the plain text in a different tag. Without it there's no easy way to distinguish the current item from the others in CSS.
def link_to_tag_current( name, tag, options={}, html_options={}, &block)
content = link_to_unless_current(name, options, html_options, &block)
current_page?(options) ? content_tag(tag, content) : content
end
To use it, for example, here's a tabs partial:
<div class="simple-tabs">
<ul>
<li><%= link_to_tag_current "Foos", :span, foos_path %></li>
<li><%= link_to_tag_current "Bars", :span, bars_path %></li>
<li><%= link_to_tag_current "Baz", :span, bazs_path %></li>
<li><%= link_to_tag_current "Burns", :span, burns_path %></li>
</ul>
</div>
And an example corresponding CSS:
.simple-tabs {margin:0; padding:0;
margin-top: 10px;
width:100%;
line-height:normal;
font-style: italic;
}
.simple-tabs ul {
margin:0;
float: left;
padding:0 1em;
list-style: none;
list-style-image: none;
border: 1px solid #888;
border-width: 0 0 1px 0;
}
.simple-tabs li {
display:block;
float:left;
margin: 0 0 0 1em;
padding: 0;
text-align: center;
}
.simple-tabs ul li span {padding:0 1em;
border: 1px solid #888;
border-bottom-color: #fff;
}
.simple-tabs ul li a {padding:0 1em;
border: 1px solid #888;
text-decoration:none;
color:#410000;
}
Produces something like this:
By the way, I did consider a slightly different approach, that'd give the current <li> tag a "class = 'current-item'", but that would require the helper also generate the <li> tags along with the link_to, which is a little too app-specific. In the end I decided to keep in line with the existing link_to family of helpers.
There are no comments attached to this item.



