为什么jQuery插件会发生冲突,以及如何避免它们?

时间:2012-07-08 23:25:12

标签: jquery jquery-plugins

我经常组合多个jQuery插件,但却发现它们无法正常工作。

以下示例结合了两种效果:缩略图逐一显示,并消失滚动条。

这个有jQuery底部的jQuery,但只有“逐个出现”才有效。它以某种方式禁用了滚动条功能:

http://heidixu.com/creative/test/index2.html

这个已经“逐一出现”jQuery注释掉了,并显示:无;从css中取出,滚动条功能突然再次起作用:

http://heidixu.com/creative/test/index2.html将鼠标移到内容区域以查看滚动条是否会显示并消失。

如何让多个插件一起工作?

非常感谢!

编辑:为了让它更容易,我想我会把代码附加到此。

消失滚动条:

<script type="text/javascript">
            $(function() {

                // the element we want to apply the jScrollPane
                var $el                 = $('#jp-container').jScrollPane({
                    verticalGutter  : -16
                }),

                // the extension functions and options  
                    extensionPlugin     = {

                        extPluginOpts   : {
                            // speed for the fadeOut animation
                            mouseLeaveFadeSpeed : 500,
                            // scrollbar fades out after hovertimeout_t milliseconds
                            hovertimeout_t      : 1000,
                            // if set to false, the scrollbar will be shown on mouseenter and hidden on mouseleave
                            // if set to true, the same will happen, but the scrollbar will be also hidden on mouseenter after "hovertimeout_t" ms
                            // also, it will be shown when we start to scroll and hidden when stopping
                            useTimeout          : true,
                            // the extension only applies for devices with width > deviceWidth
                            deviceWidth         : 980
                        },
                        hovertimeout    : null, // timeout to hide the scrollbar
                        isScrollbarHover: false,// true if the mouse is over the scrollbar
                        elementtimeout  : null, // avoids showing the scrollbar when moving from inside the element to outside, passing over the scrollbar
                        isScrolling     : false,// true if scrolling
                        addHoverFunc    : function() {

                            // run only if the window has a width bigger than deviceWidth
                            if( $(window).width() <= this.extPluginOpts.deviceWidth ) return false;

                            var instance        = this;

                            // functions to show / hide the scrollbar
                            $.fn.jspmouseenter  = $.fn.show;
                            $.fn.jspmouseleave  = $.fn.fadeOut;

                            // hide the jScrollPane vertical bar
                            var $vBar           = this.getContentPane().siblings('.jspVerticalBar').hide();

                            /*
                             * mouseenter / mouseleave events on the main element
                             * also scrollstart / scrollstop - @James Padolsey : http://james.padolsey.com/javascript/special-scroll-events-for-jquery/
                             */
                            $el.bind('mouseenter.jsp',function() {

                                // show the scrollbar
                                $vBar.stop( true, true ).jspmouseenter();

                                if( !instance.extPluginOpts.useTimeout ) return false;

                                // hide the scrollbar after hovertimeout_t ms
                                clearTimeout( instance.hovertimeout );
                                instance.hovertimeout   = setTimeout(function() {
                                    // if scrolling at the moment don't hide it
                                    if( !instance.isScrolling )
                                        $vBar.stop( true, true ).jspmouseleave( instance.extPluginOpts.mouseLeaveFadeSpeed || 0 );
                                }, instance.extPluginOpts.hovertimeout_t );


                            }).bind('mouseleave.jsp',function() {

                                // hide the scrollbar
                                if( !instance.extPluginOpts.useTimeout )
                                    $vBar.stop( true, true ).jspmouseleave( instance.extPluginOpts.mouseLeaveFadeSpeed || 0 );
                                else {
                                clearTimeout( instance.elementtimeout );
                                if( !instance.isScrolling )
                                        $vBar.stop( true, true ).jspmouseleave( instance.extPluginOpts.mouseLeaveFadeSpeed || 0 );
                                }

                            });

                            if( this.extPluginOpts.useTimeout ) {

                                $el.bind('scrollstart.jsp', function() {

                                    // when scrolling show the scrollbar
                                clearTimeout( instance.hovertimeout );
                                instance.isScrolling    = true;
                                $vBar.stop( true, true ).jspmouseenter();

                            }).bind('scrollstop.jsp', function() {

                                    // when stop scrolling hide the scrollbar (if not hovering it at the moment)
                                clearTimeout( instance.hovertimeout );
                                instance.isScrolling    = false;
                                instance.hovertimeout   = setTimeout(function() {
                                    if( !instance.isScrollbarHover )
                                            $vBar.stop( true, true ).jspmouseleave( instance.extPluginOpts.mouseLeaveFadeSpeed || 0 );
                                    }, instance.extPluginOpts.hovertimeout_t );

                            });

                                // wrap the scrollbar
                                // we need this to be able to add the mouseenter / mouseleave events to the scrollbar
                            var $vBarWrapper    = $('<div/>').css({
                                position    : 'absolute',
                                left        : $vBar.css('left'),
                                top         : $vBar.css('top'),
                                right       : $vBar.css('right'),
                                bottom      : $vBar.css('bottom'),
                                width       : $vBar.width(),
                                height      : $vBar.height()
                            }).bind('mouseenter.jsp',function() {

                                clearTimeout( instance.hovertimeout );
                                clearTimeout( instance.elementtimeout );

                                instance.isScrollbarHover   = true;

                                    // show the scrollbar after 100 ms.
                                    // avoids showing the scrollbar when moving from inside the element to outside, passing over the scrollbar                              
                                instance.elementtimeout = setTimeout(function() {
                                    $vBar.stop( true, true ).jspmouseenter();
                                }, 100 );   

                            }).bind('mouseleave.jsp',function() {

                                    // hide the scrollbar after hovertimeout_t
                                clearTimeout( instance.hovertimeout );
                                instance.isScrollbarHover   = false;
                                instance.hovertimeout = setTimeout(function() {
                                        // if scrolling at the moment don't hide it
                                    if( !instance.isScrolling )
                                            $vBar.stop( true, true ).jspmouseleave( instance.extPluginOpts.mouseLeaveFadeSpeed || 0 );
                                    }, instance.extPluginOpts.hovertimeout_t );

                            });

                            $vBar.wrap( $vBarWrapper );

                        }

                        }

                    },

                    // the jScrollPane instance
                    jspapi          = $el.data('jsp');

                // extend the jScollPane by merging 
                $.extend( true, jspapi, extensionPlugin );
                jspapi.addHoverFunc();

            });
        </script>

缩略图一个接一个出现:

<script type="text/javascript">
            $(function() {
                // Start showing the divs
                showDiv();
            });

            function showDiv() {
                // If there are hidden divs left
                if($('div:hidden').length) {
                    // Fade the first of them in
                    $('div:hidden:first').fadeIn();
                    // And wait one second before fading in the next one
                    setTimeout(showDiv, 500);
                }
            }
        </script>

1 个答案:

答案 0 :(得分:0)

通常,jquery插件应该独立工作。

有几个原因导致它们可能没有,但所有这些都依赖于一个或两个插件本身的缺陷。

由于HTML类名,id等的冲突,你经常会得到jquery插件失败。例如,一个消失的滚动条很可能是一些冲突的CSS,当你从你的工具中使用时它没有很好地发挥作用。

也常见:插件中的一些jquery选择器会覆盖其他工具的一些html写作。

解决方法 - 使用iframe元素将两个页面彼此分开。

或者查看插件,看看是否有任何方法可以为插件使用的类名创建前缀。这可能会有所帮助,因为它会使您的css类名独立。

否则,只需从firebug或其他工具中查看DOM。查看问题中涉及的CSS样式和HTML元素,以获取有关修复它的操作的提示。