0

我遇到了 js 问题,在它给出 $(..)cslide 不是一个函数之后,我认为代码不支持 jQuery noConflict

这是 default.php 代码

defined('_JEXEC') or die('Restricted access'); // no direct access   
JHTML::stylesheet('style.css', JURI::root() . 'modules/mod_slide_parallax/css/');

if (!JFactory::getApplication()->get('jquery')) {
    JFactory::getApplication()->set('jquery', true);
    JHTML::script('jquery.min.js', JURI::root() . 'modules/mod_jmsmegamenu/assets/jquery/');
}

$langScript = "(function($) {
    $(document).ready(function($){
        $('#da-slider1').cslider({
          autoplay:" . ($rb_autoplay == 1 ? "true" : "false") . ",
                        interval: " . $txt_interval . ",
            bgincrement: " . $txt_bgincrement . ",
            navigation: " .   ($rb_navigation == 1 ? "true" : "false")  . "
    });
})(jQuery);";




/*$langScript = "$(function($){\$('#da-slider1').cslider(
                       {
                        autoplay:" . ($rb_autoplay == 1 ? "true" : "false") . ",
                        interval: " . $txt_interval . ",
                        bgincrement: " . $txt_bgincrement . ",
                        navigation: " .   ($rb_navigation == 1 ? "true" : "false")  . "
                       }
); });";*/

$document = &JFactory::getDocument();
$document->addScriptDeclaration($langScript);
JHTML::script('jquery.cslider.js', JURI::root() . 'modules/mod_slide_parallax/js/');
JHTML::script('modernizr.custom.28468.js', JURI::root() . 'modules/mod_slide_parallax/js/');
?>

<div id="da-slider1" class="da-slider<?php echo $moduleclass_sfx; ?>">
    <?php foreach ($list as $item) : ?>
                <div class="da-slide">
                    <?php require JModuleHelper::getLayoutPath('mod_slide_parallax', '_item'); ?>
                </div>
    <?php endforeach; ?>
    <!--<a class="da-arrows">
    <?php if ($rb_arrows == 1): ?>
            <span class="da-arrows-prev"></span>
            <span class="da-arrows-next"></span>
    <?php endif; ?>
    </a>-->
</div>

这是 cslider.js 代码

