使用jQuery和Sitecore

Question

我正在尝试使用我创建的Web控件上的jQuery幻灯片放映.我可以在启用兼容模式的情况下让幻灯片在IE 9中运行,但我无法让它在Chrome或Firefox中正常运行.

我对jQuery不是很有经验,所以我可能会遗漏一些明显的东西.我不确定是否使用Sitecore,因为CMS与我的问题有关.

这是我在网络上发现并且一直在玩的一些示例代码.有人可以帮忙吗？

谢谢!crjunk

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

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

    var currentPosition = 0;
    var slideWidth = 500;
    var slides = $('.slide');
    var numberOfSlides = slides.length;
    var slideShowInterval;
    var speed = 3000;


    slideShowInterval = setInterval(changePosition, speed);

    slides.wrapAll('<div id="slidesHolder"></div>')

    slides.css({ 'float': 'left' });

    $('#slidesHolder').css('width', slideWidth * numberOfSlides);


    (function changePosition() {
        if (currentPosition == numberOfSlides - 1) {
            currentPosition = 0;
        } else {
            currentPosition++;
        }
        moveSlide();
    })(jQuery);


    (function moveSlide() {
        $('#slidesHolder')
              .animate({ 'marginLeft': slideWidth * (-currentPosition) });
    })(jQuery);

});
</script>


<div id="slideshow">
 <div id="slideshowWindow">
    <div class="slide">
             <img src="../../images/slider_1.jpg" />
             <div class="slideText">
                 <h2 class="slideTitle">Slide 1</h2>
                 <p class="slideDes">Lorem ipsum dolor sit amet, 
                 consectetur adipisicing elit, sed do eiusmod tempor 
                 incididunt ut labore et dolore magna aliqua.</p>
                 <p class="slideLink"><a href="#">click here</a></p>
             </div><!--/slideText-->
        </div><!--/slide-->
    <div class="slide">
         <img src="../../images/slider_2.jpg" />
                 <div class="slideText">
                 <h2 class="slideTitle">Slide 2</h2>
                 <p class="slideDes">Lorem ipsum dolor sit amet, 
                 consectetur adipisicing elit, sed do eiusmod tempor 
                 incididunt ut labore et dolore magna aliqua.</p>
                 <p class="slideLink"><a href="#">click here</a></p>
             </div><!--/slideText-->
    </div><!--/slide-->
    <div class="slide">
         <img src="../../images/slider_3.jpg" />
                 <div class="slideText">
                 <h2 class="slideTitle">Slide 3</h2>
                 <p class="slideDes">Lorem ipsum dolor sit amet, 
                 consectetur adipisicing elit, sed do eiusmod tempor 
                 incididunt ut labore et dolore magna aliqua.</p>
                 <p class="slideLink"><a href="#">click here</a></p>
             </div><!--/slideText-->
    </div><!--/slide-->
 </div><!--/slideshowWindow-->

Answer 1

您应该注意页面编辑器(在预览模式下)为"jQuery.noconfict.js"注入一个脚本标记,该标记以:window结尾.$ sc = jQuery.noConflict();

这不是很好,因为它覆盖了每个人在编写jQuery时使用的window.jQuery变量('.myclass')

jQuery标准功能仍然可以正常工作.但是......在注入之前未加载的任何模块和jQuery扩展都无法工作,因为它们是由一个不再是"window.jQuery"引用的jQuery实例加载的.

"jQuery.noconfict.js"被注入body标签下方.这意味着在PREVIEW MODE中,在body中任何地方的脚本标记中对jQuery的所有引用都将使用Sitecore noconflict实例,而不是加载模块而不是您想到的模块!

简而言之:不要使用jQuery变量,也不要使用$ ...在自己的命名空间中创建自己的jQuery变量