TechBlogSD - Все для WordPress и WEB разработки
WEB и WordPress инструкции, новости, обзоры тем и плагинов

Виджет jQuery Accordion для сайта Weebly

41

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

Виджет jQuery Accordion для сайта Weebly

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

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

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

<script type="text/javascript" data-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 просто добавьте блок кода между комментариями «Начало / конец блока для аккордеона» чуть выше последнего

    ярлык.

Источник записи: www.webnots.com
Leave A Reply

Этот веб-сайт использует файлы cookie для улучшения вашего опыта. Мы предполагаем, что вы согласны с этим, но вы можете отказаться, если хотите. Принимаю Подробнее