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

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

5

Плагін акордеона jQuery безкоштовно пропонується як частина проекту інтерфейсу користувача 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 -й блок у акордеоні (трохи вище останнього блоку). Кожен блок має атрибут "background-color", який можна змінити, щоб змінити колір заголовка.
  • Так само в HTML просто додайте блок коду між коментарями "Початок/Кінець блоку для акордеона" трохи вище останнього

    тег.

Джерело запису: webnots.com
Залиште відповідь

Цей веб -сайт використовує файли cookie, щоб покращити ваш досвід. Ми припустимо, що з цим все гаразд, але ви можете відмовитися, якщо захочете. Прийняти Читати далі