0

所以我正在开发一个 RoR 应用程序，希望能得到一些帮助。在这个应用程序中，我有一系列的讨论，由用户发布，下面有评论，也是由用户发布的。在设计方面，我认为如果每次讨论都占据整个屏幕并在其右侧有一个按钮会很酷。按下此按钮将导致视图移动并显示另一个讨论。关于我将如何做这件事的任何建议？这是我目前的部分讨论。谢谢！

<link href='http://fonts.googleapis.com/css?family=Titillium+Web:400,300' rel='stylesheet' type='text/css'>


<% content_for :script do %>
    <%= javascript_include_tag 'hover_content' %>
    <% end %>

<% @micropost = Micropost.new %>
<% @micropost.discussion_id = discussion.id %>

<li>
  <div class = "intro-bar"><span class = "intro"><%=discussion.intro %></span></div>
  <div class = "content-bar">
    <span class = "content"><%= discussion.content %></span>
  </div>
  <input type='button' id='hideshow' value='hide/show'>
</li>

<span class = "timestamp">
    Posted <%= time_ago_in_words(discussion.created_at) %> ago.
  </span>

            <% if signed_in? %>
                <div class = "row">
                  <aside class = "span4">
                    <section>
                      <%= form_for(@micropost) do |f| %>
                          <%= render 'shared/error_messages', object: f.object %>
                          <div class="field">
                            <%= f.text_area :content, placeholder: "Post a comment" %>
                          </div>
                          <%= f.hidden_field :discussion_id%>

                          <%= f.submit "Break Up", class: "btn btn-large btn-breakup",:name => "break_up" %>
                          <%= f.submit "Stay Together", class: "btn btn-large btn-staytogether", :name => "stay_together" %>
                              <% end %>
                              </section>
                              </aside>
                              </div>
                          <% end %>

<div class = "comments">
  <% discussion.microposts.each do |micropost| %>
      <div class = 'comment-box'>
      <li>
        <div class = "comment-pic"></div>
        <div class = "post-comment"><%= micropost.content%></div>
      </li>
      </div>
  <% end %>
</div>
4

1 回答 1

0

你最好的选择是旋转木马。

对于 jQuery：http ://sorgalla.com/projects/jcarousel/

（“特殊示例”部分有一个文本滚动条，看起来像您想要的，但垂直）

对于原型：http ://code.google.com/p/prototype-carousel/

于 2013-06-27T13:48:55.710 回答