jquery - 仅在默认页面 NopCommerce 上显示图像 slider ？

Question

我正在使用 nopCommerce 来构建我的网站，并且我已将一个简单的 jquery slider 添加到 HeaderMenu.ascx 页面。

然而，它出现在每个页面上，因为母版页引用了 HeadMenu.ascx 文件。

仅在默认页面中显示它的最佳方式是什么？

默认页面:

<%@ Page Language="C#" MasterPageFile="~/MasterPages/TwoColumn.master" AutoEventWireup="true"
    Inherits="NopSolutions.NopCommerce.Web.Default" CodeBehind="Default.aspx.cs"
     %>

<%@ Register TagPrefix="nopCommerce" TagName="HomePagePoll" Src="~/Modules/HomePagePoll.ascx" %>
<%@ Register TagPrefix="nopCommerce" TagName="HomePageNews" Src="~/Modules/HomePageNews.ascx" %>
<%@ Register TagPrefix="nopCommerce" TagName="HomePageCategories" Src="~/Modules/HomePageCategories.ascx" %>
<%@ Register TagPrefix="nopCommerce" TagName="HomePageProducts" Src="~/Modules/HomePageProducts.ascx" %>
<%@ Register TagPrefix="nopCommerce" TagName="BestSellers" Src="~/Modules/BestSellers.ascx" %>
<%@ Register TagPrefix="nopCommerce" TagName="Topic" Src="~/Modules/Topic.ascx" %>
<%@ Register TagPrefix="nopCommerce" TagName="RecentlyAddedProducts" Src="~/Modules/RecentlyAddedProducts.ascx" %>


<asp:Content ID="Content1" ContentPlaceHolderID="cph1" runat="Server">

    <nopCommerce:Topic ID="topicHomePageText" runat="server" TopicName="HomePageText"
        OverrideSEO="false"></nopCommerce:Topic>
    <div class="clear">
    </div>
    <nopCommerce:HomePageCategories ID="ctrlHomePageCategories" runat="server" />
    <div class="clear">
    </div>
    <nopCommerce:BestSellers ID="ctrlBestSellers" runat="server" />
    <div class="clear">
    </div>
    <nopCommerce:RecentlyAddedProducts ID="ctrlRecentlyAddedProducts" runat="server" />
    <div class="clear">
    </div>
    <nopCommerce:HomePagePoll ID="ctrlPolls" runat="server" />
    <div class="clear">
    </div>

</asp:Content>

然后上面指向 TwoColumn 母版页:

<%@ Master Language="C#" MasterPageFile="~/MasterPages/Root.Master" AutoEventWireup="true" CodeBehind="TwoColumn.master.cs" Inherits="NopSolutions.NopCommerce.Web.MasterPages.TwoColumn" %>
<%@ Register TagPrefix="nopCommerce" TagName="MiniShoppingCartBox" Src="~/Modules/MiniShoppingCartBox.ascx" %>
<%@ Register TagPrefix="nopCommerce" TagName="CategoryNavigation" Src="~/Modules/CategoryNavigation.ascx" %>
<%@ Register TagPrefix="nopCommerce" TagName="ManufacturerNavigation" Src="~/Modules/ManufacturerNavigation.ascx" %>
<%@ Register TagPrefix="nopCommerce" TagName="InfoBlock" Src="~/Modules/InfoBlock.ascx" %>
<%@ Register TagPrefix="nopCommerce" TagName="LiveChatBlock" Src="~/Modules/LiveChatBlock.ascx" %>
<%@ Register TagPrefix="nopCommerce" TagName="RecentlyViewedProducts" Src="~/Modules/RecentlyViewedProductsBox.ascx" %>
<%@ Register TagPrefix="nopCommerce" TagName="PopularTags" Src="~/Modules/PopularTags.ascx" %>
<%@ Register TagPrefix="nopCommerce" TagName="NewsLetterSubscriptionBoxControl" Src="~/Modules/NewsLetterSubscriptionBoxControl.ascx" %>

<asp:Content ID="Content1" ContentPlaceHolderID="cph1" runat="server">
    <div class="master-wrapper-side-2">
        <asp:ContentPlaceHolder ID="cph2" runat="server">
            <nopCommerce:NewsLetterSubscriptionBoxControl runat="server" ID="ctrlNewsLetterSubscriptionBoxControl" />
            <div class="clear">
            </div>

            <div class="clear">
            </div>

            <div class="clear">
            </div>
            <nopCommerce:CategoryNavigation ID="ctrlCategoryNavigation" runat="server" />
            <div class="clear">
            </div>

            <div class="clear">
            </div>

        </asp:ContentPlaceHolder>
    </div>
    <div class="master-wrapper-center-2">
        <div class="master-wrapper-cph-2">
            <asp:ContentPlaceHolder ID="cph1" runat="server">
            </asp:ContentPlaceHolder>
        </div>
    </div>
</asp:Content>

然后指向母版页:

母版页包含引用“HeaderMenu”，其中包含我的 css 水平菜单和 jquery slider :

