同一网页内容中的多个选项卡视图 - LIFERAY - YUI 库

Question

我想在 Liferay 的同一网页内容中包含 2 个标签视图（2 个单独的标签组）。

我不知道是否可以将 YUI().use('aui-tabview'...) 实例化两次或者我该怎么做。

只有一个实例，我的代码运行。

这是 YUI 库 (aui-tabview) 的实例代码：

YUI().use(
   'aui-tabview',
   function(Y) {
     new Y.TabView(
        {
       srcNode: '#tabsPubs',
          type: 'pills'
        }
     ).render();
   }
);

YUI().use(
   'aui-tabview',
   function(Y) {
     new Y.TabView(
        {
       srcNode: '#tabsTesis',
          type: 'pills'
        }
     ).render();
   }
);

提前致谢

Answer 1

请检查这个link https://alloyui.com/examples/tabview/pills

您可以创建 2 个标签视图。以下代码对我来说工作正常：

<div id="myTab"></div>

<div id="myTab1"></div>

<script>

YUI().use(
          'aui-tabview',
          function(Y) {
            new Y.TabView(
              {
                children: [
                  {
                      content: '<br><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus dicta aspernatur beatae fuga neque cupiditate laudantium itaque pariatur deleniti tenetur modi voluptatem animi sunt eligendi nisi corporis expedita quaerat facilis.</p>',
                      label: 'Tab #1'
                  },
                  {
                      content: '<br><p>Doloremque beatae rem voluptate nulla perspiciatis atque laudantium nihil impedit molestiae fuga veritatis quibusdam nam maiores aliquid. Deserunt dolorum quas temporibus enim ex nihil nemo perspiciatis. Nisi deserunt rem id pariatur in nostrum?</p>',
                      label: 'Tab #2'
                  },
                  {
                      content: '<br><p>Aliquid ipsum asperiores alias temporibus autem impedit soluta ut id iure explicabo veritatis consectetur debitis eaque recusandae odit quas nobis maxime saepe. Incidunt amet obcaecati. Ducimus soluta unde repellat laboriosam fuga modi rem itaque!</p>',
                      label: 'Tab #3'
                  }
               ],
               srcNode: '#myTab',
               type: 'pills'
              }
            ).render();
          }
        );



YUI().use(
          'aui-tabview',
          function(Y) {
            new Y.TabView(
              {
                children: [
                  {
                      content: '<br><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus dicta aspernatur beatae fuga neque cupiditate laudantium itaque pariatur deleniti tenetur modi voluptatem animi sunt eligendi nisi corporis expedita quaerat facilis.</p>',
                      label: 'Tab #1'
                  },
                  {
                      content: '<br><p>Doloremque beatae rem voluptate nulla perspiciatis atque laudantium nihil impedit molestiae fuga veritatis quibusdam nam maiores aliquid. Deserunt dolorum quas temporibus enim ex nihil nemo perspiciatis. Nisi deserunt rem id pariatur in nostrum?</p>',
                      label: 'Tab #2'
                  },
                  {
                      content: '<br><p>Aliquid ipsum asperiores alias temporibus autem impedit soluta ut id iure explicabo veritatis consectetur debitis eaque recusandae odit quas nobis maxime saepe. Incidunt amet obcaecati. Ducimus soluta unde repellat laboriosam fuga modi rem itaque!</p>',
                      label: 'Tab #3'
                  }
               ],
               srcNode: '#myTab1',
               type: 'pills'
              }
            ).render();
          }
        );
</script>

同一网页内容中的多个选项卡视图 - LIFERAY - YUI 库

Multiple tabview in same webcontent - LIFERAY - YUI library

javascript

yui

liferay

tabview