我遇到了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") . "
}
);
});";
但仍然存在错误，我在哪里做错了
答案 0 :(得分：0)
只需将jQuery内容包装在一个匿名包装器函数中，这样就可以像往常一样使用$ -shorthand：
jQuery(function($){
$('#da-slider1').cslider({
autoplay: $rb_autoplay == 1,
interval: $txt_interva,
bgincrement: $txt_bgincrement,
navigation: $rb_navigation == 1
});
答案 1 :(得分：0)
请在＆lt; head＆gt;中包含最新的jquery库文件。部分 也使用var j = jQuery.noConflict（）;在您的代码中使用j作为脚本的别名 你可以read
有时一些插件在代码中使用$作为函数，如果有，那么有可能与jquery $ alias和函数dollar发生冲突，因此在这种情况下你必须更改$别名。