Jquery插件不起作用

时间:2010-12-17 20:03:59

标签: jquery plugins

我正在尝试安装jquery插件,但我无法使其正常工作。 这是我的标题:

    <script type="text/javascript" src="ajax/jquery.js"></script>
    <script type="text/javascript" src="ajax/ar.js"></script>
    <script type="text/javascript" src="ajax/function.js"></script>

jquery.js是从站点下载的jquery文件。 ar.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);

和function.js最后是管理textarea大小调整的文件:

$('#first').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
});

对我来说似乎都很好......我哪里错了?

2 个答案:

答案 0 :(得分:1)

我不确定你得到的错误是什么。从您发布的代码中我可以看到即兴创作的一点:

$(document).ready( function(){
    $('#first').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 
    });
});

答案 1 :(得分:0)

要检查的一些事项:

  • 是否正确包含所有文件?
  • 您的textarea是否具有#first的ID。如果是这样,在页面加载后你的textarea是否被添加到DOM?
  • 您是否在Firebug中看到任何错误或问题?
  • 您使用的jQuery版本是否与您使用的插件兼容?