头像下拉菜单、未读消息的延时

app/controllers/users_controller.rb

@@ -135,7 +135,7 @@ class UsersController < ApplicationController
         unless (message_all.message_type == 'CourseMessage' && mess && mess.course  && mess.course.is_delete == 1)
           @message_alls << mess
         end
-        break if @message_alls.length == 5
+        break if @message_alls.length == 10
       end
     end
   end

app/views/layouts/_logined_header.html.erb

@@ -91,6 +91,8 @@
 </div>
 
 <script type="text/javascript">
+    var onUserMessages = false;
+    var onNotice = false;
     //搜索相关
     $("#navHomepageSearch").mouseover(function(){
         $("#navHomepageSearchType").show();
@@ -99,13 +101,32 @@
     });
 
     $("#user_messages").mouseenter(function(){
+        onNotice = true;
         $("#user_messages_list").show();
-        $.get('<%=user_messages_unviewed_users_path %>');
-        $("#ajax-indicator").hide();
+        if($("#message_list_detail").length == 0){
+            $.get('<%=user_messages_unviewed_users_path %>');
+            $("#ajax-indicator").hide();
+        }
+        var obj = $("#user_messages_list");
+        clearTimeout(obj.timer);
     }).mouseleave(function(){
-        $("#user_messages_list").hide();
-        $("#user_messages_list").html("<%=escape_javascript(render :partial => 'layouts/message_loading') %>");
+        onNotice = false;
+        var obj = $("#user_messages_list");
+        obj.timer = setTimeout(function(){
+            if(!onNotice && !onUserMessages)
+            obj.hide(0);
+            obj.html("<%=escape_javascript(render :partial => 'layouts/message_loading') %>");
+        }, 500);
+    });
 
+    $("#user_messages_list").mouseenter(function(event){
+        event.stopPropagation();
+        onUserMessages = true;
+        $(this).show();
+    }).mouseleave(function(){
+        onUserMessages = false;
+        $(this).hide();
+        $(this).html("<%=escape_javascript(render :partial => 'layouts/message_loading') %>");
     });
 
     $("#navHomepageProfile").mouseenter(function(){

app/views/layouts/_show_messages_list.html.erb

@@ -1,4 +1,5 @@
 <font></font>
+<div id="message_list_detail">
 <h4 class="shadowbox_news_title">未读消息</h4>
 <ul class="shadowbox_news_list">
   <% messages.each do |ma| %>
@@ -134,4 +135,27 @@
       <% end %>
   <% end %>
 </ul>
-<%= link_to '查看全部', user_message_path(User.current), :class => "shadowbox_news_all", :target =>"_Blank" %>
+  <a onclick = "show_more();" id = "show_more_messages"  class = "shadowbox_news_all undis">展开更多</a>
+<%= link_to '查看全部', user_message_path(User.current),:id =>'show_all_messages', :class => "shadowbox_news_all undis", :target =>"_Blank" %>
+</div>
+
+<script type="text/javascript">
+    $(function(){
+        if($(".shadowbox_news_list li").length > 5) {
+            $(".shadowbox_news_list li").hide();
+            $(".shadowbox_news_list li").eq(0).show();
+            $(".shadowbox_news_list li").eq(1).show();
+            $(".shadowbox_news_list li").eq(2).show();
+            $(".shadowbox_news_list li").eq(3).show();
+            $(".shadowbox_news_list li").eq(4).show();
+            $("#show_more_messages").show();
+        } else {
+            $("#show_all_messages").show();
+        }
+    });
+    function show_more() {
+        $(".shadowbox_news_list li").show();
+        $("#show_more_messages").hide();
+        $("#show_all_messages").show();
+    }
+</script>

public/stylesheets/public.css

@@ -533,7 +533,7 @@ a.homepageSearchIcon:hover {background:url(../images/nav_icon.png) -49px 3px no-
 .homepageNewsIcon {background:url(../images/nav_icon.png) -5px -85px  no-repeat; width:30px; height:35px; display:block;}
 .newsActive {width:16px; height:16px; border-radius:50%;  background-color:#ff0000; position:absolute; left:17px; top:5px; text-align:center;font-size:12px; color:#ffffff !important;padding-bottom: 3px;padding-left: 2px;padding-right: 1px;font-weight: bold;}
 .navHomepageProfile {width:65px; display:block; float:right; margin-left:33px;}
-.homepageProfileMenuIcon {background:url(../images/nav_icon.png) 30px -155px no-repeat; width:65px; height:50px; position:relative; display:inline-block;}
+.homepageProfileMenuIcon {background:url(../images/nav_icon.png) 30px -155px no-repeat; width:65px; height:54px; position:relative; display:inline-block;}
 .homepageProfileMenuIcon:hover {background:url(../images/nav_icon.png) 30px -122px no-repeat;}
 .navHomepageProfile ul li ul {display:none;}
 .navHomepageProfile ul li:hover ul {display:block;}