学习VUE.js的JQWidgets:Vue的选项卡一种灵活的组织内容的方法

VUE.js是渐进式JavaScript框架,用于开发单页应用程序(SAP)。 它是一个功能强大的基于Web的UI框架,从头开始设计以逐渐采用。 使用VUE.js框架非常容易。 本文重点介绍为Vue构建的JQWidget Tab组件。

使用标签可以轻松浏览,在不同视图之间切换以及启用高级别的内容组织,例如不同的数据集或应用程序的功能方面。

Vue的Tabs组件非常灵活,主要用于流体尺寸设计。 它启用了关闭按钮,并且选项卡上的图像支持键盘导航和从右到左的布局。 可以添加选项卡旁边的附加按钮,还有一个reorder属性,该属性允许拖放不同的选项卡。 当可用空间不足以显示所有选项卡时,选项卡的滚动对于大数据非常有用。

先决条件:

Node.js —要验证是否已安装它,请在cmd中运行命令node -v。 它将输出当前版本。

第1步-创建文件夹结构:

我们有一个基本根文件夹,其中包含公共 src文件夹和package.json文件。 公用文件夹具有用于基础的“ index.html”页面。 内容是一个

,将用于呈现未来的Vue.js解决方案。 此外,针对该项目的目的可以有其他参考。

第2步-配置和安装:

您可以从下面的源代码中获取package.json文件的配置。 包括所有需要的模块。

Vue的选项卡组件的功能:

1) 选项卡与其他小部件的集成:

选项卡可以与其他JQWidget(例如图表,表格等)集成。它有助于在选项卡列表中定义选项卡的内容。 此处演示了与其他小部件功能的集成。

2) 带有向导的标签

向导是逐步的过程,它使用户可以按规定的顺序输入信息,并且后续步骤可能取决于先前输入的信息。 选项卡可用于显示向导。 选项卡中不同类型的向导的演示在此处显示。

3) 带有图像的标签:

标签可以与图像集成在一起,这是在网页中添加图像的绝佳方法。 这些图像的适当样式将使网页设计更具吸引力。 此功能的演示在此处显示。

4) 标签内的地图:

JQWidget选项卡也得到了增强,可以显示地图。 我们在标签中需要googleapis,在Index.js文件的标签中需要mapinsidetab.bundle.js文件。 这些在下面描述。 此功能的演示在此处显示。

用于Vue的JQWidget选项卡具有用户友好的功能,如关闭选项卡,折叠选项卡拖放事件以重新排序/重新排列选项卡顺序, 使用cookie重新加载页面时保存选项卡选择,滚动和键盘导航来更改选项卡等。这些功能值得用户友好的UI使用。

有关更多信息,请访问我们的网站。