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

<div class="stud-class-container">
  <p style="line-height: 2.0;">
    <i class="fa fa-map-marker mr5 color-grey"></i>
    <%= link_to User.current.show_real_name, user_path(User.current) %> > <%= link_to '在线课堂', courses_path %> > <%= link_to '新建课堂' %>
  </p>
  <div class="user_bg_shadow mt10 bor-grey-e">
  <div class="edu-con-top ">
    <span class="ml15 color-grey font-16">新建课堂</span>
  </div>
  <div class="con-content">
    <%= labelled_form_for @course do |f| %>
    <ul>
      <li class="clearfix pt20">
        <label class="panel-form-label label fl color-dark-grey"><span class="color-orange mr5">*</span>课程名称&nbsp;&nbsp;&nbsp;&nbsp;</label>
        <div class="pr fl with75">
          <input type="text" name="course[course_list]" autocomplete="off" style="width: 100%;" id="new_course_list" class="task task-height-40 panel-box-sizing fl color-grey" maxlength="100" placeholder="例如：数据结构">
          <ul class="course_list_ul">
          </ul>
        </div>
        <div class="cl"></div>
        <span class="color-orange fl none" id="new_course_syllabus_notice" style="margin-left:25%;"><i class="fa fa-exclamation-circle mr5" ></i>请先输入课程</span>
      </li>
      <li class="pt20 clearfix mb40">
        <label class="panel-form-label label fl color-dark-grey"><span class="color-orange mr5">*</span>课堂名称&nbsp;&nbsp;&nbsp;&nbsp;</label>
        <input type="text" name="course[name]" autocomplete="off" id="new_course_name" class="task task-height-40 panel-box-sizing fl color-grey" maxlength="100" placeholder="例如：数据结构2016秋季班级" onkeyup="regex_course_name('new');">
        <div class="cl"></div>
        <span class="color-orange fl none" id="new_course_name_notice" style="margin-left:25%;"><i class="fa fa-exclamation-circle mr5" ></i>课堂名称不能为空且至少有两个字符</span>
        <div class="cl"></div>

        <div class="tusi" style="left:108% ">
          <div class="entry">
            <em></em>
            <span class="after"></span>
            <p class="color-grey mt10" style="height: 26px;line-height: 26px;">注意：1、课堂名称 = 课程名称 + 学期信息 + 其它</p>
            <p class="color-grey ml50" style="height: 26px;line-height: 26px;margin-left: 55px;"><i class="fa fa-check-circle color-light-green mr5"></i>正确示例：数据结构2016秋季班级</p>
            <p class="color-grey" style="height: 26px;line-height: 26px;margin-left: 55px;"><i class="fa fa-times-circle color-orange mr5"></i>错误示例：数据结构班级</p>
            <p class="color-grey" style="height: 26px;line-height: 26px;margin-left: 42px;">2、如果本学期包含多个班级，只需创建一个课堂</p>
            <p class="color-grey mb10" style="height: 26px;line-height: 26px;margin-left: 65px;">然后在课堂内部建立不同的分班</p>
          </div>
        </div>
      </li>
      <li class="pt20 clearfix">
        <label class="panel-form-label label fl color-dark-grey">总学时&nbsp;&nbsp;&nbsp;&nbsp;</label>
        <input type="text" name="period" id="new_class_period" class="task task-height-40 panel-box-sizing fl color-grey" onkeyup="regex_course_class_period('new');" placeholder="例如：30" maxlength="6">
        <div class="cl"></div>
        <span class="color-orange fl none" id="new_course_class_period_notice" style="margin-left:25%;"><i class="fa fa-exclamation-circle mr5" ></i>请输入正整数</span>
      </li>
      <li class="pt20 clearfix">
        <label class="panel-form-label label fl color-dark-grey">学分&nbsp;&nbsp;&nbsp;&nbsp;</label>
        <input type="text" id="new_course_credit" name="credit" maxlength="4" onkeyup="regex_course_credit('new');" class="task task-height-40 panel-box-sizing fl color-grey" onkeyup="regex_course_credit('new');" placeholder="例如：4">
        <div class="cl"></div>
        <span class="color-orange fl none" id="new_course_credit_notice" style="margin-left:25%;"><i class="fa fa-exclamation-circle mr5" ></i>请输入正整数或保留一位小数的浮点数</span>
      </li>
      <li class="pt20 clearfix">
        <label class="panel-form-label label fl color-dark-grey">结束时间&nbsp;&nbsp;&nbsp;&nbsp;</label>
        <input type="text" id="new_course_end_date" class="task task-height-40 panel-box-sizing fl color-grey" name="end_date" placeholder="请选择结束日期">
        <div class="cl"></div>
        <div class="tusi" style="left:108% ">
          <div class="entry">
            <em></em>
            <span class="after"></span>
            <p class="color-grey">结束日期过后，课堂进入归档状态<%#= link_to '归档状态', courses_path(:is_over => 1),:target => '_blank', :class => 'color-orange05' %>，只能在历史课堂中查看</p>
          </div>
        </div>
        <div class="cl"></div>
        <span class="color-orange fl none" id="new_course_end_date_notice" style="margin-left:25%;"><i class="fa fa-exclamation-circle mr5" ></i>结束日期必须晚于当前日期</span>
      </li>
      <li class="pt20 clearfix mb15">
        <label class="panel-form-label label fl">公开课堂&nbsp;&nbsp;&nbsp;&nbsp;</label>
        <input id="course_is_public" name="course[is_public]" class="magic-checkbox fl mt8 mr5" type="checkbox" value="1">
        <label for="course_is_public" class="color-grey fl">选中后本课堂对所有用户可见，否则仅本课堂成员可见</label>
      </li>
      <li class=" clearfix pb20">
        <label class="panel-form-label label fl">&nbsp;&nbsp;&nbsp;&nbsp;</label>
        <a href="javascript:void(0);" class="task-btn task-btn-blue fl mr20" onclick="submit_new_course();">保存</a>
        <%= link_to '取消', courses_path, :class => 'task-btn fl' %>
      </li>
    </ul>
    <% end %>
  </div>
  </div>
