Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
tag: v0.0.2
Fetching contributors…

Cannot retrieve contributors at this time

136 lines (102 sloc) 4.009 kB

menu_builder

With this gem/plugin you get a helper to define menus and also can control the current item of menu in controller. Easy like always should be!

Instalation

As a Rail2.1+ gem

gem.config "tabs_helper"

As Rails plugin

ruby script/plugin install git://github.com/danielvlopes/tabs_helper.git

Usage

Just install the plugin and see the example below:

Example

Controller

class DashboardController < ApplicationController
  current_tab :mydashboard
  ...
end

View

ERB code

<% tabs :id=>"mainMenu", :class=>"menu" do |tab| %>
  <%= tab.account 'Account', account_path, :style => 'float: right' %>
  <%= tab.users 'Users', users_path, :style => 'float: right' %>
  <%= tab.mydashboard 'Dashboard', '/' %>
  <%= tab.projects 'Projects', projects_path %>
<% end %>

HTML Result

<ul id="mainMenu" class="menu">
  <li><a href="/accounts">Account</a></li>
  <li><a href="/users">Users</a></li>
  <li><a href="/" class="current">Dashboard</a></li>
  <li><a href="/projects">Projects</a></li>
</ul>

Blocks for content

Also is possible to pass blocks instead of simple strings for content. In this way you can create tabs with icons. Like below:

<% tabs do |tab| %>
  <% tab.account account_path do %>
		<%= image_tag "account.jpg" /> Accounts
  <% end %>
  <% tab.users users_path do %>
		<%= image_tag "user.jpg" /> Users
  <% end %>
  <% tab.posts posts_path do %>
		<%= image_tag "posts.jpg" /> Posts
  <% end %>
<% end %>

CSS and HTML

This plugin don't came with any kind of asset like image or css. The layout of tabs and the way of show it depends of you css architecture. You can use any kind of technique with html UL and LI, like below:

<html>
<head>
  <style type="text/css" charset="utf-8">
    #header ul { font-family:Tahoma; position: absolute; margin:0; list-style:none; }
    #header li { display:inline; margin:0; padding:0; }

    #header a {
       float:left;
       background: url(corner_left.jpg) no-repeat left top;
       margin:0;
       padding:0 0 0 4px;
       text-decoration:none;
    }
    #header a span {
       float:left;
       display:block;
       background: url(corner_right.jpg) no-repeat right top;
       padding:4px 14px 4px 6px;
       color:#FFF;
    }

    #header a:hover span { color:#FFF; }
    #header a:hover { background-position:0% -43px; }
    #header a:hover span { background-position:100% -43px; }
    #header #current a { background-position:0% -43px; }
    #header #current a span { background-position:100% -43px; }
  </style>
</head>

<body>
  <div id="header">
    <ul>
      <li><a href="#"><span>Home</span></a></li>
      <li><a href="#"><span>Quem Somos</span></a></li>
      <li><a href="#"><span>Portif&oacute;lio</span></a></li>
      <li><a href="#"><span>Contato</span></a></li>
    </ul>
  </div>
</body>
</html>

You can read a full tutorial and working demo of the technique above in this “link”:www.google.com/translate?langpair=pt|en&u=http://blog.areacriacoes.com.br//2009/1/23/bordas-arredondas-para-menus-em-abas

License

Tabs Helper is released under the MIT License.

Author

Authors

Daniel Lopes

Blog

blog.areacriacoes.com.br

Github

github.com/danielvlopes

Twitter

danielvlopes

Note on Patches/Pull Requests

  • Fork the project.

  • Make your feature addition or bug fix.

  • Add tests for it. This is important so I don't break it in a future version unintentionally.

  • Commit, do not mess with rakefile, version, or history. (if you want to have your own version, that is fine but bump version in a commit by itself I can ignore when I pull)

  • Send me a pull request. Bonus points for topic branches.

Copyright

Copyright © 2010 Daniel Lopes. See LICENSE for details.

Jump to Line
Something went wrong with that request. Please try again.