<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="Root.Master.cs" Inherits="NopSolutions.NopCommerce.Web.MasterPages.root" %>
<%@ Register TagPrefix="nopCommerce" TagName="Header" Src="~/Modules/Header.ascx" %>
<%@ Register TagPrefix="nopCommerce" TagName="HeaderMenu" Src="~/Modules/HeaderMenu.ascx" %>
<%@ Register TagPrefix="nopCommerce" TagName="Footer" Src="~/Modules/Footer.ascx" %>
<%@ Register TagPrefix="nopCommerce" TagName="GoogleAdsense" Src="~/Modules/GoogleAdsense.ascx" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title></title>
    <meta name="description" content="" />
    <meta name="keywords" content="" />
    <asp:PlaceHolder id="SCRIPTS" runat="server" />
    <asp:PlaceHolder id="phAnalyticsHead" runat="server" />


<script type="text/javascript" 
        src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
    // You may specify partial version numbers, such as "1" or "1.3",
    //  with the same result. Doing so will automatically load the 
    //  latest version matching that partial revision pattern 
    //  (e.g. 1.3 would load 1.3.2 today and 1 would load 1.6.1).
    google.load("jquery", "1.6.1");

    google.setOnLoadCallback(function () {
        // Place init code here instead of $(document).ready()
    });
</script>


</head>
<body>
    <form id="form1" runat="server">
    <div class="master-wrapper-page">
        <div class="master-wrapper-content">
            <nopCommerce:Header ID="ctrlHeader" runat="server" />
            <nopCommerce:HeaderMenu ID="ctrlHeaderMenu" runat="server" />
            <asp:ContentPlaceHolder ID="cph1" runat="server">
            </asp:ContentPlaceHolder>
            <div class="clear">
            </div>
        </div>
        <nopCommerce:GoogleAdsense runat="server" ID="ctrlGoogleAdsense" />
        <nopCommerce:Footer ID="ctrlFooter" runat="server" />
    </div>
    </form>
<asp:PlaceHolder id="phAnalyticsBody" runat="server" />
</body>
</html>

下面是我的 HeaderMenu 页面:

<%@ Control Language="C#" AutoEventWireup="true" Inherits="NopSolutions.NopCommerce.Web.Modules.HeaderMenuControl"
    CodeBehind="HeaderMenu.ascx.cs" %>
<%@ Register TagPrefix="nopCommerce" TagName="SearchBox" Src="~/Modules/SearchBox.ascx" %>
<script type="text/javascript">
    var page = window.location.pathname.split('/').pop();

    $('a[href$="' + page + '"]').parent().addClass('selected');


</script>
<script type="text/javascript">

    function slideSwitch() {
        var $active = $('#slideshow IMG.active');

        if ($active.length == 0) $active = $('#slideshow IMG:last');

        var $next = $active.next().length ? $active.next()
        : $('#slideshow IMG:first');

        $active.addClass('last-active');

        $next.css({ opacity: 0.0 })
        .addClass('active')
        .animate({ opacity: 1.0 }, 1000, function () {
            $active.removeClass('active last-active');
        });
    }

    $(function () {
        setInterval("slideSwitch()", 5000);
    });


</script>




<div class="headermenu">
    <div class="searchbox">
        <nopCommerce:SearchBox runat="server" ID="ctrlSearchBox"></nopCommerce:SearchBox>
    </div>
    <div id="nav">
        <nav>
 <ul class="topmenu">
        <li><a id="current" href="<%=CommonHelper.GetStoreLocation()%>" class="home"><%=GetLocaleResourceString("Content.HomePage")%></a> </li>
        <% if (this.ProductService.RecentlyAddedProductsEnabled)
           { %>
        <li><a href="<%=Page.ResolveUrl("~/recentlyaddedproducts.aspx")%>">
            <%=GetLocaleResourceString("Products.NewProducts")%></a> </li>
        <%} %>
        <li><a href="<%=Page.ResolveUrl("~/search.aspx")%>">
            <%=GetLocaleResourceString("Search.Search")%></a> </li>
        <li><a href="<%= SEOHelper.GetMyAccountUrl()%>">
            <%=GetLocaleResourceString("Account.MyAccount")%></a> </li>
        <% if (this.BlogService.BlogEnabled)
           { %>
        <li><a href="<%= SEOHelper.GetBlogUrl()%>">
            <%=GetLocaleResourceString("Blog.Blog")%></a> </li>
        <%} %>
        <% if (this.ForumService.ForumsEnabled)
           { %>
        <li><a href="<%= SEOHelper.GetForumMainUrl()%>">
            <%=GetLocaleResourceString("Forum.Forums")%></a></li>
        <%} %>
        <li><a href="<%=Page.ResolveUrl("~/contactus.aspx")%>">
            <%=GetLocaleResourceString("ContactUs.ContactUs")%></a> </li>
    </ul>
    </nav>
    </div>
    <%-- add the slider below the headerMenu--%>

<div id="slideshow">
    <img src="../App_Themes/darkOrange/images/dc/slider2/1.jpg" alt="" class="active" />
    <img src="../App_Themes/darkOrange/images/dc/slider2/2.jpg" alt="" />
    <img src="../App_Themes/darkOrange/images/dc/slider2/3.jpg" alt="" />
    <img src="../App_Themes/darkOrange/images/dc/slider2/4.jpg" alt="" />
    <img src="../App_Themes/darkOrange/images/dc/slider2/5.jpg" alt="" />
    <img src="../App_Themes/darkOrange/images/dc/slider2/6.jpg" alt="" />
</div>

</div>

抱歉邮件太长，无法用其他方式解释...

Answer 1

只需通过 nopcommerce 中的管理面板即可 在 Admin Homepagetext 主题页面中放置以下代码

<div id="slideshow">

your code

</div>