个人主页侧导航宽度限制更改,提示框效果及js实现

cs_optimize_txz
Tim 9 years ago
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…
Cancel
Save