jquery - Rails 如何创建 Jquery flash 消息而不是默认的 Rails 消息

Question

我想在页面顶部创建自定义 Jquery 消息而不是标准 Rails Flash 消息。我想在我的投票底部附近创建一条即时消息。

我的 Controller :

def vote_up
  @post = Post.find(params[:id])
  current_user.up_vote(@post)
  flash[:message] = 'Thanks for voting!'
  redirect_to(root_path, :notice => 'Tak for dit indlæg, det er nu online!')
rescue MakeVoteable::Exceptions::AlreadyVotedError
  flash[:error] = 'Already voted!'
  redirect_to root_path
end

我的看法:

<% @posts.each do |post| %>
  <h1><%= post.titel %></h1>
  <p><%= post.body_html %></p>
  <p><%= link_to 'Vote up', stem_op_path(post.id) %> BRUGERNAVN: <%= post.user.username %> | UPVOTES: <%= post.up_votes %> | DOWN VOTES: <%= post.down_votes %> OPRETTET: <%= post.created_at.strftime("%d %B") %><%= link_to 'Destroy', post, :confirm => 'Are you sure?', :method => :delete %></p>
  </tr>
<% end %>

Answer 1

Groupon 风格的通知 将背景与 alfa channel 放在一起以获得最佳外观

#rails controller   
flash[:notice] = "Login successful!"



#rails helper
module ApplicationHelper
  def flash_notifications
    message = flash[:error] || flash[:notice]

    if message
      type = flash.keys[0].to_s
      javascript_tag %Q{$.notification({ message:"#{message}", type:"#{type}" });}
    end
  end

end



#rails layout
<%= flash_notifications -%>



#javascript code
(function( $, undefined ) {
    $.notification = function(options) {
        var opts = $.extend({}, {type: 'notice', time: 3000}, options);
        var o    = opts;

        timeout          = setTimeout('$.notification.removebar()', o.time);
        var message_span = $('<span />').addClass('jbar-content').html(o.message);
        var wrap_bar     = $('<div />').addClass('jbar jbar-top').css("cursor", "pointer");

    if (o.type == 'error') {
          wrap_bar.css({"color": "#D8000C"})
        };

        wrap_bar.click(function(){
            $.notification.removebar()
        });

        wrap_bar.append(message_span).hide()
            .insertBefore($('.container')).fadeIn('fast');
    };


    var timeout;
    $.notification.removebar    = function(txt) {
        if($('.jbar').length){
            clearTimeout(timeout);

            $('.jbar').fadeOut('fast',function(){
                $(this).remove();
            });
        }   
    };


})(jQuery);



#css
.jbar{
    height:50px;
    width:100%;
    position:fixed;
    text-align:center;
    left:0px;
    z-index:9999999;
    margin:0px;
    padding:0px;
    filter:progid:DXImageTransform.Microsoft.Alpha(opacity=92); 
    opacity: 0.92;
    -moz-opacity: 0.92;
    -moz-box-shadow: #555 0px 0px 5px;
    box-shadow: #555 0px 0px 5px;
}

.jbar-top{
    top:0px;
}

.jbar-bottom{
    bottom:0px;
}

.jbar-content{
    line-height:46px;
    font-size: 18px;
}

.jbar-top a.jbar-cross{
    top:8px;    
}

.jbar-bottom a.jbar-cross{
    bottom:8px;
}