textarea自动拉伸高度优化,编辑普通作业作品功能完成

guange_homework
sw 10 years ago
parent b1463f0864
commit 401b0bc7e3

@ -1,54 +1,62 @@
<div class="HomeWork" id="RSide">
<div class="RightBanner">
<div class="NewsBannerName">编辑作品</div>
</div>
<div class="Newwork">
<div class="hwork_ctt">
<div class="hwork_dis" id="tbc_01">
<%= labelled_form_for @work,:html => { :multipart => true } do |f|%>
<div class="N_con">
<p>
<label class="fl"><span class="c_red">*</span>&nbsp;&nbsp;作品名称&nbsp;&nbsp;&nbsp;&nbsp;</label>
<input type="text" name="student_work[name]" id="student_work_name" class="bo fl" maxlength="200" onkeyup="regexStudentWorkName();" value="<%= @work.name%>">
<a href="javascript:void(0)" class="fl ml10 mt3" onclick="show_project();" >项目信息
<img class="ml5 " src="/images/bid/pic_question.png" width="15" height="15" Title="项目是一种由用户创建的基于&#10;网络的协作空间,能够为个人&#10;或小组提供分布式的协同交流&#10;和资料管理等方面的。">
</a>
<div class="cl"></div>
<p id="student_work_name_span" class="c_red ml90 mb10"></p>
</p>
<div class="cl"></div>
<p id="about_project" class="about_project" style="<%= @work.project.nil? ? '' : 'display:block;'%>">
<label class="fl">&nbsp;&nbsp;&nbsp;关联项目&nbsp;&nbsp;&nbsp;&nbsp;</label>
<%= f.select :project,options_for_select(user_projects_option,@work.project_id), {},{:class => "bo02 mb10"} %>
</p>
<div class="cl"></div>
<div class="homepageRightBanner mb10">
<div class="NewsBannerName">编辑作品</div>
</div>
<div class="cl"></div>
<p>
<label class="fl">
<span class="c_red">*</span>
&nbsp;作品描述&nbsp;&nbsp;&nbsp;&nbsp;
</label>
<textarea name="student_work[description]" placeholder="最多3000个汉字(或6000个英文字符)" id="student_work_description" class="w620 hwork_txt" maxlength="6000" onkeyup="regexStudentWorkDescription();"><%= @work.description%></textarea>
<p id="student_work_description_textarea" class="c_red ml90 mb10"></p>
</p>
<div class="cl"></div>
<p>
<label class="fl">&nbsp;&nbsp;&nbsp;添加附件&nbsp;&nbsp;&nbsp;&nbsp;</label>
<%= render :partial => 'attachments/new_form',:locals => {:container => @work} %>
</p>
<div class="cl"></div>
<p class="ml80 ">
<a href="javascript:void(0)" class="blue_btn fl c_white mt10" onclick="edit_student_work(<%= @work.id%>);">提交作品</a>
<%= link_to "返&nbsp;&nbsp;回".html_safe, student_work_index_path(:homework => @homework), :class => "blue_btn grey_btn fl c_white mt10 ml10"%>
<div class="cl"></div>
</p>
</div><!---创建作业内容结束-->
<% end%>
<div class="HomeWork" id="RSide">
<div class="HomeWorkBox">
<div class="">
<div class="homepagePostTitle fl">
<%= @homework.name%>(作业名称)
</div>
<span class="fr c_grey">
截止时间:<%= @homework.end_time%>
</span>
<div class="cl"></div>
<a href="javascript:void(0);" class="c_blue">
<%= link_to @homework.user.show_name, user_activities_path(@homework.user_id), :class => "c_blue"%>
</a>
<div class="cl"></div>
<div class="HomeWorkP">
<%= @homework.description.html_safe %>
</div>
</div>
</div>
</div><!--新建作业结束-->
<div class="cl"></div>
</div><!----HomeWorkBox end-->
<div class="cl"></div>
<div class="HomeWorkCon mt15">
<%= labelled_form_for @work,:html => { :multipart => true } do |f|%>
<div class=" c_red mb10">
提示:作品名称和描述中不要出现真实的姓名信息
</div>
<div class="cl"></div>
<div>
<input type="text" name="student_work[name]" id="student_work_name" placeholder="请简洁的概括作品的功能或特性" class="InputBox W700" maxlength="200" onkeyup="regexStudentWorkName();" value="<%= @work.name%>">
<div class="cl"></div>
<p id="student_work_name_span" class="c_red mb10"></p>
</div>
<div class="mt10">
<textarea name="student_work[description]" id="student_work_description" placeholder="请介绍你的作品" class="InputBox W700 H150" maxlength="6000" onkeyup="regexStudentWorkDescription();"><%= @work.description%></textarea>
<script>
var text = document.getElementById("student_work_description");
autoTextarea(text);// 调用
</script>
<div class="cl"></div>
<p id="student_work_description_textarea" class="c_red mb10"></p>
</div>
<div id="homework_attachments">
<%= render :partial => 'users/user_homework_attachment', :locals => {:container => @work, :has_program=>false} %>
</div>
<div class="mt5">
<a href="javascript:void(0);" class="BlueCirBtnMini fr" onclick="edit_student_work(<%= @work.id%>);">确定</a>
<span class="fr mr10 mt3">或</span>
<%= link_to "取消", student_work_index_path(:homework => @homework), :class => "fr mr10 mt3"%>
</div>
<div class="cl"></div>
<% end%>
</div><!----HomeWorkCon end-->
</div>

