c# - 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 样式(如果您不使用它们的话)。