Несколько вкладок в одном и том же веб-контенте - LIFERAY - библиотека YUI

Я хочу включить 2 вида вкладок (2 отдельные группы вкладок) в один и тот же веб-контент в Liferay.

Я не знаю, можно ли дважды использовать 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();
  	}
);

заранее спасибо


person imagonbar    schedule 11.01.2018    source источник


Ответы (1)


Пожалуйста, проверьте эту ссылку 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>
person Ashish Singh    schedule 12.01.2018
comment
Спасибо за Ваш ответ. Я решил это. У меня был смешанный код HTML и Velocity (.vm), и я прокомментировал следующие строки ‹!-- #if ($validator.isNotNull($variable.getData())) --› ‹div›‹/div› ‹! -- #end --› Я удалил эти строки кода, и все работает нормально. Еще раз спасибо!! - person imagonbar; 12.01.2018