</div>
<style>body{background: #ffffff}</style><!--后续要删除-->
<script>
    $(function(){
        var course_list_name = "";
        $('#new_course_end_date').datetimepicker({
            allowBlank:true,
            lang:'ch',
            format:'Y-m-d',
            formatDate:'Y-m-d',
            timepicker:false,
            validateOnBlur:false
        });

        $("body").click(function(event){
            $(".course_list_ul").hide();
            event.stopPropagation();
        });

        $("#new_course_list").on('input', function(e){
            throttle(search_course_list, window, e);
        });
        $("#new_course_list").on('blur', function(e){
            if($("#new_course_name").val() == ""){
                $("#new_course_name").val($("#new_course_list").val());
            } else{
                if($("#new_course_name").val().indexOf(course_list_name) == 0){
                    $("#new_course_name").val($("#new_course_name").val().replace(course_list_name, $("#new_course_list").val()));
                } else{
                    $("#new_course_name").val($("#new_course_list").val() + $("#new_course_name").val());
                }
            }
            regex_course_name('new');
            course_list_name = $("#new_course_list").val();
        });
        $("#new_course_list").on('click', function (e) {
            if ($("#new_course_list").val().trim() != '') { //如果已经有id了。肯定存在，不用去找了。
                event.stopPropagation();
                return;
            } else{
                search_course_ajax('');
                event.stopPropagation();
            }
        });
        $(".course_list_ul").on('click', 'p', function(event) {
            $("#new_course_list").val($(this).html());
            if($("#new_course_name").val() == ""){
                $("#new_course_name").val($("#new_course_list").val());
            } else{
                if($("#new_course_name").val().indexOf(course_list_name) == 0){
                    $("#new_course_name").val($("#new_course_name").val().replace(course_list_name, $("#new_course_list").val()));
                } else{
                    $("#new_course_name").val($("#new_course_list").val() + $("#new_course_name").val());
                }
            }
            regex_course_name('new');
            $(".course_list_ul").hide();
            course_list_name = $(this).html();
            event.stopPropagation();
        });
  });
</script>