1

我正在使用 Jquery UI ajax 选项卡在我的网站上显示内容。标签工作得很好。在我的每个 Ajax 选项卡上，我都有一个不太好用的图像旋转器。

图像旋转器需要 jquery 才能正常工作。除了这段代码之外，所有的 jquery 图像旋转器插件文件似乎都工作正常......

            jQuery(document).ready(function($) {


            var banner1 = $('#banner-rotator1').royalSlider({
                imageAlignCenter:true,
                imageScaleMode: "fill",

                hideArrowOnLastSlide:true,
                slideSpacing:20,

                autoScaleSlider: true,
                autoScaleSliderWidth: 1150,
                autoScaleSliderHeight: 400
            }).data("royalSlider");             


            var banner2 = $('#banner-rotator2').royalSlider({
                imageAlignCenter:true,
                imageScaleMode: "fill",

                hideArrowOnLastSlide:true,
                slideSpacing:20,

                autoScaleSlider: true,
                autoScaleSliderWidth: 1150,
                autoScaleSliderHeight: 400
            }).data("royalSlider");  

            var banner3 = $('#banner-rotator3').royalSlider({
                imageAlignCenter:true,
                imageScaleMode: "fill",

                hideArrowOnLastSlide:true,
                slideSpacing:20,

                autoScaleSlider: true,
                autoScaleSliderWidth: 1150,
                autoScaleSliderHeight: 400
            }).data("royalSlider");

            var banner4 = $('#banner-rotator4').royalSlider({
                imageAlignCenter:true,
                imageScaleMode: "fill",

                hideArrowOnLastSlide:true,
                slideSpacing:20,

                autoScaleSlider: true,
                autoScaleSliderWidth: 1150,
                autoScaleSliderHeight: 400
            }).data("royalSlider");
        });

我知道代码可以工作，因为如果我将它剪切并粘贴到 ajax 页面中它可以正常工作，但是当代码放置在“母版页”中时，我似乎无法让图像旋转器工作。有谁知道我做错了什么？

这是我的页面的链接http://dl.dropbox.com/u/14080718/Ajax-Test/Ajax-stripped.html

4

2 回答 2

1

这是因为这段代码是在 DOM 就绪时运行的，即母版页 DOM 就绪。您稍后会加载您的 ajax 内容，并且 javascript 代码在 ajax 内容加载之前已经运行。您可以做的是将该代码放在一个函数中。然后在你的 ajax 加载的内容中运行该函数document.ready

例如

在您的母版页中

function code_to_run(){ 
    // your code here 
}

在您的 ajax 加载的内容中

$(function(){ 
    code_to_run() // call the function in your masterpage 
});
于 2012-04-19T17:47:43.523 回答
0

母版页和内容页的交互很复杂，可以通过查看http://www.codeproject.com/Articles/36107/Master-Page-and-Content-Page-Interaction更好地理解。您可以在其中找到一段描述如何从母版页引用内容页的段落。我希望这有帮助

于 2012-04-19T19:07:03.210 回答