educoder/app/views/courses/index.html.erb

<div class="active-class">
  <div class="task-index-head mt30 mb30 bor-grey-e">
    <div class=""  style="position: relative" >
      <h2 class="fl task-inde-head-title">
        <canvas id="myCanvas" ></canvas>
        <div class="logo" border="0"></div>
      </h2>
      <h2 class="fl task-inde-head-title" style="position: absolute;left:550px;top: 25px;letter-spacing:0.8em;text-shadow: 0 1px 2px #000;">
         在线课堂
      </h2>
      <p class="fl task-inde-head-title" style="position: absolute;left:420px;top:65px;text-shadow: 0 1px 2px #000;">
        One who is anxious to learn, can always learn from others.
      </p>
      <div class="cl"></div>
    </div>
    <ul class="task-index-head-info clearfix">
      <li><span class="color-orange font-bd" id="all_syllabuses"><%= @syllabuses_num %></span><br/><span >全部</span></li>
      <li><span class="color-orange font-bd" id="my_syllabuses"><%= @create_syllabuses_count + @join_syllabuses_count %></span><br/><span>我的课堂</span></li>
      <%= link_to "+&nbsp;新建".html_safe, new_course_path, :class => "fr font-16 white-btn orange-btn mt10" %>
      <%= link_to "+&nbsp;加入课堂".html_safe, join_private_courses_courses_path, :remote => true, :method => "post", :class => "fr mr30 font-16 white-btn orange-btn mt10" %>
      <!--      <li><span class="color-orange font-bd"><%#= @create_syllabuses_count %></span><br/><span>你已创建</span></li>-->
    </ul>
  </div>
  <div class="clearfix mb15 fl" style="width:100%;">
    <a href="<%= courses_path(:select => "all",:search => @search) %>" id="courses_index_syllabuses_1" class="edu-filter-cir-grey mr20 active fl" data-tab="all" data-remote="true">全部课堂</a>
    <a href="<%= courses_path(:select => "create", :search => @search) %>" id="courses_index_syllabuses_2" class="edu-filter-cir-grey mr20 fl" data-tab="create" data-remote="true">我管理的</a>
    <a href="<%= courses_path(:select => "join", :search => @search) %>" id="courses_index_syllabuses_3" class="edu-filter-cir-grey mr20 fl" data-tab="join" data-remote="true">我参与的</a>
    <a href="<%= courses_path(:select => "end") %>" id="courses_index_syllabuses_4" class="edu-filter-cir-grey fl" data-tab="end" data-remote="true">查看归档</a>

    <!--    <li class="edu-dropdown fl ml15 mr5" id="thirdly_select" style="width: 100px">
      <a href="javascript:void(0);" class="edu-dropdown-toggle" id="all_syllabuses" >所有课程<i class="fa fa-caret-down ml20"></i></a>
      <ul class="edu-dropdown-menu" id="all_syllabuses_list">
        <li onclick="change_language(this);"><a id="courses_index_syllabuses_1" href="<%#= courses_path(:select => "all", :search => @search) %>" data-remote="true">所有课程</a></li>
        <li onclick="change_language(this);"><a id="courses_index_syllabuses_2" href="<%#= courses_path(:select => "create", :search => @search) %>" data-remote="true">我发布的课程</a></li>
        <li onclick="change_language(this);"><a id="courses_index_syllabuses_3" href="<%#= courses_path(:select => "join", :search => @search) %>" data-remote="true">我参与的课程</a></li>
      </ul>
    </li>-->

    <%= render :partial => "course_index_search" %>
  </div>
  <!--<a href="<%#= courses_path(:select => "end", :is_end => 1) %>" id="courses_index_syllabuses_4" class="color-grey fr" data-tab="end" data-remote="true">查看归档</a>-->
  <!--<a href="<%#= courses_path(:select => "return", :is_end => 0) %>" class="color-grey fr undis" id="courses_index_syllabuses_5" data-remote="true">返回</a>-->
  <div class="cl"></div>
  <div class="content clearfix" id="intelligence_course_list">
    <%= render :partial => 'courses/courseList' %>
  </div>
