zoukankan      html  css  js  c++  java
  • jQuery autoResize

    这是一个用jQuery实现的, 自动调整textarea高度, 非常的好!
    但原作者已经把它的相关描述页面移除了, 这里做个备份吧~
    但js路径还在:
    full: http://james.padolsey.com/demos/plugins/jQuery/autoresize.jquery.js
    minified: http://james.padolsey.com/demos/plugins/jQuery/autoresize.jquery.min.js
    原文路径: http://james.padolsey.com/javascript/jquery-plugin-autoresize/ (现在是404)

    Usage:
    The following options are available:
    onResize - (type: Function) - A callback function fired every time the textarea is resized. Within the function 'this' refers to the textarea being resized.
    animate - (type: Boolean) - If set to false no animation will take place, the height will immediately change when necessary. By default it's set to true.
    animateDuration - (type: Number) - Millisecond duration of animation, by default it's set to 150.
    animateCallback - (type: Function) - A callback function fired every time an animation completes. Note: not the same as the onResize callback.
    extraSpace - (type: Number) - A pixel value to be added to the total necessary height when applied to the textarea. By default it's set to 20. The idea behind this is to reassure users that they have more space to continue writing.
    limit - (type: Number) - Once the textarea reaches this height it will stop expanding. By default it's set to 1000.

    The textarea will expand when required until the limit is reached, at which time it brings back the scrollbar. If you were to then delete all the contents of the textarea it would only return to it's original size (no smaller). Also note that, even if you set 'animate' to true, the animation will only occur if the element is set to display:block; in the CSS.

    $('textarea#comment').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
    });
    
    /*
     * 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://www.jacklmoore.com/autosize/

  • 相关阅读:
    WCF 路由功能
    ado.net2.0的SqlTransaction使用方法
    IIS7、IIS8添加net.tcp协议报错 "未将对象引用设置到对象的实例。"
    windows phone 7 调用 wcf
    kettle连接mssql(Driver class 'net.sourceforge.jtds.jdbc.Driver' could not be found, make sure the 'MS SQL Server' driver (jar file) is installed)
    hive源码编译
    传奇1.76版本私服物品过滤单(去除祖玛级别)
    中国电信摘机系统xml
    初中英语
    视频播放器
  • 原文地址:https://www.cnblogs.com/zlog/p/5387837.html
Copyright © 2011-2022 走看看