DNN 6 jQuery 选项卡

Question

我已经尝试了一半，但未能让 DNN 6 版本的 jQuery 选项卡（称为 DNNTabs）在自定义模块“编辑”页面（以模式打开，类似于模块“设置”）中工作。我希望将相同的默认主题/css 应用于选项卡和按钮（它的行为应该几乎与设置完全相同）。

这似乎是一些文档的开始，但它不是很完整。

http://www.dotnetnuke.com/Resources/Wiki/Page/dnnTabs-jQuery-Plugin.aspx

我已经在互联网上搜索了一个示例，但大多数示例都使用原始的 jQuery 选项卡和/或对其进行修改以与 DNN 一起“工作”。

http://jqueryui.com/demos/tabs/

我的代码的开头不起作用。

<script type="text/javascript">
    $('#tabs').dnnTabs();
</script>
<div id="tabs" class="dnnForm dnnModuleSettings dnnClear">
    <ul class="dnnAdminTabNav dnnClear">
        <li><a href="#tab1">Tab 1</a></li>
        <li><a href="#tab2">Tab 2</a></li>
    </ul>
    <div id="tab1">
        Some content...
    </div>
    <div id="tab2">
        Some content...
    </div>        
</div>

在我读到的其他地方，我必须像这样在我的 OnInit 中请求 DNN 插件注册：

protected void OnInit(object sender, System.EventArgs e)
{
    DotNetNuke.Framework.jQuery.RequestDnnPluginsRegistration();
}

我是否缺少另一个参考、代码行之类的东西？ 1）所有选项卡在加载时显示，2）单击选项卡只会滚动到模态中的 id 位置（之后无法滚动回顶部）

Answer 1

我认为这看起来很完整；我看到的唯一问题是您在定义选项卡之前正在初始化插件。也就是说，您要做的第一件事是检索带有 ID 选项卡的元素并为其设置插件，但该元素尚不存在。将您的脚本移动到控件的底部，我认为它会开始工作。

您可能需要调整的另一件事是您的OnInit 处理程序。通常，OnInit 是 Control.OnInit 的覆盖，所以它最终看起来像这样：

protected override void OnInit(EventArgs e)
{
    base.OnInit(e);
    jQuery.RequestDnnPluginsRegistration();
}

您可能还想在https://github.com/bdukes/DNN-World-Demos 上查看我的这个（和其他）插件示例。这些示例非常精简，因此您会看到其中有一些您并不真正需要的 CSS 样式，如果您不使用它们的话。