概述

TabPanel 控件是什么?

我们最近添加了一个 TabPanel 控件到 WijmoJS 的导航模块,该模块还包括我们的 TreeView 控件。 TabPanel 控件用于很多应用程序(包括我们的大部分“Intro”示例)。 它在我们的路线图上已经有相当长的一段时间了,但我们一直推迟它,因为它很常见,所以它被包含在许多布局框架中,包括 Bootstrap,Material Design Lite 等等。

Wijmo's TabPanel Control

我们为什么要添加无依赖关系的 JavaScript TabPanel 控件?

显著减少了应用程序的开销

使用 Bootstrap 的 Tab 控件很容易,但它引入了对 bootstrap.js 和 jQuery 的依赖。 这为您的应用程序增加了大约 50k 的代码以及常见的版本控制难题。 另外,当选项卡变得可见时,您必须添加一些代码以使托管的 WijmoJS 控件失效。

新的 TabPanel 控件允许我们从所有“Intro”示例中删除 bootstrap.js 和 jQuery 的依赖关系,并简化它们的代码和标记。

这是一个简单的例子。 我们的 TreeViewIntro 示例包含几个带有显示 HTML,JavaScript 和 CSS 选项卡的选项卡的主题。 使用 Bootstrap 选项卡,标记看起来像这样:

<div>
    <ul class="nav nav-tabs" role="tablist">
        <li class="active">
            <a href="#gsHtml" role="tab" data-toggle="tab">HTML</a>
        </li>
        <li>
            <a href="#gsJs" role="tab" data-toggle=	ab">JS</a>
        </li>
    </ul>
    <div class="tab-content">
        <div class="tab-pane active pane-content" id="gsHtml">
            <!-- HTML Markup -->
        </div>
        <div class="tab-pane pane-content" id="gsJs">
            // JavaScript code
        </div>
    </div>
</div>

选项卡 div 包含两个元素:带有选项卡标题的无序列表(ul)和包含选项卡窗格的 div。 这些元素通过 ID 进行关联,并且需要非平凡的标记来指定类名称和 ARIA 属性。 保持所有 ID 在整个应用程序中的独特性和同步性可能具有挑战性,并且错误并不总是容易被发现。 添加或重新组织标签需要注意,因为选项卡标题和内容位于文档的不同部分。

结果如下所示:

bootstrap

精简了标记

使用新的 WijmoJS TabPanel,标记变得简单得多:

<div class="source-tab">
    <div>
        <a>HTML</a>
        <div>
            <!-- HTML Markup -->
        </div>
    </div>
    <div>
        <a>JS</a>
        <div>
            // JavaScript code
        </div>
    </div>
</div>

主 TabPanel 元素包含每个选项卡窗格的一个子项。 选项卡窗格恰好包含两个子项:选项卡标题和相应的窗格。 您不必将 ID 或 ARIA 属性添加到子元素。 添加或重新组织标签更容易,因为它们是自包含的单元。

最重要的是,如果任何选项卡包含其他 WijmoJS 控件,它们将在切换选项卡时自动刷新。 不需要额外的代码。

当然,使用 TabPanel 控件允许我们从应用程序中删除 bootstrap.js 和 jQuery 依赖项。

结果如下所示:

bootstrap

TabPanel 从哪里获取?

TabPanel 是纯前端控件集 WijmoJS 2018 V1 版本最新发布的全新控件,下载试用最新版 WijmoJS 纯前端控件集,即可开始使用。

想要查看 WijmoJS 控件集 2018 V1 版本的其他新特性,请点击此处



如果你的项目需要一款专注于企业应用的 .NET 全功能控件套包,支持 WinForm、WPF、UWP、ASP.NET MVC 等多个平台,帮助您在缩减成本的同时,提前交付丰富的桌面、Web 和移动企业应用,ComponentOne Enterprise 恰恰能满足您的一切需求点击这里,开启您的炫酷之旅!

如果你有疑问,可以到 GCDN (葡萄城技术社区)获得技术支持:

WijmoJS 专区

GCDNhttp://gcdn.grapecity.com.cn/

官方网站葡萄城官网