同一webcontent中的多个tabview - LIFERAY - YUI库

时间:2018-01-11 17:03:06

标签: javascript liferay yui tabview

我想在Liferay中的同一个webcontent中包含2个tabview(2个单独的标签组)。

我不知道是否可以将YUI()实例两次。使用(' 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();
  	}
);




提前致谢

1 个答案:

答案 0 :(得分:0)

请检查此链接 https://alloyui.com/examples/tabview/pills

您可以创建2个Tabview。以下代码对我来说很好:

<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>