DotNetNuke jQuery 选项卡不工作答案

【问题标题】：DotNetNuke jQuery Tabs Not WorkingDotNetNuke jQuery 选项卡不工作
【发布时间】：2016-08-12 20:50:30
【问题描述】：

JQuery 选项卡和面板在 DNN 版本 08.00.03 中不起作用。它仅在用户登录时有效。一旦用户注销，所有面板和选项卡都将停止工作。

我在 HTML 模块中有以下代码：

<div class="dnnForm" id="panels-demo">
        <div class="dnnFormExpandContent"><a href="">Expand All</a></div>
        <h2 id="ChristopherColumbus" class="dnnFormSectionHead"><a href="#">Christopher Columbus</a></h2>
        <fieldset class="dnnClear">
            <img src="<%=ResolveUrl("Images/498px-Christopher_Columbus.PNG") %>" alt="Christopher Columbus" width="32%" class="dnnLeft" />
            <div class="dnnRight" style="width:62%;margin-left:2%">
                <h1>Christopher Columbus</h1>
                <p>Italian navigator, colonizer and explorer whose voyages led to general European awareness of the American continents.</p>
            </div>
        </fieldset>
        <h2 id="IsaacNewton" class="dnnFormSectionHead"><a href="#">Isaac Newton</a></h2>
        <fieldset class="dnnClear">
            <img src="<%=ResolveUrl("Images/GodfreyKneller-IsaacNewton-1689.jpg") %>" alt="Isaac Newton" width="32%" class="dnnLeft" />
            <div class="dnnRight" style="width:62%;margin-left:2%">
                <h1>Isaac Newton</h1>
                <p>English physicist, mathematician, astronomer, natural philosopher, alchemist, and theologian. His law of universal gravitation and three laws of motion laid the groundwork for classical mechanics.</p>
            </div>
        </fieldset>
        <h2 id="JohannesGutenberg" class="dnnFormSectionHead"><a href="#">Johannes Gutenberg</a></h2>
        <fieldset class="dnnClear">
            <img src="<%=ResolveUrl("Images/Gutenberg.jpg") %>" alt="Johannes Gutenberg" width="32%" class="dnnLeft" />
            <div class="dnnRight" style="width:62%;margin-left:2%">
                <h1>Johannes Gutenberg</h1>
                <p>German printer who invented the mechanical printing press.</p>
            </div>
        </fieldset>
    </div>

以下代码放在模块头中：

<script type="text/javascript">
    jQuery(function ($) {
        var setupModule = function () {
            $('#panels-demo').dnnPanels();
            $('#panels-demo .dnnFormExpandContent a').dnnExpandAll({
                targetArea: '#panels-demo'
            });
        };
        setupModule();
        Sys.WebForms.PageRequestManager.getInstance().add_endRequest(function () {
            // note that this will fire when _any_ UpdatePanel is triggered,
            // which may or may not cause an issue
            setupModule();
        });
    });
</script>

添加这行代码时提到的一些 Stackoverflow 问题和其他表格：

jQuery.RequestDnnPluginsRegistration();

不确定如何以及在何处添加它，以及它是否能解决问题。上面的代码取自这个网站： http://uxguide.dotnetnuke.com/UIPatterns/Panels.html

【问题讨论】：

“停止工作”是什么意思？您在 javascript 控制台和网络选项卡中看到了哪些错误？
表示面板总是展开的。如果您单击它们，它们应该折叠或展开。我在控制台中收到此错误：对象不支持属性或方法 'dnnPanels'
我猜想包含dnnPanels 定义的脚本没有正确加载（检查您的网络选项卡是否有错误）。既然你提到登录会有所不同，我猜脚本需要授权才能访问。
网络标签下没有错误。
尝试将 RequestDnnPluginsRegistration 放在您发布的其他 sn-p 之上。

标签： jquery dotnetnuke dotnetnuke-8

【解决方案1】：

您的代码不会像现在这样工作，您使用的示例应该位于自定义模块或外观/容器文件的 .aspx 或 .ascx 代码页上。代码 <%=ResolveUrl("Images/GodfreyKneller-IsaacNewton-1689.jpg") %> 不能在 HTML 模块中使用。它是服务器端代码。

如果您查看此 http://www.dnnsoftware.com/wiki/reusable-dotnetnuke-jquery-plugins，您需要在代码中包含 DotNetNuke.Framework.jQuery.RequestDnnPluginsRegistration(); 和 ClientAPI.RegisterClientReference(this.Page, ClientAPI.ClientNamespaceReferences.dnn); 才能使选项卡正常工作。

这些可能在用户登录时在某处使用，因此我的选项卡功能正确。如果您构建自己的模块，您可以在他们的代码中添加这些行。

但是经过一些测试，我发现你可以将这些行添加到 HTML 中，它会起作用。

<script src="/Resources/Shared/Scripts/dnn.jquery.js?cdv=41" type="text/javascript"></script>   
<script src="/js/dnn.js?cdv=41" type="text/javascript"></script>

【讨论】：

【解决方案2】：

也许由于某种原因，您的资源加载不正常。如果将 JavaScript 包装在 $(document).ready({

【讨论】：