个人主页侧导航宽度限制更改，提示框效果及js实现
This commit is contained in:
parent
a0772332da
commit
86a3ce185d
|
|
@ -1,19 +1,19 @@
|
|||
<% courses.each do |course|%>
|
||||
<li>
|
||||
<li class="pr">
|
||||
<span class="user_icons_class"></span>
|
||||
<% is_teacher = User.current.logged? && (User.current.admin? || User.current.allowed_to?(:as_teacher,course)) %>
|
||||
<p href="javascript:void(0);" id="show_course_<%= course.id %>" class="course_list_menu pr" >
|
||||
<% title = "<span class='course-name'>#{course.syllabus.title}</span>".html_safe %>
|
||||
<%= link_to title, syllabus_path(course.syllabus_id), :target => '_blank', :class => 'hidden', :style => "max-width:91px; display:inline-block;"%>
|
||||
<p href="javascript:void(0);" id="show_course_<%= course.id %>" class="course_list_menu hidden" >
|
||||
<%= link_to course.syllabus.title, syllabus_path(course.syllabus_id), :target => '_blank'%>
|
||||
<font class="fb c_grey" style="height:39px; line-height:39px; vertical-align:top;">·</font>
|
||||
<% classes = "<span class='course-name'>#{course.name}</span>".html_safe %>
|
||||
<%= link_to classes, course_path(course.id,:host=>Setting.host_course), :target => '_blank', :class => 'hidden', :style => "max-width:91px; display:inline-block;"%>
|
||||
<span class="sub-menu-title c_dark">
|
||||
课程名称：<%= course.syllabus.title %><br />
|
||||
班级名称：<%= course.name+'（'+current_time_and_term(course)+'）' %><br />
|
||||
班级属性：<%= course.is_public? ? '公开' : '私有' %>
|
||||
</span>
|
||||
<%= link_to course.name, course_path(course.id,:host=>Setting.host_course), :target => '_blank'%>
|
||||
</p>
|
||||
<div class="sub-menu-title c_dark">
|
||||
<em></em>
|
||||
<font></font>
|
||||
<div>课程名称：<%= link_to course.syllabus.title, syllabus_path(course.syllabus_id), :target => '_blank' %></div>
|
||||
<div>班级名称：<%= link_to course.name, course_path(course.id,:host=>Setting.host_course), :target => '_blank' %></div>
|
||||
<div>班级属性：<span style="color:#797979;"><%= course.is_public? ? '公开' : '私有' %></span></div>
|
||||
</div>
|
||||
<%#= link_to course.name+"("+current_time_and_term_short(course)+")", course_path(course.id,:host=>Setting.host_course),
|
||||
:id => "show_course_#{course.id}", :class => 'course_list_menu hidden', :target => '_blank', :title => (course.is_public? ? "公开班级：":"私有班级：")+course.name+"（"+current_time_and_term(course)+"）"%>
|
||||
<% count = ShieldActivity.where("container_type='User' and container_id=#{user.id} and shield_type='Course' and shield_id=#{course.id}").count %>
|
||||
|
|
@ -113,25 +113,26 @@
|
|||
}
|
||||
|
||||
$(".course_list_menu").each(function(){
|
||||
var courseWidth = $(this).children().eq(0).children().width();
|
||||
var classWidth = $(this).children().eq(2).children().width();
|
||||
var newClassWidth = 182 - courseWidth;
|
||||
var newCourseWidth = 182 - classWidth;
|
||||
console.log(courseWidth, classWidth);
|
||||
if(courseWidth < 91 && classWidth > 91){
|
||||
$(this).children().eq(2).css("max-width",newClassWidth + "px");
|
||||
}
|
||||
if(classWidth < 91 && courseWidth > 91){
|
||||
$(this).children().eq(0).css("max-width",newCourseWidth + "px");
|
||||
}
|
||||
$(this).mouseenter(function(){
|
||||
$(".sub-menu-title").hide();
|
||||
$(this).next().stop();
|
||||
$(this).next().show();
|
||||
});
|
||||
$(this).mouseleave(function(){
|
||||
$(this).next().delay(500).hide(0);
|
||||
});
|
||||
})
|
||||
|
||||
$(".course-name").each(function(){
|
||||
$(this).mouseenter(function(){
|
||||
$(this).parent().parent().children().eq(3).show();
|
||||
});
|
||||
$(this).mouseleave(function(){
|
||||
$(this).parent().parent().children().eq(3).hide();
|
||||
});
|
||||
})
|
||||
$(".sub-menu-title").each(function(){
|
||||
var boxWidth = $(this).width();
|
||||
var leftAttr = boxWidth + 50
|
||||
$(this).css("left",-leftAttr);
|
||||
$(this).mouseover(function(){
|
||||
$(this).stop();
|
||||
$(this).show();
|
||||
});
|
||||
$(this).mouseout(function(){
|
||||
$(this).delay(500).hide(0);
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
|
|
|||
Binary file not shown.
|
Before Width: | Height: | Size: 3.4 KiB After Width: | Height: | Size: 3.4 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.0 KiB After Width: | Height: | Size: 1.1 KiB |
|
|
@ -596,7 +596,7 @@ a.user_leftinfo_img { display:block; width:80px; height:80px; margin:15px auto;}
|
|||
.user_sub_menu li a:hover,.user_sub_menu li a:target { color:#3b94d6; background:#fff url(/images/user/user_navmore_icons.png) 0px 0px no-repeat;}
|
||||
.user_sub_menu li a:hover,.user_sub_menu li a:target{}
|
||||
.user_sub_menu li:last-child a { }
|
||||
.user_sub_menu li p {padding:0 15px 0 25px; border:1px solid #e5e5e5; border-bottom:none; background:#f8f8f8;}
|
||||
.user_sub_menu li p {padding:0 25px; border:1px solid #e5e5e5; border-bottom:none; background:#f8f8f8;}
|
||||
.user_sub_menu li p:hover {background:#fff;}
|
||||
.user_sub_menu li p:hover a {background:#fff;}
|
||||
.user_sub_menu li p:hover,.user_sub_menu li p:target {color:#3b94d6; background:#fff url(/images/user/user_navmore_icons.png) 0px 0px no-repeat;}
|
||||
|
|
@ -640,7 +640,10 @@ a.user_navmorebox .user_icons_closeclass{
|
|||
background:url(/images/user/icons_user_leftnav.png) -25px -347px no-repeat;
|
||||
}
|
||||
.show-all-sub {position:absolute; top:18px; right:15px;}
|
||||
.sub-menu-title {position:absolute; border:1px solid #ddd; background-color:#fff; padding:2px 5px; z-index:99; white-space:nowrap; left:25px; top:35px; display:none;}
|
||||
.sub-menu-title {position:absolute; background-color:#fff; padding:5px 10px; z-index:99; white-space:nowrap; top:-13px; box-shadow: 0px 2px 8px rgba(146, 153, 169, 0.5); display:none;}
|
||||
.sub-menu-title div a {background-color:#fff; height:auto; line-height:1; font-size:12px;}
|
||||
.sub-menu-title em {display:block; border-width:8px; position:absolute;top:23px; right:-16px; border-style:dashed dashed dashed solid; border-color:transparent transparent transparent #fff; font-size:0; line-height:0; z-index:1;}
|
||||
.sub-menu-title font {display:block; border-width:8px; position:absolute;top:24px; right:-17px; border-style:dashed dashed dashed solid; border-color:transparent transparent transparent rgba(146, 153, 169, 0.5); font-size:0; line-height:0;}
|
||||
/* 个人主页左侧导航更多功能 */
|
||||
.user_navmore_box {position:absolute; width:15px; height:15px; right:13px; top:17px; cursor:pointer;}
|
||||
.user_navmore_box ul li:hover ul {display:block; }
|
||||
|
|
|
|||
Loading…
Reference in New Issue