(function( $, undefined ) {
/*
 * Slider object.
 */
$.Slider                = function( options, element ) {
    this.$el    = $( element );
    this._init( options );
};
$.Slider.defaults       = {
    current     : 0,        // index of current slide
    bgincrement : 50,       // increment the bg position (parallax effect) when sliding
    autoplay        : false,    // slideshow on / off
    interval        : 4000, // time between transitions
    navigation  : true  // enable navigation dots
};
$.Slider.prototype  = {
    _init               : function( options ) {
        this.options        = $.extend( true, {}, $.Slider.defaults, options );
        this.$slides        = this.$el.children('div.da-slide');
        this.slidesCount    = this.$slides.length;
        this.current        = this.options.current;
                    var $images = this.$slides.find('img');
                    $images.wrap('<div class="da-img" />');                
        if( this.current < 0 || this.current >= this.slidesCount ) {
            this.current    = 0;
        }
        this.$slides.eq( this.current ).addClass( 'da-slide-current' );
        if(this.options.navigation){
        var $navigation     = $( '<nav class="da-dots"/>' );
            for( var i = 0; i < this.slidesCount; ++i ) {
                $navigation.append( '<span/>' );
            }
            $navigation.appendTo( this.$el );
        }
        this.$pages     = this.$el.find('nav.da-dots > span');
        this.$navNext       = this.$el.find('span.da-arrows-next');
        this.$navPrev       = this.$el.find('span.da-arrows-prev');
        this.isAnimating    = false;
        this.bgpositer      = 0;
        this.cssAnimations  = Modernizr.cssanimations;
        this.cssTransitions = Modernizr.csstransitions;
        if( !this.cssAnimations || !this.cssAnimations ) {
            this.$el.addClass( 'da-slider-fb' );
        }
        this._updatePage();
        // load the events
        this._loadEvents();
        // slideshow
        if( this.options.autoplay ) {
            this._startSlideshow();
        }
    },
    _navigate           : function( page, dir ) {
        var $current    = this.$slides.eq( this.current ), $next, _self = this;
        if( this.current === page || this.isAnimating ) return false;
        this.isAnimating    = true;
        // check dir
        var classTo, classFrom, d;
        if( !dir ) {
            ( page > this.current ) ? d = 'next' : d = 'prev';
        }
        else {
            d = dir;
        }
        if( this.cssAnimations && this.cssAnimations ) {
            if( d === 'next' ) {
                classTo     = 'da-slide-toleft';
                classFrom   = 'da-slide-fromright';
                ++this.bgpositer;
            }
            else {
                classTo     = 'da-slide-toright';
                classFrom   = 'da-slide-fromleft';
                --this.bgpositer;
            }
            this.$el.css( 'background-position' , this.bgpositer * this.options.bgincrement + '% 0%' );
        }
        this.current    = page;
        $next           = this.$slides.eq( this.current );
        if( this.cssAnimations && this.cssAnimations ) {
            var rmClasses   = 'da-slide-toleft da-slide-toright da-slide-fromleft da-slide-fromright';
            $current.removeClass( rmClasses );
            $next.removeClass( rmClasses );
            $current.addClass( classTo );
            $next.addClass( classFrom );
            $current.removeClass( 'da-slide-current' );
            $next.addClass( 'da-slide-current' );
        }
        // fallback
        if( !this.cssAnimations || !this.cssAnimations ) {
            $next.css( 'left', ( d === 'next' ) ? '100%' : '-100%' ).stop().animate( {
                left : '0%'
            }, 1000, function() { 
                _self.isAnimating = false; 
            });
            $current.stop().animate( {
                left : ( d === 'next' ) ? '-100%' : '100%'
            }, 1000, function() { 
                $current.removeClass( 'da-slide-current' ); 
            });
        }
        this._updatePage();
    },
    _updatePage         : function() {
        this.$pages.removeClass( 'da-dots-current' );
        this.$pages.eq( this.current ).addClass( 'da-dots-current' );
    },
    _startSlideshow     : function() {
        var _self   = this;
        this.slideshow  = setTimeout( function() {
            var page = ( _self.current < _self.slidesCount - 1 ) ? page = _self.current + 1 : page = 0;
            _self._navigate( page, 'next' );
            if( _self.options.autoplay ) {
                _self._startSlideshow();
            }
        }, this.options.interval );
    },
    _loadEvents         : function() {
        var _self = this;
        this.$pages.on( 'click.cslider', function( event ) {
            if( _self.options.autoplay ) {
                clearTimeout( _self.slideshow );
                _self.options.autoplay  = false;
            }
            _self._navigate( $(this).index() );
            return false;
        });
        this.$navNext.on( 'click.cslider', function( event ) {
            if( _self.options.autoplay ) {
                clearTimeout( _self.slideshow );
                _self.options.autoplay  = false;
            }
            var page = ( _self.current < _self.slidesCount - 1 ) ? page = _self.current + 1 : page = 0;
            _self._navigate( page, 'next' );
            return false;
        });
        this.$navPrev.on( 'click.cslider', function( event ) {
            if( _self.options.autoplay ) {
                clearTimeout( _self.slideshow );
                _self.options.autoplay  = false;
            }
            var page = ( _self.current > 0 ) ? page = _self.current - 1 : page = _self.slidesCount - 1;
            _self._navigate( page, 'prev' );
            return false;
        });
        if( this.cssTransitions ) {
            if( !this.options.bgincrement ) {
                this.$el.on( 'webkitAnimationEnd.cslider animationend.cslider OAnimationEnd.cslider', function( event ) {
                    if( event.originalEvent.animationName === 'toRightAnim4' || event.originalEvent.animationName === 'toLeftAnim4' ) {
                        _self.isAnimating   = false;
                    }   
                });
            }
            else {
                this.$el.on( 'webkitTransitionEnd.cslider transitionend.cslider OTransitionEnd.cslider', function( event ) {
                    if( event.target.id === _self.$el.attr( 'id' ) )
                        _self.isAnimating   = false;
                });
            }
        }
    }
};
var logError            = function( message ) {
    if ( this.console ) {
        console.error( message );
    }
};
$.fn.cslider            = function( options ) {
    if ( typeof options === 'string' ) {
        var args = Array.prototype.slice.call( arguments, 1 );
        this.each(function() {
            var instance = $.data( this, 'cslider' );
            if ( !instance ) {
                logError( "cannot call methods on cslider prior to initialization; " +
                "attempted to call method '" + options + "'" );
                return;
            }
            if ( !$.isFunction( instance[options] ) || options.charAt(0) === "_" ) {
                logError( "no such method '" + options + "' for cslider instance" );
                return;
            }
            instance[ options ].apply( instance, args );
        });
    } 
    else {
        this.each(function() {
            var instance = $.data( this, 'cslider' );
            if ( !instance ) {
                $.data( this, 'cslider', new $.Slider( options, this ) );
            }
        });
    }
    return this;
};
})( jQuery );

然后我将代码更改为

$langScript = "jQuery(document).ready(function($){
  //you can now use $ as your jQuery object.
  jQuery('#da-slider1').cslider(
                       {
                        autoplay:" . ($rb_autoplay == 1 ? "true" : "false") . ",
                        interval: " . $txt_interval . ",
            bgincrement: " . $txt_bgincrement . ",
            navigation: " .   ($rb_navigation == 1 ? "true" : "false")  . "
                       }
);
});";

但错误仍然存​​在,我在哪里做错了

4

2 回答 2

0

只需将您的 jQuery 内容包装在一个匿名包装函数中,这样您就可以像往常一样使用 $-shorthand:

jQuery(function($){
    $('#da-slider1').cslider({
      autoplay: $rb_autoplay == 1,
      interval: $txt_interva,
      bgincrement: $txt_bgincrement,
      navigation: $rb_navigation == 1
});
于 2013-11-15T06:32:34.410 回答
0

请在 <head> 部分中包含最新的 jquery 库文件,同时使用 var j = jQuery.noConflict(); 在您的代码中并使用 j 作为脚本的别名,您可以阅读

有时某些插件在其代码中使用 $ 作为函数,如果这样做,则可能与 jquery $ alias 和函数 Dollar 发生冲突,因此在这种情况下,您必须更改 $ alias 。

于 2013-11-15T06:37:49.283 回答