Компонент Sightly Accordion CQ5

Question

Привет, я пытаюсь создать компонент аккордеона, используя зрелище в AEM, где вместо jsp мы записываем html-код вместе с другим файлом для css и js под клиентскими библиотеками.

Я просто закодировал нижеследующую письменную часть и написал js для того же, но не смог увидеть никаких изменений ... Может кто-то, пожалуйста, предоставит мне решение для реализации того же самого .. -> когда я нажимаю на show parsys раздел открывается и когда шоу конвертируется, чтобы скрыть, и когда я нажимаю на скрытие, секция parsys закрывается и скрывает конверты для показа.

<div data-sly-use.clientLib="${'/libs/granite/sightly/templates/clientlib.html'}" data-sly-unwrap> 
<css data-sly-call="${clientLib.css @ categories=['sd-singtel.accordion_2']}" data-sly-unwrap/> 
<js data-sly-call="${clientLib.js @ categories=['sd-singtel.accordion_2']}" data-sly-unwrap/> 
</div> 
<div data-sly-test="${wcmmode.edit}">Accordion_2 component</div> 
<div class="about-contentcontainer"> 
<div class="about-content"> 
<div class="awards"> 
<h4> <a href="javascript:void(0);"><span class="more">Show</span></a></h4> 
<h4> <a href="javascript:void(0);"><span class="more expanded">Hide</span></a></h4> 
</div> 
</div> 
</div> 

<script>// <![CDATA[ 
    $(document).ready(function() { 

     alert("Hello"); 
     $(".awards h4 a").click(function() { 

    enter code here 
      $(this).parent().next().slideToggle("slow"); 
      var htmlStr = $(this).find(".more").html(); 
      if (htmlStr == "Show") { 
       $(this).find(".more").html("Hide"); 
       $(this).find(".more").addClass("expanded"); 
      } else { 
       $(this).find(".more").html("Show"); 
       $(this).find(".more").removeClass("expanded"); 
      } 
     }); 
    }); 
// ]]></script> 

Answer 1

Рассматривая это, я думаю, что это имеет мало общего с Sightly или даже с AEM. Кроме того, я не уверен, какой контент вы хотите переключить.

Ниже это рабочий HTML-фрагмент для переключая содержания (независимо от AEM):

<style> 
    .toggle-content { 
     display: block; 
    } 
    .toggle-content-hide, 
    .toggle-content-hidden .toggle-content-show { 
     display: inline; 
    } 
    .toggle-content-show, 
    .toggle-content-hidden .toggle-content-hide { 
     display: none; 
    } 
</style> 

<a href="#" class="toggle-content"> 
    <span class="toggle-content-show">Show</span> 
    <span class="toggle-content-hide">Hide</span> 
</a> 
<div>Sample content 1</div> 

<a href="#" class="toggle-content"> 
    <span class="toggle-content-show">Show</span> 
    <span class="toggle-content-hide">Hide</span> 
</a> 
<div>Sample content 2</div> 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> 
<script> 
jQuery(function($) { 
    $('.toggle-content').click(function() { 
     $(this).toggleClass('toggle-content-hidden').next().toggle('slow'); 
     return false; 
    }) 
}); 
</script> 

Чтобы реализовать это в AEM, вы должны поместить встроенный CSS в CSS файл библиотеки клиента, и встроенный JS в JS-файл клиентской библиотеки. Обычно я рекомендую поместить их в одну и ту же клиентскую библиотеку внутри самого компонента, так что все, что относится к этому компоненту, находится в одной и той же папке. Но при этом важно иметь в виду, что на сервере публикации все запросы/приложения запрещены диспетчером по соображениям безопасности, поэтому все клиентские библиотеки, расположенные в/приложениях, должны быть объединены и минимизированы как один файл, который обычно расположенный где-то под/etc. Для этого вы можете использовать следующий репозиторий структуры узла:

• /apps/
  • mysite/
    • components/
      • mycomponent/
        • mycomponent.html красивый шаблон
        • clientlib/
jcr:primaryType = cq:ClientLibraryFolder
categories = [mysite.mycomponent]
          • css.txt содержит только ссылку на style.css
          • style.css содержит фрагмент кода в стиле
          • js.txt содержит только ссылку на скрипт.CSS
          • script.js содержит сценарий фрагмент
• /etc/
  • designs/
    • mysite/
      • clientlib/
jcr:primaryType = cq:ClientLibraryFolder
categories = [mysite.publish]
embed = [mysite.mycomponent, ...]
dependencies = [mysite.jquery]

Свойство/etc clientlib сделает его объединенным и объединяет в пределах того же файла все клиентские листы, которые перечислены там. В отличие от клиентских библиотек, перечисленных под свойством dependencies, которые не будут объединены и будут обслуживаться как отдельный файл. Вы можете играть с этими свойствами, чтобы построить структуру, необходимую для оптимизации вашего сайта. Существуют также настройки для автоматического минимизации или отсутствия этих файлов.

На странице вы затем включаете главный клиентский сервер mysite.publish, расположенный под номером /etc. Так что ваша страница <head> элемент будет содержать что-то вроде следующего шаблона красивого:

<head data-sly-use.clientLib="/libs/granite/sightly/templates/clientlib.html"> 
    <sly data-sly-call="${clientLib.all @ categories='sd-singtel.accordion_2'}" data-sly-unwrap/> 
</head> 

Если вы используете AEM 6.1, вы можете даже отказаться от data-sly-unwrap, потому что <sly> тега имеет тот же эффект.

После этого красивый шаблона компонента, расположенного под путем, как /apps/mysite/components/mycomponent/mycomponent.html будет выглядеть следующим образом:

<div data-sly-test="${wcmmode.edit}">mycomponent name</div> 
<a href="#" class="toggle-content"> 
    <span class="toggle-content-show">Show</span> 
    <span class="toggle-content-hide">Hide</span> 
</a> 
<div>${properties.myContentProperty}</div>