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

<div class="active-class">
  <div class="task-index-head mt20 mb20">
    <div class="task-index-head-top-course">
      <h2 class="fl task-inde-head-title">在线课堂</h2>
      <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 => "color-light-green fr font-16" , :style => "line-height:56px"%>
      <%= link_to "+&nbsp;加入课堂".html_safe, join_private_courses_courses_path, :remote => true, :method => "post", :class => "color-light-green fr mr30 font-16" , :style => "line-height:56px" %>
      <!--      <li><span class="color-orange font-bd"><%#= @create_syllabuses_count %></span><br/><span>你已创建</span></li>-->
    </ul>
  </div>
  <div class="clearfix mb15 fl">
    <a href="<%= courses_path(:select => "all", :is_end => @is_end,:search => @search) %>" id="courses_index_syllabuses_1" class="course_filtrate fl course_filtrate_bg" data-tab="all" data-remote="true">全部课堂</a>
    <a href="<%= courses_path(:select => "create", :is_end => @is_end, :search => @search) %>" id="courses_index_syllabuses_2" class="course_filtrate fl" data-tab="create" data-remote="true">我管理的</a>
    <a href="<%= courses_path(:select => "join", :is_end => @is_end, :search => @search) %>" id="courses_index_syllabuses_3" class="course_filtrate fl" data-tab="join" 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>-->

    <form action="<%= courses_path() %>" data-remote="true" onsubmit="submitFn(this, event);" class="fl ml15" id="search_syllabuses_name" >
      <div class="search-wrapper">
        <div class="input-holder">
          <input type="hidden" name="select" id="input_select_val" value="<%= @select %>">
          <input type="hidden" name="is_end" id="input_select_text" value="<%= @is_end %>">
          <input type="text" class="search-input" name="search" placeholder="输入课堂名称的关键字进行搜索" />
          <button class="search-icon" onclick="searchToggle(this, event);"><i class="fa fa-search font-16 mt5"></i></button>
        </div>
        <span class="close" onclick="searchToggle(this, event);"><i class="fa fa-times font-16 mt5"></i></span>
      </div>
    </form>
  </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' %>

<script>

    /* ------------------- 添加或取消收藏 ---------------------- */
    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>