</div>
<%= render :partial => 'layouts/public_left_info' %>
<%= javascript_include_tag 'edu/shixun_course_path' %>
<script>

    $(function(){
        <% unless @is_over.blank? %>
        $.ajax({
            url: '<%= courses_path(:select => "end") %>',
            dataType: 'script'
        });
        <% end %>

        $(".edu-filter-cir-grey").live("click", function(){
            $(this).addClass("active");
            $(this).siblings().removeClass("active");
        });
    });

    /* ------------------- 添加或取消收藏 ---------------------- */
    function add_cancel_to_favorites(nThis){
        var nIcon = $(nThis).find("i"); // 图标
        if(nIcon.hasClass("grey")){
            nIcon.removeClass("fa-heart-o grey").addClass("fa-heart color-light-green green")
        }else if(nIcon.hasClass("green")){
            nIcon.removeClass("fa-heart color-light-green green").addClass("fa-heart-o grey")
        }
        // 下面写添加收藏的方法

    }

    /* --------------------提交表单-------------------- */
    function submit_select_syllabuses(value){
        console.log(value);
        $.ajax({
            url: "<%= courses_path %>",
            remote: true,
            data: { select: value, search: $("#course_search").val() }
        });
    }

    /* --------------------搜索课程---------------------- */
    $('#course_search').bind('keypress',function(event){
        if(event.keyCode == 13)
            search_syllabuses()
    });
    function search_syllabuses(){
        var value = $("#syllabuses option:selected").val();
        submit_select_syllabuses(value)
    }

    function change_language(ev){
        $(ev).parent().hide();
        $("#all_syllabuses").html($(ev).children().html() + '<i class="fa fa-caret-down ml5" ></i>');
    }

    function change_progress(ev){
        $(ev).parent().hide();
        $("#all_progress").html($(ev).children().html() + '<i class="fa fa-caret-down ml5" ></i>');
        submit_select_syllabuses(value)
    }

    $("#thirdly_select").hover(function(){
        $("#all_syllabuses_list").show();
    }, function(){
        $("#all_syllabuses_list").hide();
    });

    // 搜索框
    function searchToggle(obj, evt){
        var container = $(obj).closest('.search-wrapper');

        if(!container.hasClass('active')){
            container.addClass('active');
            evt.preventDefault();
        }
        else if(container.hasClass('active') && $(obj).closest('.input-holder').length == 0){
            container.removeClass('active');
            // clear input
            container.find('.search-input').val('');
            // clear and hide result container when we press close
            container.find('.result-container').fadeOut(100, function(){$(this).empty();});
            $("#search_syllabuses_name").submit();
        }
    }

    function submitFn(obj, evt){
        value = $(obj).find('.search-input').val().trim();

        _html = "Yup yup! Your search text sounds like this: ";
        if(!value.length){
            _html = "Yup yup! Add some text friend :D";
        }
        else{
            _html += "<b>" + value + "</b>";
        }

        $(obj).find('.result-container').html('<span>' + _html + '</span>');
        $(obj).find('.result-container').fadeIn(100);

        evt.preventDefault();
    }

    $(".course_filtrate").live("click", function(){
        console.log($(this).attr("data-tab"));
        if ($(this).hasClass("course_filtrate_bg")){
            return;
        }else{
            $(".course_filtrate").removeClass("course_filtrate_bg");
            $(this).addClass("course_filtrate_bg");
        }
    });

    /* -------------------恢复标签到初始位置-------------------- */
//    function reset_label_status(){
//       $(".course_filtrate").removeClass("course_filtrate_bg");
//        $("#courses_index_syllabuses_1").addClass("course_filtrate_bg");
//         $("input[name='search']").val("");
//    }
//    /* ---------------点击查看归档的返回----------------- */
//    $("#courses_index_syllabuses_5").on("click", function(){
//        reset_label_status()
//    });
//
//    /* ------------------查看归档----------------------- */
//    $("#courses_index_syllabuses_4").on("click", function(){
//        reset_label_status()
//    });
</script>