未读消息弹窗“点击展开”显示10条未读消息

app/views/layouts/_show_messages_list.html.erb

@@ -1,6 +1,7 @@
 <font></font>
 <div id="message_list_detail">
 <h4 class="shadowbox_news_title">未读消息</h4>
+<p style="display: none;" id="none_message" class="shadowbox_news_p text_c">无未读消息</p>
 <ul class="shadowbox_news_list">
   <% messages.each do |ma| %>
     <% if ma.class == SystemMessage %>
@@ -135,8 +136,8 @@
       <% end %>
   <% end %>
 </ul>
-  <a onclick = "show_more();" id = "show_more_messages"  class = "shadowbox_news_all undis">展开更多</a>
+  <a onclick = "show_more();" id = "show_more_messages" style="display: none" class = "shadowbox_news_all">展开更多</a>
-<%= link_to '查看全部', user_message_path(User.current),:id =>'show_all_messages', :class => "shadowbox_news_all undis", :target =>"_Blank" %>
+<%= link_to '查看全部', user_message_path(User.current),:id =>'show_all_messages', :class => "shadowbox_news_all", :style => "display:none", :target =>"_Blank" %>
 </div>
 
 <script type="text/javascript">
@@ -149,7 +150,11 @@
             $(".shadowbox_news_list li").eq(3).show();
             $(".shadowbox_news_list li").eq(4).show();
             $("#show_more_messages").show();
-        } else {
+        } else if ($(".shadowbox_news_list li").length == 0) {
+            $("#none_message").show();
+            $("#show_all_messages").show();
+        }
+        else {
             $("#show_all_messages").show();
         }
     });

public/stylesheets/new_user.css

@@ -1620,8 +1620,9 @@ ul.wlist li a:hover{ background:#15bccf; color:#fff; text-decoration:none;}
 /*消息弹框*/
 .shadowbox_news{ width:305px; background-color:#fff;    box-shadow: 0px 2px 8px rgba(146, 153, 169, 0.5); position: absolute; left: -131px; top: 45px; z-index: 9999;}
 .shadowbox_news_title{ height:40px; line-height:40px;padding-left:10px; font-size:12px; color:#333;border-bottom:1px solid #eee;}
+.shadowbox_news_p{ height:40px; line-height:40px; font-size:12px; color:#333;}
 .shadowbox_news font{ border: 1px solid #dddddd;   display: block; border-width: 8px; position: absolute; top: -15px;left: 140px; border-style:solid; border-color:  transparent transparent  #fff transparent;font-size: 0;line-height: 0;  box-shadow:2px rgba(146, 153, 169, 0.5); }
-.shadowbox_news_list{ max-height:200px; overflow:hidden;}
+.shadowbox_news_list{ max-height:400px; overflow:hidden;}
 .shadowbox_news_list a{ color:#999;}
 .shadowbox_news_list li{ height:40px; border-bottom:1px dashed #ebebeb; line-height:40px;overflow:hidden; white-space: nowrap; text-overflow:ellipsis; padding:0 10px;}
 .shadowbox_news_list li:hover{ background-color:#eee;}

public/stylesheets/public.css

@@ -1155,8 +1155,9 @@ a.st_down{ display: block; width:8px; float:left; height:13px; background:url(..
 /*消息弹框*/
 .shadowbox_news{ width:305px; background-color:#fff;    box-shadow: 0px 2px 8px rgba(146, 153, 169, 0.5); position: absolute; left: -131px; top: 45px; z-index: 9999;}
 .shadowbox_news_title{ height:40px; line-height:40px;padding-left:10px; font-size:12px; color:#333;border-bottom:1px solid #eee;}
-.shadowbox_news font{ border: 1px solid #dddddd;   display: block; border-width: 8px; position: absolute; top: -15px;left: 140px; border-style:solid; border-color:  transparent transparent  #fff transparent;font-size: 0;line-height: 0;  box-shadow:2px rgba(146, 153, 169, 0.5); }
+.shadowbox_news_p{ height:40px; line-height:40px; font-size:12px; color:#333;}
-.shadowbox_news_list{ max-height:200px; overflow:hidden;}
+.shadowbox_news font{ border: 1px solid #dddddd; display: block; border-width: 8px; position: absolute; top: -15px;left: 140px; border-style:solid; border-color:  transparent transparent  #fff transparent;font-size: 0;line-height: 0;  box-shadow:2px rgba(146, 153, 169, 0.5); }
+.shadowbox_news_list{ max-height:400px; overflow:hidden;}
 .shadowbox_news_list a{ color:#999;}
 .shadowbox_news_list li{ height:40px; border-bottom:1px dashed #ebebeb; line-height:40px;overflow:hidden; white-space: nowrap; text-overflow:ellipsis; padding:0 10px;}
 .shadowbox_news_list li:hover{ background-color:#eee;}