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/

  • 相关阅读:
    推荐一个很好得电子书下载网站
    C# 线程手册 第四章 线程设计原则 管道线程模型
    C# 线程手册 第六章 线程调试与跟踪
    C# 线程手册 第五章 扩展多线程应用程序 剖析ThreadPool 类
    C# 线程手册 第六章 线程调试与跟踪 代码跟踪
    C# 线程手册 第五章 多线程应用程序 .NET 中的扩展性
    C# 线程手册 第五章 扩展多线程应用程序 CLR 和 线程
    C# 线程手册 第五章 扩展多线程应用程序 什么是线程池
    C# 线程手册 第五章 多线程应用程序 一个多线程微软消息队列(MSMQ)监听器
    C# 线程手册 第六章 线程调试与跟踪 使用不同的监听器程序
  • 原文地址:https://www.cnblogs.com/zlog/p/5387837.html
Copyright © 2011-2022 走看看