@ -16,23 +16,6 @@
// alert("当前作业已开启匿评,您提交作品后将不会收到任何匿评作品,您的作品也不会被其他用户匿评,如需获得最终成绩,请您联系主讲老师对您的作品单独进行评分");
});
<% end%>
$(function(){
$('#student_work_description').autoResize({
// On resize:
onResize : function() {
$(this).css({opacity:0.8});
},
// After resize:
animateCallback : function() {
$(this).css({opacity:1});
},
// Quite slow animation:
animateDuration : 100,
// More extra space:
extraSpace : 0
});
});
</script>
<div class="homepageRightBanner mb10">
@ -62,7 +45,7 @@
</div><!----HomeWorkBox end-->
<div class="cl"></div>
<div class="HomeWorkCon">
<div class="HomeWorkCon mt15">
<%= form_for(@student_work,
:html => { :multipart => true },
:url => {:controller => 'student_work',
@ -70,19 +53,23 @@
:homework => @homework.id
}) do |f|%>
<div class=" c_red mb10">
提示:匿评作业提交的作品,作品名称和描述中不能出现真实的姓名信息
提示:作品名称和描述中不要出现真实的姓名信息
</div>
<div class="cl"></div>
<div class="mt15">
<div>
<%= f.text_field "name", :required => true, :size => 60, :class => "InputBox W700", :maxlength => 200, :placeholder => "请简洁的概括作品的功能或特性", :onkeyup => "regexStudentWorkName();" %>
<div class="cl"></div>
<p id="student_work_name_span" class="c_red ml90 mb10"></p>
<p id="student_work_name_span" class="c_red mb10"></p>
</div>
<div class="mt10">
<%= f.text_area "description", :class => "InputBox W700 H150", :placeholder => "请介绍你的作品", :onkeyup => "regexStudentWorkDescription();"%>
<script>
var text = document.getElementById("student_work_description");
autoTextarea(text);// 调用
</script>
<div class="cl"></div>
<p id="student_work_description_textarea" class="c_red ml90 mb10"></p>
<p id="student_work_description_textarea" class="c_red mb10"></p>
</div>
<div id="homework_attachments">

