0

我正在尝试将stickem 包含在我正在构建的Wordpress 主题中。它就在 GitHub 上，带有演示和一些文档：https ://github.com/davist11/jQuery-Stickem

.js 文件使用 $，这在 Wordpress 中会发生冲突，因此我将每个实例替换为$，并在顶部jQuery调用。jQuery.noConflict();

在我调用 noConflict 之前，我的错误控制台告诉我“未捕获的 TypeError：对象 [object Object] 的属性 '$' 不是函数。” 现在该消息已被“Uncaught TypeError: Object [object Object] has no method 'stickem'”替换，并且stickem 仍然无法正常工作。

你可以在这里看到我的 wordpress 实例：http: //lehuagray.com/trendsnap/

这是我修改后的代码：

 jQuery.noConflict();
jQuery('.container').stickem({
    item: '.stickem',
    container: '.stickem-container',
    stickClass: 'stickit',
    endStickClass: 'stickit-end',
    offset: 0,
    onStick: null,
    onUnstick: null
});


;(function(jQuery, window, document, undefined) {

var Stickem = function(elem, options) {
    this.elem = elem;
    this.jQueryelem = jQuery(elem);
    this.options = options;
    this.metadata = this.jQueryelem.data("stickem-options");
    this.jQuerywin = jQuery(window);
};

Stickem.prototype = {
    defaults: {
        item: '.stickem',
        container: '.stickem-container',
        stickClass: 'stickit',
        endStickClass: 'stickit-end',
        offset: 0,
        start: 0,
        onStick: null,
        onUnstick: null
    },

    init: function() {
        var _self = this;

        //Merge options
        _self.config = jQuery.extend({}, _self.defaults, _self.options, _self.metadata);

        _self.setWindowHeight();
        _self.getItems();
        _self.bindEvents();

        return _self;
    },

    bindEvents: function() {
        var _self = this;

        _self.jQuerywin.on('scroll.stickem', jQuery.proxy(_self.handleScroll, _self));
        _self.jQuerywin.on('resize.stickem', jQuery.proxy(_self.handleResize, _self));
    },

    destroy: function() {
        var _self = this;

        _self.jQuerywin.off('scroll.stickem');
        _self.jQuerywin.off('resize.stickem');
    },

    getItem: function(index, element) {
        var _self = this;
        var jQuerythis = jQuery(element);
        var item = {
            jQueryelem: jQuerythis,
            elemHeight: jQuerythis.height(),
            jQuerycontainer: jQuerythis.parents(_self.config.container),
            isStuck: false
        };

        //If the element is smaller than the window
        if(_self.windowHeight > item.elemHeight) {
            item.containerHeight = item.jQuerycontainer.outerHeight();
            item.containerInner = {
                border: {
                    bottom: parseInt(item.jQuerycontainer.css('border-bottom'), 10) || 0,
                    top: parseInt(item.jQuerycontainer.css('border-top'), 10) || 0
                },
                padding: {
                    bottom: parseInt(item.jQuerycontainer.css('padding-bottom'), 10) || 0,
                    top: parseInt(item.jQuerycontainer.css('padding-top'), 10) || 0
                }
            };

            item.containerInnerHeight = item.jQuerycontainer.height();
            item.containerStart = item.jQuerycontainer.offset().top - _self.config.offset + _self.config.start + item.containerInner.padding.top + item.containerInner.border.top;
            item.scrollFinish = item.containerStart - _self.config.start + (item.containerInnerHeight - item.elemHeight);

            //If the element is smaller than the container
            if(item.containerInnerHeight > item.elemHeight) {
                _self.items.push(item);
            }
        } else {
            item.jQueryelem.removeClass(_self.config.stickClass + ' ' + _self.config.endStickClass);
        }
    },

    getItems: function() {
        var _self = this;

        _self.items = [];

        _self.jQueryelem.find(_self.config.item).each(jQuery.proxy(_self.getItem, _self));
    },

    handleResize: function() {
        var _self = this;

        _self.getItems();
        _self.setWindowHeight();
    },

    handleScroll: function() {
        var _self = this;

        if(_self.items.length > 0) {
            var pos = _self.jQuerywin.scrollTop();

            for(var i = 0, len = _self.items.length; i < len; i++) {
                var item = _self.items[i];

                //If it's stuck, and we need to unstick it
                if(item.isStuck && (pos < item.containerStart || pos > item.scrollFinish)) {
                    item.jQueryelem.removeClass(_self.config.stickClass);

                    //only at the bottom
                    if(pos > item.scrollFinish) {
                        item.jQueryelem.addClass(_self.config.endStickClass);
                    }

                    item.isStuck = false;

                    //if supplied fire the onUnstick callback
                    if(_self.config.onUnstick) {
                        _self.config.onUnstick(item);
                    }

                //If we need to stick it
                } else if(item.isStuck === false && pos > item.containerStart && pos < item.scrollFinish) {
                        item.jQueryelem.removeClass(_self.config.endStickClass).addClass(_self.config.stickClass);
                        item.isStuck = true;

                        //if supplied fire the onStick callback
                        if(_self.config.onStick) {
                            _self.config.onStick(item);
                        }
                }
            }
        }
    },

    setWindowHeight: function() {
        var _self = this;

        _self.windowHeight = _self.jQuerywin.height() - _self.config.offset;
    }
};

Stickem.defaults = Stickem.prototype.defaults;

jQuery.fn.stickem = function(options) {
    //Create a destroy method so that you can kill it and call it again.
    this.destroy = function() {
        this.each(function() {
            new Stickem(this, options).destroy();
        });
    };

    return this.each(function() {
        new Stickem(this, options).init();
    });
};

})(jQuery, window , document);
4

3 回答 3

1

当然，您不能在定义之前使用函数。现在，您的调用stickem是在stickem. 您需要将代码放在一个jQuery(function() { });块中以延迟执行，直到 DOM 准备好（作为副作用，它还允许stickem在您尝试使用它之前定义该函数。）

jQuery(function() {
  jQuery('.container').stickem({
    item: '.stickem',
    container: '.stickem-container',
    stickClass: 'stickit',
    endStickClass: 'stickit-end',
    offset: 0,
    onStick: null,
    onUnstick: null
  });
});
于 2013-09-13T20:38:02.793 回答
0

仅当您想为其他库释放 $ 时才需要使用无冲突模式。

jQuery.noConflict();
// Release $ for other js libraries.

尝试像这样包装您的 jQuery 代码：

(function($) {
  // Inside this function $ is jQuery    

  $(document).ready({
    // jQuery code goes here.
  })
})(jQuery);
于 2013-09-13T20:38:12.600 回答
0

将您的函数和 jQuery 代码包装在以下内容中：

;(function ($) {

    //Code in here

})(jQuery);

这$仅将 分配给 jQuery。这样做可以防止与也使用$. 还用 a 引导此代码可以;保护您的函数免受未关闭脚本的影响。我不会依赖这种noConflict()方法。

<script type="text/javascript">
;(function ($, window, document, undefined) {
    //You can do it like this too
    //Make sure to replace all your 'jQuery' referecens to '$'
    //jQuery.extend({}, _self.defaults, _self.options, _self.metadata)
    $.extend({}, _self.defaults, _self.options, _self.metadata)
})(jQuery, window, document);
</script>
于 2013-09-13T20:36:42.317 回答