个人主页的tab的JS及其样式

This commit is contained in:
daiao 2016-12-14 10:17:39 +08:00
parent f124470af2
commit 0d4dc89c73
2 changed files with 98 additions and 51 deletions

View File

@ -4,96 +4,141 @@
$(function(){ $(function(){
$($(".homepage_tab_div")[$(".homepage_tab_div").length - 1]).css("border", "none"); $($(".homepage_tab_div")[$(".homepage_tab_div").length - 1]).css("border", "none");
}); });
// 个人主页的tab
function g(o){
return document.getElementById(o);
}
function HoverLi(n){
g('message_all_list').className='undis';
//如果有N个标签,就将i<=N;
for(var i = 1; i <= 6; i++){
if (g('user_homepage_tab_'+i) != null)
g('user_homepage_tab_'+i).className='flex-cell_homepage';
if(g('message_list_content_'+i) != null)
g('message_list_content_'+i).className='undis';
}
g('message_list_content_'+1).className='dis';
g('user_homepage_tab_'+n).className='homepageClickBackground';
}
</script> </script>
<% if is_current_user %> <% if is_current_user %>
<div class="homepagetopBanner mb10"> <div class="homepagetopBanner mb10" style="width:748px;">
<div class="flex-container_homepage" style="width:750px;"> <div class="flex-container_homepage">
<div class="flex-cell_homepage"> <% if @unsolved_issues_count > 0 %>
<div class="homepage_tab_div" id="user_homepage_tab_01" style=""> <div class="flex-cell_homepage" id="user_homepage_tab_1" onclick="HoverLi(1);">
<a href="javascript:void(0)">
<div class="homepage_tab_div" style="">
<span style="margin: 5px auto; vertical-align: middle; display: inline-block;"> <span style="margin: 5px auto; vertical-align: middle; display: inline-block;">
<li class="homepage_issue_tab mb5 fl"></li> <li class="homepage_issue_tab mb5 fl"></li>
<span class="ml5 fl" style="font-size: 20px;"><%= @unsolved_issues_count %></span> <span class="ml5 fl" style="font-size: 20px;"><%= @unsolved_issues_count %></span>
<div class="cl"></div> <div class="cl"></div>
</span> </span>
<br />待解决Issue <br />待解决Issue
</div> </div>
</div> </a>
<div class="flex-cell_homepage"> </div>
<div class="homepage_tab_div" id="user_homepage_tab_02" style=""> <% end %>
<% if @unfinished_homework_count > 0 %>
<div class="flex-cell_homepage" id="user_homepage_tab_2" onclick="HoverLi(2);">
<a href="javascript:void(0)">
<div class="homepage_tab_div" style="">
<span style="margin: 5px auto; vertical-align: middle; display: inline-block;"> <span style="margin: 5px auto; vertical-align: middle; display: inline-block;">
<li class="homepage_work_tab mb5 fl"></li> <li class="homepage_work_tab mb5 fl"></li>
<span class="ml5 fl" style="font-size: 20px;"><%= @unfinished_homework_count %></span> <span class="ml5 fl" style="font-size: 20px;"><%= @unfinished_homework_count %></span>
<div class="cl"></div> <div class="cl"></div>
</span> </span>
<br />待完成作业 <br />待完成作业
</div> </div>
</div> </a>
<div class="flex-cell_homepage"> </div>
<div class="homepage_tab_div" id="user_homepage_tab_03" style=""> <% end %>
<% if @unfinished_test_count > 0 %>
<div class="flex-cell_homepage" id="user_homepage_tab_3" onclick="HoverLi(3);">
<a href="javascript:void(0)">
<div class="homepage_tab_div" style="">
<span style="margin: 5px auto; vertical-align: middle; display: inline-block;"> <span style="margin: 5px auto; vertical-align: middle; display: inline-block;">
<li class="homepage_test_tab mb5 fl"></li> <li class="homepage_test_tab mb5 fl"></li>
<span class="ml5 fl" style="font-size: 20px;"><%= @unfinished_test_count %></span> <span class="ml5 fl" style="font-size: 20px;"><%= @unfinished_test_count %></span>
<div class="cl"></div> <div class="cl"></div>
</span> </span>
<br />待完成测验 <br />待完成测验
</div> </div>
</div> </a>
<div class="flex-cell_homepage"> </div>
<div class="homepage_tab_div" id="user_homepage_tab_04" style=""> <% end %>
<% if @unfinished_poll_count > 0 %>
<div class="flex-cell_homepage" id="user_homepage_tab_4" onclick="HoverLi(4);">
<a href="javascript:void(0)">
<div class="homepage_tab_div" style="">
<span style="margin: 5px auto; vertical-align: middle; display: inline-block;"> <span style="margin: 5px auto; vertical-align: middle; display: inline-block;">
<li class="homepage_poll_tab mb5 fl"></li> <li class="homepage_poll_tab mb5 fl"></li>
<span class="ml5 fl" style="font-size: 20px;"><%= @unfinished_poll_count %></span> <span class="ml5 fl" style="font-size: 20px;"><%= @unfinished_poll_count %></span>
<div class="cl"></div> <div class="cl"></div>
</span> </span>
<br />待完成问卷 <br />待完成问卷
</div> </div>
</div> </a>
<div class="flex-cell_homepage"> </div>
<div class="homepage_tab_div" id="user_homepage_tab_05" style=""> <% end %>
<% if @anonymous_evaluation_count > 0 %>
<div class="flex-cell_homepage" id="user_homepage_tab_5" onclick="HoverLi(5);">
<a href="javascript:void(0)">
<div class="homepage_tab_div" id="user_homepage_tab_05" style="">
<span style="margin: 5px auto; vertical-align: middle; display: inline-block;"> <span style="margin: 5px auto; vertical-align: middle; display: inline-block;">
<li class="homepage_anonymity_tab mb5 fl"></li> <li class="homepage_anonymity_tab mb5 fl"></li>
<span class="ml5 fl" style="font-size: 20px;"><%= @anonymous_evaluation_count %></span> <span class="ml5 fl" style="font-size: 20px;"><%= @anonymous_evaluation_count %></span>
<div class="cl"></div> <div class="cl"></div>
</span> </span>
<br />待匿评作品 <br />待匿评作品
</div> </div>
</div> </a>
</div>
<% end %>
<!--<div class="flex-cell_homepage">--> <!--<div class="flex-cell_homepage">-->
<!--<div class="homepage_tab_div" id="user_homepage_tab_06" style="">--> <!--<div class="homepage_tab_div" id="user_homepage_tab_06" style="">-->
<!--<span style="margin: 5px auto; vertical-align: middle; display: inline-block;">--> <!--<span style="margin: 5px auto; vertical-align: middle; display: inline-block;">-->
<!--<li class="homepage_issue_tab mb5 fl"></li>--> <!--<li class="homepage_issue_tab mb5 fl"></li>-->
<!--<span class="ml5 fl" style="font-size: 20px;">21</span>--> <!--<span class="ml5 fl" style="font-size: 20px;">21</span>-->
<!--<div class="cl"></div>--> <!--<div class="cl"></div>-->
<!--</span>--> <!--</span>-->
<!--<br />待评阅作业--> <!--<br />待评阅作业-->
<!--</div>-->
<!--</div>--> <!--</div>-->
<div class="flex-cell_homepage"> <!--</div>-->
<div class="homepage_tab_div" id="user_homepage_tab_07" style=""> <% if @unapproval_homework > 0 %>
<div class="flex-cell_homepage" id="user_homepage_tab_6" onclick="HoverLi(6);">
<a href="javascript:void(0)">
<div class="homepage_tab_div" style="">
<span style="margin: 5px auto; vertical-align: middle; display: inline-block;"> <span style="margin: 5px auto; vertical-align: middle; display: inline-block;">
<li class="homepage_apply_tab mb5 fl"></li> <li class="homepage_apply_tab mb5 fl"></li>
<span class="ml5 fl" style="font-size: 20px;">2</span> <span class="ml5 fl" style="font-size: 20px;"><%= @unapproval_homework %></span>
<div class="cl"></div> <div class="cl"></div>
</span> </span>
<br />待审批申请 <br />待审批申请
</div> </div>
</div> </a>
</div>
<% end %>
</div> </div>
</div> </div>
<div class="homepageRightBanner"> <div id="message_all_list">
<div class="NewsBannerName"> <div class="homepageRightBanner">
消息动态 <div class="NewsBannerName">
</div> 消息动态
</div>
<span class="fr" style="margin-top:5px;"> <span class="fr" style="margin-top:5px;">
共 <span style="color: red;"><%= @message_count %></span> 个消息 共 <span style="color: red;"><%= @message_count %></span> 个消息
</span> </span>
</div> </div>
<div class="resources"> <div class="resources">
<div> <div>
<%= render :partial => 'users/new_user_message', :locals => { :message_alls => @message_alls } %> <%= render :partial => 'users/new_user_message', :locals => { :message_alls => @message_alls } %>
</div>
</div> </div>
</div> </div>
<!-- 待解决issue -->
<div class="issues_filter undis" id="message_list_content_1">
</div>
<% else %> <% else %>
<div class="homepageRightBanner"> <div class="homepageRightBanner">
<div class="NewsBannerName">Ta的动态</div> <div class="NewsBannerName">Ta的动态</div>

