jquery插件不在html页面上工作,但在site.master中没有?

时间:2012-07-12 14:49:53

标签: jquery asp.net

我正在使用jQuery Banner Rotator插件,并在html页面上正常运行。但是,当我将它复制到我的site.master时,我收到一个javascript错误,说“对象不支持属性或方法”allinone_bannerrotator“。

两个文档的头部都是相同的:

<head>
<title></title>
<!--[if !IE 7]>
    <style type="text/css">
        #wrap {display:table;height:100%}
    </style>
<![endif]-->
<link href="Styles/Site.css" rel="stylesheet" type="text/css" />
<link href="Styles/allinone_bannerRotator.css" rel="stylesheet" type="text/css" />
<link href='http://fonts.googleapis.com/css?family=Droid+Sans' rel='stylesheet' type='text/css' />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script src="Scripts/jquery-ui-1.8.16.custom.min.js" type="text/javascript"></script>
<script src="Scripts/jquery.ui.touch-punch.min.js" type="text/javascript"></script>
<script src="Scripts/allinone_bannerRotator.js" type="text/javascript"></script>
<script>
    $(function () {

        $('#allinone_bannerRotator_classic').allinone_bannerRotator({
            skin: 'classic',
            width: 751,
            height: 229,
            thumbsFolder: 'images/classic/thumbs'
        });


    });
</script>

除了site.master包含runat =“server”标记,并且其中包含内容占位符:

<asp:ContentPlaceHolder ID="HeadContent" runat="server">
</asp:ContentPlaceHolder>

这是横幅的代码:

<div id="allinone_bannerRotator_classic" style="display: none; margin: 0px">
                            <!-- IMAGES -->
                            <img src="images/classic/banner1.png" alt="" data-text-id="#allinone_bannerRotator_photoText1" />
                            <img src="images/classic/banner2.png" alt="" data-text-id="#allinone_bannerRotator_photoText2" />
                            <img src="images/classic/banner3.png" alt="" data-text-id="#allinone_bannerRotator_photoText3" />
                            <img src="images/classic/banner4.png" alt="" data-text-id="#allinone_bannerRotator_photoText4" />
                            <!-- TEXTS -->
                            <div id="allinone_bannerRotator_photoText1" class="allinone_bannerRotator_texts">
                                <div class="allinone_bannerRotator_text_line textElement12_attractive" data-initial-left="50"
                                    data-initial-top="10" data-final-left="50" data-final-top="40" data-duration="0.5"
                                    data-fade-start="0" data-delay="0">
                                    Broadoak students love to
                                </div>
                                <div class="allinone_bannerRotator_text_line textElement11_attractive" data-initial-left="50"
                                    data-initial-top="10" data-final-left="50" data-final-top="70" data-duration="0.5"
                                    data-fade-start="0" data-delay="0.3">
                                    get stuck in</div>
                            </div>
                            <div id="allinone_bannerRotator_photoText2" class="allinone_bannerRotator_texts">
                                <div class="allinone_bannerRotator_text_line textElement12_attractive" data-initial-left="550"
                                    data-initial-top="60" data-final-left="350" data-final-top="60" data-duration="0.5"
                                    data-fade-start="0" data-delay="0">
                                    16 transition effects<br />
                                    for images</div>
                                <div class="allinone_bannerRotator_text_line textElement12_attractive" data-initial-left="550"
                                    data-initial-top="125" data-final-left="350" data-final-top="125" data-duration="0.5"
                                    data-fade-start="0" data-delay="0.3">
                                    optional can set the transition<br />
                                    for each image</div>
                            </div>
                            <div id="allinone_bannerRotator_photoText3" class="allinone_bannerRotator_texts">
                                <div class="allinone_bannerRotator_text_line textElement11_attractive" data-initial-left="480"
                                    data-initial-top="60" data-final-left="50" data-final-top="60" data-duration="0.5"
                                    data-fade-start="0" data-delay="0">
                                    Animated text from any direction</div>
                                <div class="allinone_bannerRotator_text_line textElement12_attractive" data-initial-left="0"
                                    data-initial-top="75" data-final-left="50" data-final-top="75" data-duration="0.5"
                                    data-fade-start="0" data-delay="0.3">
                                    top, bottom, left and right</div>
                                <div class="allinone_bannerRotator_text_line textElement11_attractive" data-initial-left="50"
                                    data-initial-top="250" data-final-left="50" data-final-top="110" data-duration="1"
                                    data-fade-start="0" data-delay="0.5">
                                    Any color, CSS and HTML formated</div>
                            </div>
                            <div id="allinone_bannerRotator_photoText4" class="allinone_bannerRotator_texts">
                                <div class="allinone_bannerRotator_text_line textElement12_attractive" data-initial-left="50"
                                    data-initial-top="0" data-final-left="50" data-final-top="260" data-duration="0.5"
                                    data-fade-start="0" data-delay="0">
                                    Line One is here</div>
                                <div class="allinone_bannerRotator_text_line textElement11_attractive" data-initial-left="50"
                                    data-initial-top="384" data-final-left="50" data-final-top="240" data-duration="0.5"
                                    data-fade-start="0" data-delay="0.3">
                                    Line Two over there</div>
                            </div>
                        </div>

此外,html测试页面和站点主页都位于站点结构中的相同位置,因此我认为这不是路径问题。

1 个答案:

答案 0 :(得分:0)

糟糕。我在页面中的第二个jQuery包含的位置比site.master低(例如在我的default.aspx页面上)