个人主页的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,12 +4,30 @@
$(function(){
$($(".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>
<% if is_current_user %>
<div class="homepagetopBanner mb10">
<div class="flex-container_homepage" style="width:750px;">
<div class="flex-cell_homepage">
<div class="homepage_tab_div" id="user_homepage_tab_01" style="">
<div class="homepagetopBanner mb10" style="width:748px;">
<div class="flex-container_homepage">
<% if @unsolved_issues_count > 0 %>
<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;">
<li class="homepage_issue_tab mb5 fl"></li>
<span class="ml5 fl" style="font-size: 20px;"><%= @unsolved_issues_count %></span>
@ -17,9 +35,13 @@
</span>
<br />待解决Issue
</div>
</a>
</div>
<div class="flex-cell_homepage">
<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;">
<li class="homepage_work_tab mb5 fl"></li>
<span class="ml5 fl" style="font-size: 20px;"><%= @unfinished_homework_count %></span>
@ -27,9 +49,13 @@
</span>
<br />待完成作业
</div>
</a>
</div>
<div class="flex-cell_homepage">
<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;">
<li class="homepage_test_tab mb5 fl"></li>
<span class="ml5 fl" style="font-size: 20px;"><%= @unfinished_test_count %></span>
@ -37,9 +63,13 @@
</span>
<br />待完成测验
</div>
</a>
</div>
<div class="flex-cell_homepage">
<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;">
<li class="homepage_poll_tab mb5 fl"></li>
<span class="ml5 fl" style="font-size: 20px;"><%= @unfinished_poll_count %></span>
@ -47,8 +77,12 @@
</span>
<br />待完成问卷
</div>
</a>
</div>
<div class="flex-cell_homepage">
<% 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;">
<li class="homepage_anonymity_tab mb5 fl"></li>
@ -57,7 +91,9 @@
</span>
<br />待匿评作品
</div>
</a>
</div>
<% end %>
<!--<div class="flex-cell_homepage">-->
<!--<div class="homepage_tab_div" id="user_homepage_tab_06" style="">-->
<!--<span style="margin: 5px auto; vertical-align: middle; display: inline-block;">-->
@ -68,18 +104,23 @@
<!--<br />待评阅作业-->
<!--</div>-->
<!--</div>-->
<div class="flex-cell_homepage">
<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;">
<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>
</span>
<br />待审批申请
</div>
</a>
</div>
<% end %>
</div>
</div>
</div>
<div id="message_all_list">
<div class="homepageRightBanner">
<div class="NewsBannerName">
消息动态
@ -93,7 +134,11 @@
<%= render :partial => 'users/new_user_message', :locals => { :message_alls => @message_alls } %>
</div>
</div>
</div>
<!-- 待解决issue -->
<div class="issues_filter undis" id="message_list_content_1">
</div>
<% else %>
<div class="homepageRightBanner">
<div class="NewsBannerName">Ta的动态</div>

View File

@ -683,3 +683,5 @@ a.user_editinfo{border-top:1px solid #e5e5e5; height:30px; line-height:30px; tex
.longMessageWidth { max-width: 610px; 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; }
.homepageBackground{ background-color:#90C5EC; flex:1; text-align: center }
.homepageClickBackground{ background-color:#3b94d6; flex:1; text-align: center }