如何正确地将 JS 库（jqueryUI、jquery 插件）包含到 DNN 5 模块中？

发布于 2024-10-02 00:24:57 字数 1461 浏览 5 评论 0原文

我使用 DotNetNuke.Framework.jQuery.RequestRegistration(); 将 jquery 包含到我的模块中，它的工作原理与预期一致。

我通过页面设置/高级设置/页面标题标签将其他脚本包含到我的 DNN 门户中。它们也会被加载，但无法按预期工作。

就我而言，我想在我的 dnn 模块之一中添加选项卡，并且我使用 jqueryUI 来执行此操作。如果我在 DNN 之外测试这个模块，它会正常工作，但是当安装到 DNN 中时就会出现问题。我创建了选项卡，但无法在它们之间切换。实际上，我看到了应位于同一页面的单独选项卡中的所有内容。

alt text

这是我来自 module.ascx 文件的 Js 代码。

<script type="text/javascript">
    jQuery(document).ready(function ($) {
        $("#<%= pnlTabs.ClientID %>").tabs();
    });
</script>

如何纠正这个问题？我认为问题在于所有这些不同的 JS 库混合在一起。那么将另一个 JS 库包含到 DNN 模块中的正确方法是什么？

编辑：我发现了问题。你能帮忙修一下吗？

<li><a href="DesktopModules/OsControl/#dnn_ctr380_osControl_pnlProcesses">Processes</a></li>

<div id="dnn_ctr380_OsControl_pnlProcesses" style="text-align:left;">

问题是 DNN 将“DesktopModules/OsControl/”添加到“li”元素中的链接前面。如何防止这种情况或有其他方法解决这个问题？

EDIT2：

<asp:BulletedList ID="BulletedList1" runat="server" BulletStyle="NotSet" DisplayMode="HyperLink">
    <asp:ListItem Value="#OsControl_pnlProcesses">Processes</asp:ListItem>
    <asp:ListItem Value="#OsControl_pnlServices">Services</asp:ListItem>
    <asp:ListItem Value="#OsControl_pnlEvents">Events</asp:ListItem>
</asp:BulletedList>

这就是我创建链接的方式。

原文

I include jquery into my module with DotNetNuke.Framework.jQuery.RequestRegistration(); and it works like expected.

Other scripts I include into my DNN portal via Page Settings/Advanced Settings/Page Header Tags.
They also get loaded, but they don't work as expected.

In my case I want to have tabs in one of my dnn modules and I'm using jqueryUI to do this. If I test this module outside of DNN it works like it should, but when installed into DNN something goes wrong.
I get the tabs created but I can't switch betwen them. Actualy I see all of the content which should be in separated tabs in the same page.

alt text

This is my Js code from module.ascx file.

<script type="text/javascript">
    jQuery(document).ready(function ($) {
        $("#<%= pnlTabs.ClientID %>").tabs();
    });
</script>

how to correct this ?
I think that problem is that all this different JS libs get mixed. So what is the correct way to include another JS libs into DNN module.

EDIT:
I found the problem. Can you help fix it ?

<li><a href="DesktopModules/OsControl/#dnn_ctr380_osControl_pnlProcesses">Processes</a></li>

<div id="dnn_ctr380_OsControl_pnlProcesses" style="text-align:left;">

Problem is that DNN prepends "DesktopModules/OsControl/" to the link in "li" element. How to prevent this or any other way around this ?

EDIT2:

<asp:BulletedList ID="BulletedList1" runat="server" BulletStyle="NotSet" DisplayMode="HyperLink">
    <asp:ListItem Value="#OsControl_pnlProcesses">Processes</asp:ListItem>
    <asp:ListItem Value="#OsControl_pnlServices">Services</asp:ListItem>
    <asp:ListItem Value="#OsControl_pnlEvents">Events</asp:ListItem>
</asp:BulletedList>

This is how I create links.

分享到QQ

分享到微博