Часто задаваемые вопросы по jQuery или виджет Accordion для сайта Weebly

<

div itemprop=”articleBody”>

Плагин jQuery accordion предлагается бесплатно как часть пользовательский интерфейс jQuery проект. Для этой бесплатной версии доступно множество вариаций и модификаций, и вот одна из таких версий для вашего сайта Weebly, основанная на материалах Hongkiat.com. Это красочный виджет, каждый заголовок которого имеет свой цвет, который можно настроить с помощью CSS. Виджет выглядит так, как показано ниже, и вы можете увидеть здесь живую демонстрацию.

Как добавить FAQ по jQuery или виджет Accordion в Weebly?

Виджет состоит из трех частей – скрипта, CSS и HTML.

Добавление скрипта

Добавьте следующий код в раздел «Код нижнего колонтитула» своей страницы Weebly:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.21/jquery-ui.min.js"></script>
<script type="text/javascript">
$(function() {
$( "#accordion" ).accordion({
autoHeight: false,
navigation: true
});
});
</script>
Если вы видите, что аккордеон не загружается, замените $ на jQuery в приведенном выше скрипте.

Добавление CSS

Добавьте приведенный ниже CSS в раздел «Код заголовка» своей страницы Weebly:

<style>
a {
text-decoration: none;
}
:focus, :active {
outline: 0;
}
#accordion {
width: 100%;
}
#accordion .ui-accordion-header {
background-color: #ccc;
margin: 0px;
}
#accordion .ui-accordion-header a {
color: #fff;
line-height: 42px;
display: block;
font-size: 12pt;
width: 100%;
text-indent: 10px;
text-shadow: 1px 1px 0px rgba(0,0,0,0.2);
}
#accordion .ui-accordion-content {
width: 100%;
background-color: #f3f3f3;
color: #777;
font-size: 10pt;
line-height: 16pt;
box-shadow: inset 0px 1px 1px 0px rgba(0, 0, 0, .2), inset 0px -1px 0px 0px rgba(0, 0, 0, .4);
}
#accordion .ui-accordion-content > * {
margin: 0;
padding: 20px;
}
#accordion .ui-accordion-content a {
color: #777;
}
#accordion .ui-accordion-header:first-of-type {
background-color: #fa9300;
}
#accordion .ui-accordion-header:nth-of-type(2) {
background-color: #389abe;
}
#accordion .ui-accordion-header:nth-of-type(3) {
background-color: #f87aa0;
}
/* Start Block for Accordion */
#accordion .ui-accordion-header:nth-of-type(4) {
background-color: #a8b700;
}
/* End Block for Accordion */
/* To add additional blocks, add the above block and use nth-of-type(5) and increase the count */
#accordion .ui-accordion-header:last-of-type {
background-color: #b3bec4;
}
#accordion .ui-accordion-header:first-of-type a {
box-shadow: 0px -1px 0px 0px #b85c0f;
}
#accordion .ui-accordion-content:last-of-type {
box-shadow: inset 0px 1px 1px 0px rgba(0, 0, 0, .2), inset 0px 0 0px 0px rgba(0, 0, 0, .5);
}
</style>

Добавление HTML

Теперь перетащите элемент «Вставить код» и добавьте следующий HTML-код:

<div id="accordion">
<!-- Start of Block for Accordion -->
<h3><a href=#>Heading 1 of Accordion</a></h3>
<div>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.</p>
</div>
<!-- End of Block for Accordion -->
<h3><a href=#>Heading 2 of Accordion</a></h3>
<div>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.</p>
</div>
<h3><a href=#>Heading 3 of Accordion</a></h3>
<div>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.</p>
</div>
<h3><a href=#>Heading 4 of Accordion</a></h3>
<div>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.</p>
</div>
<h3><a href=#>Heading 5 of Accordion</a></h3>
<div>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.</p>
</div>
</div>

Добавление дополнительных блоков в аккордеон

Приведенный выше пример содержит пять блоков в аккордеоне. Если вы хотите добавить дополнительные блоки, вам необходимо добавить дополнительные блоки кода для CSS и HTML.

  • В коде CSS скопируйте блок кода между комментариями «Начальный / конечный блок для аккордеона» и вставьте, изменив «nth-of-child (4)» на «nth-of-child (5)», который будет 5-й блок в гармошке (чуть выше последнего блока). Каждый блок имеет атрибут «цвет фона», который вы можете изменить, чтобы изменить цвет заголовка.
  • Точно так же в HTML просто добавьте блок кода между комментариями «Начало / конец блока для аккордеона» чуть выше последнего тега .
    </div>

Похожие записи

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *