使用GridTab构建响应式选项卡式小部件

部件"/>

使用GridTab构建响应式选项卡式小部件

使用开源工具构建网站总是比重新发明轮子更容易。 这些工具的范围从库到较小的插件，但是您可以找到基本解决方案。

惊人的jQuery GridTab插件是一个很好的例子。 它允许您设置自定义网格 ， 定义断点并创建适合任何网站的响应式选项卡式小部件 。

您可以添加自己CSS类或使用现有CSS类来创建适合您的设计的选项卡功能。 该插件还支持下一个/上一个控件的导航元素以及在选项卡之间切换 。

安装轻而易举，只需要jQuery库作为依赖项即可 。 安装完成后，您可以从npm获取GridTab或直接从GitHub下载它。

请记住，此选项卡式小部件插件具有默认样式 ，因此在JS插件文件的顶部确实有单独CSS样式表 。 但是，您始终可以将此CSS合并到自己CSS中以减少HTTP请求。

要初始化插件，您只需传递总网格大小以及任何可选参数 （全部列在GitHub上）。

这是一个简单的初始化脚本 ：

$(document).ready(function() {$('#gridtab-1').gridtab({grid:3});
});

设置包括自定义选择器 ， 响应样式 ， 边框/填充/颜色设置 ，当然还有回调函数 。

您可能想知道所有这些如何工作以及在浏览器中的外观。 请查看“演示”部分，以查看一些示例 ，包括可以复制的原始源代码 。

大多数人将选项卡视为小型配置文件小部件的功能。 但是， 投资组合网站也可以使用带有选项卡式功能的网格，并且GridTab插件是确定这种效果的最佳资源。

您需要了解的所有信息，包括完整的文档 ，都可以在GridTab主页上找到。 它还包括指向GitHub存储库的链接，因此您可以浏览源代码并开始自定义自己的响应式选项卡式网格。

翻译自: /