您的位置：首页 > Web前端 > JQuery
jQuery plugin: autoResize

2009-11-11 21:27 344 查看
html代码定义文本框：

javascript代码：

<SCRIPT type=text/javascript>
$('textarea#resize').autoResize({
// 文本框改变大小时触发事件，这里改变了文本框透明度
onResize : function() {
$(this).css({opacity:0.8});
},
// 动画效果回调触发事件，这里改变了文本框透明度
animateCallback : function() {
$(this).css({opacity:1});
},
// 动画效果持续时间（ms），默认150
animateDuration : 300,
// 每次改变大小时，扩展（缩小）的高度（像素），默认20
extraSpace : 40,
//当文本框高度大于多少时，不再扩展，出现滚动条，默认1000
limit: 200
});
</script>


或者最简单：

例子：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<SCRIPT type=text/javascript src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></SCRIPT>
<SCRIPT type=text/javascript src="autoresize.jquery.js"></SCRIPT>
<style type="text/css">
.autotextarea{
OVERFLOW-Y: hidden;
WIDTH: 500px;
DISPLAY: block;
FONT-FAMILY: Sans-serif;
HEIGHT: 100px;
FONT-SIZE: 1.2em;
OVERFLOW: hidden;

padding: 10px;
}
</style>

</head>

<body>
<textarea  id="resize" class="autotextarea"  >
Type something in here, when you get close to the end the box will e
</textarea>

<SCRIPT type=text/javascript>
$('textarea#resize').autoResize({
// On resize:
onResize : function() {
$(this).css({opacity:0.8});
},
// After resize:
animateCallback : function() {
$(this).css({opacity:1});
},
// Quite slow animation:
animateDuration : 300,
// More extra space:
extraSpace : 40
});
</script>
</body>
</html>


引用js:

/*
* jQuery autoResize (textarea auto-resizer)
* @copyright James Padolsey http://james.padolsey.com * @version 1.04
*/

(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', '');
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;

};

})(jQuery);
官方：http://james.padolsey.com/javascript/jquery-plugin-autoresize/
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理
标签：
相关文章推荐
新的分享
章节导航