View File

@ -682,4 +682,6 @@ a.user_editinfo{border-top:1px solid #e5e5e5; height:30px; line-height:30px; tex
.messageApplyContents{ width:200px; max-width:250px; margin-right:10px; font-size:14px; color:#4b4b4b; display:block; overflow:hidden; white-space: nowrap; text-overflow:ellipsis;max-height: 49px; } .messageApplyContents{ width:200px; max-width:250px; margin-right:10px; font-size:14px; color:#4b4b4b; display:block; overflow:hidden; white-space: nowrap; text-overflow:ellipsis;max-height: 49px; }
.longMessageWidth { max-width: 610px; float:left; } .longMessageWidth { max-width: 610px; float:left; }
.shortMessageWidth { max-width: 540px; float:left; } .shortMessageWidth { max-width: 540px; float:left; }
.messageInformationContents{ margin-right:10px; font-size:14px; color:#4b4b4b; display:block; overflow:hidden; white-space: nowrap; text-overflow:ellipsis;max-height:49px; float:left; } .messageInformationContents{ margin-right:10px; font-size:14px; color:#4b4b4b; display:block; overflow:hidden; white-space: nowrap; text-overflow:ellipsis;max-height:49px; float:left; }
.homepageBackground{ background-color:#90C5EC; flex:1; text-align: center }
.homepageClickBackground{ background-color:#3b94d6; flex:1; text-align: center }