实训点击全部任务右侧弹出,用鼠标点击旁边其他区域,弹出去自动收缩,去除点击全部任务的载入中,减少后台访问

This commit is contained in:
daiao 2017-04-25 10:11:41 +08:00
parent 186c29add4
commit 3d344ee502
3 changed files with 40 additions and 2 deletions

View File

@ -25,6 +25,9 @@ class GamesController < ApplicationController
# @praise 判断是否点赞
# @praise 判断是否踩
def show
# 展示全部实训
@games = @myshixun.games.includes(:challenge)
@games_count = @games.count
@game_challenge = @game.challenge
(@myshixun.games.count == @game_challenge.position && @game.status ==2) ? @had_done = 1 : @had_done = 0
@praise = PraiseTread.where("praise_tread_object_id=? and praise_tread_object_type=? and user_id=?", @game_challenge.id, @game_challenge.class.to_s, User.current.id).first

View File

@ -5,13 +5,13 @@
'/editormd/lib/flowchart.min.js','/editormd/lib/jquery.flowchart.min.js','/editormd/editormd.js'%>
<div class="page--body -margin-t-64 -flex">
<div class="page--over undis" id="all_task_show">
<%= render :partial => "games_list" %>
</div>
<div class="-layout -stretch -fit" id="game_show_content">
<%= render :partial => 'games/game_show' %>
</div>
</div>
<script>
var fadein = 0; //控制全部任务的渐入浅出效果
// 版本库扩大与缩小
var control = 0; // 版本库控制 0表示点击放大 1表示点击缩小
var control_1 = 0; // 测评控制 0表示点击放大 1表示点击缩小
@ -55,4 +55,21 @@
control_1 = 0;
}
}
// 给全部列表区域绑定点击事件
$("#all_task_show").on("click", function(e){
c = 0;
$("#all_task_tab").removeClass('leftnav-active');
$("#all_task_show").css("background","rgba(0,0,0,0)");
$("#all_task_index").css("left", 0).stop().animate({
left: "-505px"
}, 400, function(){
$("#all_task_show").hide();
fadein = 0;
});
});
// 列表区域阻止事件冒泡
$("#all_task_index").on("click", function(e){
e.stopPropagation();
});
</script>

View File

@ -34,7 +34,7 @@
<i class="fa fa-gamepad font-20"></i><br/><span class="font-12">当前任务</span>
</a></li>
<li class="leftnav-box">
<a href="<%= myshixun_games_path(@myshixun, :fadein => true) %>" class="leftnav-box-inner" id="all_task_tab" data-remote="true">
<a href="javascript:void(0);" class="leftnav-box-inner" id="all_task_tab" >
<i class="fa fa-qrcode font-20"></i><br/><span class="font-12">全部任务</span><br/><span class="btn-cir ml5"><%= @myshixun.games.count %></span>
</a>
</li>
@ -75,6 +75,7 @@
// 点击全部任务左侧tab样式切换
var c = 0; // 设置全部任务展开样式,与不展开时的样式
var fadein = 0; //控制全部任务的渐入浅出效果
$("#all_task_tab").click(function(){
if( c == 0){
$("#all_task_tab").addClass('leftnav-active');
@ -83,6 +84,23 @@
$("#all_task_tab").removeClass('leftnav-active');
c = 0;
}
if(fadein == 0){
$("#all_task_show").css("background", "rgba(0,0,0,0.3)");
$("#all_task_show").show();
$("#all_task_index").css("left","-420px").stop().animate({
left: 0
}, 400, function(){
fadein = 1;
});
}else{
$("#all_task_show").css("background","rgba(0,0,0,0)");
$("#all_task_index").css("left", 0).stop().animate({
left: "-505px"
}, 400, function(){
$("#all_task_show").hide();
fadein = 0;
});
}
});
$("#current_task_tab").click(function(){
$("#current_task_tab").addClass('leftnav-active');