大纲

app/views/courses/_course_outlines_list.html.erb

@@ -1,14 +1,15 @@
 
-<div class="f16 fontBlue fb fl mt15">请选择课程大纲</div>
+<div class="f16 fontBlue fb fl">请选择课程大纲</div>
-  <div class="resourcePopupClose"> <a href="javascript:void(0);" class="resourceClose"></a></div>
+  <!--<div class="resourcePopupClose"> <a href="javascript:void(0);" class="resourceClose"></a></div>-->
   <div class="fl">
     <form class="blogSearchBox">
-      <input type="text" name="serach" placeholder="请输入大纲名称搜索" class="blogSearchContent" />
+      <input type="text" name="course_outline_search" id="course_outline_search" placeholder="请输入大纲名称搜索" class="blogSearchContent" />
-      <a href="javascript:void(0);" class="searchIconPopup"></a>
+      <!--<a href="javascript:void(0);" class="searchIconPopup"></a>-->
+      <!--<input class="searchIconPopup" name="commit" onfocus="this.blur();" style="border-style:none" type="submit" value="">-->
     </form>
   </div>
-  <span class="f12 c_red fl mb8">未搜索到对应大纲，请重新输入</span>
+  <span class="f12 c_red fl mb8" name="course_outline_hint" style="display: none">未搜索到对应大纲，请重新输入</span>
-  <div class="blogBlock fl">
+  <div class="blogBlock fl" id="course_outline_list" >
     <ul class="blogRow">
       <li class="fl">
         <input name="checkMenu" type="radio" class="courseSendCheckbox"/>
@@ -16,48 +17,7 @@
       <li class="blogTitle fl">博客一</li>
     </ul>
     <div class="homeworkPublishTime">发布时间：2015-05-11</div>
-    <ul class="blogRow">
+
-      <li class="fl">
-        <input name="checkMenu" type="radio" class="courseSendCheckbox"/>
-      </li>
-      <li class="blogTitle fl">高等数学-14学期</li>
-    </ul>
-    <div class="homeworkPublishTime">发布时间：2014-05-11</div>
-    <ul class="blogRow">
-      <li class="fl">
-        <input name="checkMenu" type="radio" class="courseSendCheckbox"/>
-      </li>
-      <li class="blogTitle fl">博客二</li>
-    </ul>
-    <div class="homeworkPublishTime">发布时间：2014-03-04</div>
-    <ul class="blogRow">
-      <li class="fl">
-        <input name="checkMenu" type="radio" class="courseSendCheckbox"/>
-      </li>
-      <li class="blogTitle fl">高等数学-13学期</li>
-    </ul>
-    <div class="homeworkPublishTime">发布时间：2013-05-11</div>
-    <ul class="blogRow">
-      <li class="fl">
-        <input name="checkMenu" type="radio" class="courseSendCheckbox"/>
-      </li>
-      <li class="blogTitle fl">博客三-浅谈前段开发中所应用到的最新侧导航样式设计30案例</li>
-    </ul>
-    <div class="homeworkPublishTime">发布时间：2013-05-10</div>
-    <ul class="blogRow">
-      <li class="fl">
-        <input name="checkMenu" type="radio" class="courseSendCheckbox"/>
-      </li>
-      <li class="blogTitle fl">博客四</li>
-    </ul>
-    <div class="homeworkPublishTime">发布时间：2013-05-08</div>
-    <ul class="blogRow">
-      <li class="fl">
-        <input name="checkMenu" type="radio" class="courseSendCheckbox"/>
-      </li>
-      <li class="blogTitle fl">博客五</li>
-    </ul>
-    <div class="homeworkPublishTime">发布时间：2013-05-01</div>
   </div>
   <div>
     <div class="courseSendSubmit"><a href="javascript:void(0);" class="sendSourceText">确定</a></div>

app/views/courses/course_outline.js.erb

@@ -1,8 +1,9 @@
 $('#ajax-modal').html('<%= escape_javascript(render :partial => 'course_outlines_list') %>');
 showModal('ajax-modal', '300px');
-$('#ajax-modal').css('height','360px');
+//$('#ajax-modal').css('height','250px');
+$('#ajax-modal').css('padding-top','0px');
 $('#ajax-modal').siblings().remove();