@ -179,94 +179,73 @@ function regexStudentWorkDescription()
}
}
//textarea自适应高度
(function($){
$.fn.autoResize = function(options) {
// Just some abstracted details,
// to make plugin users happy:
var settings = $.extend({
onResize : function(){},
animate : true,
animateDuration : 150,
animateCallback : function(){},
extraSpace : 20,
limit: 1000
}, options);
// Only textarea's auto-resize:
this.filter('textarea').each(function(){
// Get rid of scrollbars and disable WebKit resizing:
var textarea = $(this).css({resize:'none','overflow-y':'hidden'}),
// Cache original height, for use later:
origHeight = textarea.height(),
// Need clone of textarea, hidden off screen:
clone = (function(){
// Properties which may effect space taken up by chracters:
var props = ['height','width','lineHeight','textDecoration','letterSpacing'],
propOb = {};
// Create object of styles to apply:
$.each(props, function(i, prop){
propOb[prop] = textarea.css(prop);
});
// Clone the actual textarea removing unique properties
// and insert before original textarea:
return textarea.clone().removeAttr('id').removeAttr('name').css({
position: 'absolute',
top: 0,
left: -9999
}).css(propOb).attr('tabIndex','-1').insertBefore(textarea);
})(),
lastScrollTop = null,
updateSize = function() {
// Prepare the clone:
clone.height(0).val($(this).val()).scrollTop(10000);
// Find the height of text:
var scrollTop = Math.max(clone.scrollTop(), origHeight) + settings.extraSpace,
toChange = $(this).add(clone);
// Don't do anything if scrollTip hasen't changed:
if (lastScrollTop === scrollTop) { return; }
lastScrollTop = scrollTop;
// Check for limit:
if ( scrollTop >= settings.limit ) {
$(this).css('overflow-y','hidden');
return;
}
// Fire off callback:
settings.onResize.call(this);
// Either animate or directly apply height:
settings.animate && textarea.css('display') === 'block' ?
toChange.stop().animate({height:scrollTop}, settings.animateDuration, settings.animateCallback)
: toChange.height(scrollTop);
};
// Bind namespaced handlers to appropriate events:
textarea
.unbind('.dynSiz')
.bind('keyup.dynSiz', updateSize)
.bind('keydown.dynSiz', updateSize)
.bind('change.dynSiz', updateSize);
});
// Chain:
return this;
//textarea自适应高度 纯js写的 有浏览器判断
/**
* 文本框根据输入内容自适应高度
* @param {HTMLElement} 输入框元素
* @param {Number} 设置光标与输入框保持的距离(默认0)
* @param {Number} 设置最大高度(可选)
*/
var autoTextarea = function (elem, extra, maxHeight) {
extra = extra || 0;
var isFirefox = !!document.getBoxObjectFor || 'mozInnerScreenX' in window,
isOpera = !!window.opera && !!window.opera.toString().indexOf('Opera'),
addEvent = function (type, callback) {
elem.addEventListener ?
elem.addEventListener(type, callback, false) :
elem.attachEvent('on' + type, callback);
},
getStyle = elem.currentStyle ? function (name) {
var val = elem.currentStyle[name];
if (name === 'height' && val.search(/px/i) !== 1) {
var rect = elem.getBoundingClientRect();
return rect.bottom - rect.top -
parseFloat(getStyle('paddingTop')) -
parseFloat(getStyle('paddingBottom')) + 'px';
};
return val;
} : function (name) {
return getComputedStyle(elem, null)[name];
},
minHeight = parseFloat(getStyle('height'));
elem.style.resize = 'none';
var change = function () {
var scrollTop, height,
padding = 0,
style = elem.style;
if (elem._length === elem.value.length) return;
elem._length = elem.value.length;
if (!isFirefox && !isOpera) {
padding = parseInt(getStyle('paddingTop')) + parseInt(getStyle('paddingBottom'));
};
scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
elem.style.height = minHeight + 'px';
if (elem.scrollHeight > minHeight) {
if (maxHeight && elem.scrollHeight > maxHeight) {
height = maxHeight - padding;
style.overflowY = 'auto';
} else {
height = elem.scrollHeight - padding;
style.overflowY = 'hidden';
};
style.height = height + extra + 'px';
scrollTop += parseInt(style.height) - elem.currHeight;
document.body.scrollTop = scrollTop;
document.documentElement.scrollTop = scrollTop;
elem.currHeight = parseInt(style.height);
};
};
})(jQuery);
addEvent('propertychange', change);
addEvent('input', change);
addEvent('focus', change);
change();
};
Loading…
Cancel
Save