1

我有一个涉及 javascript/jquery 和 asp:ContentPlaceHolders 的烦人问题，我似乎无法解决，而且我整天都在尝试。

我有一个带有 C# 的 ASP.NET 网站。首页 - Default.aspx，有一个母版页 - MasterPage.master。我也有一个控件 - bslider.ascx

我正在尝试实现http://bxslider.com/上显示的图像滑块

我控件中的代码如下所示

<script src="../scripts/jquery.js" type="text/javascript"></script>
<script src="../js/jquery.bxSlider.min.js" type="text/javascript">
    $(document).ready(function () {
        $('#slider1').bxSlider();
    });    
</script>

<div id="slider1">
    <div>Slide one content</div>
    <div>Slide two content</div>
    <div>Slide three content</div>
    <div>And so on...</div>
</div>

Default.aspx中的相关代码如下：

<asp:Content ID="Content4" ContentPlaceHolderID="ContentPlaceHolder2" Runat="Server">
    <div class="sliderContainer">
        <uc4:BSlider ID="slider1" runat="server" />  
    </div>
</asp:Content>

MasterPage.master中的相关代码如下：

<body>
<form id="form1" runat="server">
    <div id="ContentContainer">
        <asp:contentplaceholder id="ContentPlaceHolder2" runat="server">
            <uc3:headerLeft ID="Header2" runat="server" /> 
        </asp:contentplaceholder>
    </div>
</form>
</body>

但是这不起作用，它会一个接一个地显示内部 div 的内容。我已经在标准的 .html 网页中对此进行了测试，并且它可以正常工作，因此它必须与 ASP.NET 方面有关。

任何人都可以帮助解决这个问题吗？

提前致谢。

4

2 回答 2

2

我已经解决了这个问题！这是 JQuery 库和 BxSlider 库之间的冲突。

它已使用以下代码修复：

<script src="../scripts/jquery.js" type="text/javascript"></script>
<script src="../js/jquery.bxSlider.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
    jQuery.noConflict();
    $('#slider1').bxSlider();
});    
</script>

踢自己没有意识到这是一个冲突问题。我希望这可以帮助其他陷入与我类似情况的人。

于 2012-09-20T11:56:02.657 回答
0

我想

<script src="../scripts/jquery.js" type="text/javascript"></script>
<script src="../js/jquery.bxSlider.min.js" type="text/javascript">
    $(document).ready(function () {
        $('#slider1').bxSlider();
    });    
</script>

实际上位于 中<uc3:headerLeft ID="Header2" runat="server" />，如果是这样，您只是没有在页面上打印任何脚本。

<body>
<form id="form1" runat="server">
    <div id="ContentContainer">
        <asp:contentplaceholder id="ContentPlaceHolder2" runat="server">
            <uc3:headerLeft ID="Header2" runat="server" /> 
        </asp:contentplaceholder>
    </div>
</form>
</body>

在上面来自母版页的代码中，您定义了默认内容。仅当您在当前执行的页面中没有 时才会打印它。<asp:Content ContentPlaceHolderID="ContentPlaceHolder2"尝试简单地将 headerLeft 移到 contentplaceholder 之外：

<div id="ContentContainer">
    <uc3:headerLeft ID="Header2" runat="server" /> 
    <asp:contentplaceholder id="ContentPlaceHolder2" runat="server">

    </asp:contentplaceholder>
</div>
于 2012-09-13T16:27:15.180 回答