-$('#ajax-modal').before("<a href='javascript:void(0)' onclick='closeModal();' style='margin-left: 435px;' class='resourceClose'></a>");
+$('#ajax-modal').before(' <a href="javascript:void(0);" onclick="hideModal()" class="resourceClose" style="margin-left: 285px"></a>');
-$('#ajax-modal').parent().css("top","40%").css("left","46%");
+$('#ajax-modal').parent().css("top","30%").css("left","50%");
 $('#ajax-modal').parent().addClass("courseOutlinePopup");
-$('#ajax-modal').css("padding-left","16px").css("padding-bottom","16px");
+$('#ajax-modal').css("padding-left","16px")//.css("padding-bottom","16px");

app/views/layouts/base_courses.html.erb

@@ -171,5 +171,29 @@
 <div id="ajax-modal" style="display:none;"></div>
 <%= call_hook :view_layouts_base_body_bottom %>
 </body>
+<script>
+    $(function(){
+        $(document).on('input','input[name="course_outline_search"]',function(e){
+            throttle(course_outline_search,window,e);
+        })
+        function throttle(method,context,e){
+            clearTimeout(method.tId);
+            method.tId=setTimeout(function(){
+                method.call(context,e);
+            },300);
+        }
+        function course_outline_search(e){
+            $.ajax({
+                url:'',
+                type:'post',
+                success:function(data){
+
+                }
+            })
+        }
+
+    })
+
+</script>
 
 </html>

config/routes.rb

@@ -790,6 +790,7 @@ RedmineApp::Application.routes.draw do
       get 'copy_course'
       match 'course_activity', :to => 'courses#course_activity',  :via => :get, :as => "course_activity"
       get 'course_outline'
+      post 'search_course_outline'
     end
     collection do
       match 'join_private_courses', :via => [:get, :post]

public/javascripts/course.js

@@ -1229,4 +1229,9 @@ function course_outline(id){
     $.get(
         ' /courses/'+id+'/course_outline'
     )
-}
+}
+//$(function(){
+//    $('#course_outline_search').on('input',function(){
+//        alert('<%= @course.id%>')
+//    })
+//})

public/stylesheets/courses.css

@@ -1092,9 +1092,10 @@ a.postRouteLink:hover {text-decoration:underline;}
 
 /*课程大纲弹框*/
 .courseOutlinePopup {width:400px; height:auto; border:3px solid #269ac9; padding-left:16px; padding-bottom:16px; background-color:#ffffff; position:absolute; top:50%; left:50%; margin-left:-200px; z-index:1000;}
-.courseOutlineSearchIcon{width:31px; height:25px; background-color:#ffffff; background:url(images/resource_icon_list.png) -40px -18px no-repeat; display:inline-block; float:left;}
+.searchIconPopup{width:31px; height:25px; background-color:#ffffff; background:url(../images/homepage_icon.png) 5px -394px no-repeat; display:inline-block; float:left; cursor: pointer;}
+.searchIconPopup:hover {background:url(../images/homepage_icon.png) 5px -420px no-repeat;}
 .blogTitle {max-width:240px; font-size:12px; color:#484848; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
-.blogBlock {overflow-x:hidden; max-height:200px; overflow-y:auto; margin-bottom:5px;}
+.blogBlock {overflow-x:hidden; max-height:200px;min-height: 200px; overflow-y:auto; margin-bottom:5px;}
 .blogRow {width:280px; height:15px; line-height:15px;}
-.blogSearchBox {border:1px solid #e6e6e6; width:280px; height:25px; background-color:#ffffff; margin-top:8px; margin-bottom:8px;}
+.blogSearchBox {border:1px solid #e6e6e6;  height:25px; background-color:#ffffff; margin-top:8px; margin-bottom:8px;}/*width:280px;*/
-.blogSearchContent {border:none; outline:none; background-color:#ffffff; width:236px; height:25px; padding-left:10px; display:inline-block; float:left;}
+.blogSearchContent {border:none; outline:none; background-color:#ffffff; width:216px; height:25px; padding-left:10px; display:inline-block; float:left;}