超级下拉列表

Arc*_*Arc 2 css ruby-on-rails drop-down-menu

我想像在Rails gudes网站(http://guides.rubyonrails.org/)中使用的那个或者在BaseCamp.CAn中使用的那些,使用Rails表单助手完成一个巨型工作?

Sha*_*mer 6

不是自动的,没有."mega下拉列表"实际上只是一个DIV元素,看起来好像是"指南索引"打开了.您所要做的就是定位DIV,使其看起来正确.

在您提供的网站中,这是通过将DIV嵌套在包含"Guide Index"元素的元素内部来完成的.像这样的东西:

<outerelement style="position: relative; top: 0px; left: 0px">
  <a href="#">Guide Index</a>
  <div id="index" style="position: absolute; top: 0px; left: 0px; display: none">
     <!-- all the items in the guide index -->
  </div>
</outerelement>
Run Code Online (Sandbox Code Playgroud)

我不记得如何在Rails中使用原型助手来生成这个,但是当你点击"引导索引"链接时你只需要一些Javascript代码就可以了:

 Element.toggle('index');
Run Code Online (Sandbox Code Playgroud)

可能是这样的:

 <%=link_to_function("Guide Index", "Element.toggle('index')")%>
Run Code Online (Sandbox Code Playgroud)

那么你在.rb文件中最终得到的是:

<outerelement style="position: relative; top: 0px; left: 0px">
  <%=link_to_function("Guide Index", "Element.toggle('index')")%>
  <div id="index" style="position: absolute; top: 0px; left: 0px; display: none">
     <!-- all the items in the guide index -->
  </div>
</outerelement>
Run Code Online (Sandbox Code Playgroud)