menu_helper—rails中生成菜单

首先进行安装

gem install menu_helper

 

下面看个简单的例子。

 

路由如下所示：

  map.with_options(:controller => 'site') do |site|
    site.home '', :action => 'index'
  end

  map.with_options(:controller => 'about_us') do |about_us|
    about_us.about_us 'about_us', :action => 'index'
    about_us.contact 'about_us/contact', :action => 'contact'
    about_us.who_we_are 'about_us/who_we_are', :action => 'who_we_are'
  end

 

页面如下所示：

<%=
menu_bar do |main|
  main.menu :home
  main.menu :products
  main.menu :services
  main.menu :about_us do |about_us|
    about_us.menu :overview, 'Overview', about_us_url
    about_us.menu :who_we_are
    about_us.menu :contact, 'Contact Us'
  end
  main.menu :search, 'Search', 'http://www.google.com', :class => 'green_link'
end
%>

 

生成的html如下：

<ul class="ui-menubar ui-menubar-1">
  <li class="ui-menubar-menu ui-menubar-menu-1">
    <a href="http://localhost:3000/"><span>Home</span></a>
  </li>
  <li class="ui-menubar-menu ui-menubar-menu-1">
    <a href="http://localhost:3000/products"><span>Products</span></a>
  </li>
  <li class="ui-menubar-menu ui-menubar-menu-1">
    <a href="http://localhost:3000/services"><span>Services</span></a>
  </li>
  <li class="ui-menubar-menu ui-menubar-menu-1">
    <a href="http://localhost:3000/about_us"><span>About Us</span></a>
    <ul class="ui-menubar ui-menubar-2">
      <li class="ui-menubar-menu ui-menubar-menu-2">
        <a href="http://localhost:3000/about_us"><span>Overview</span></a>
      </li>
      <li class="ui-menubar-menu ui-menubar-menu-2">
        <a href="http://localhost:3000/about_us/who_we_are"><span>Who We Are</span></a>
      </li>
      <li class="ui-menubar-menu ui-menubar-menu-2 ui-menubar-last">
        <a href="http://localhost:3000/about_us/contact"><span>Contact Us</span></a>
      </li>
    </ul>
  </li>
  <li class="green_link ui-menubar-menu ui-menubar-menu-1 ui-menubar-last">
    <a href="http://www.google.com"><span>Search</span></a>
  </li>
</ul>

 

至此，一个简单的菜单便生成了。

 

你可以为这个菜单加点样式：

  .ui-menubar-menu {list-style-type:none;}
  .ui-menubar-menu a{text-decoration:none;}
  .ui-menubar-menu a:hover{color:red; text-decoration:underline;}
  .green_link a {color:green;}

 

更多其他用法，可以参考menu_helper的api http://api.pluginaweek.org/menu_helper

评论

7 楼 wozhidao 2009-12-20  

放在模版文件里不就行了，这样感觉更麻烦

6 楼 samsam 2009-12-13  

menu都要这样搞，觉得没必要

5 楼 ywencn 2009-12-12  

yearl 写道

有没有可收缩的那种？

可收缩是jQuery前端的事。。

4 楼 yearl 2009-12-10  

有没有可收缩的那种？

3 楼 fl1429 2009-12-09  

可以 自己 写。。不一定 要 依赖 gem

2 楼 liusong1111 2009-12-09  

ywencn 写道

不至于吧。。连<ul><li>都懒得写了？

如果只是封装ul/li，意义就不大，如果能整合用户权限，就有价值了。

1 楼 ywencn 2009-12-09  

不至于吧。。连<ul><li>都懒得写了？