TechBlogSD - Alles für WordPress und WEB-Entwicklung
WEB- und WordPress-Anleitungen, Neuigkeiten, Rezensionen zu Themes und Plugins

jQuery Akkordeon-Widget für die Weebly-Site

1

Das jQuery-Akkordeon-Plugin wird kostenlos als Teil des jQuery-Benutzeroberflächenprojekts angeboten. Es gibt viele Variationen und Modifikationen für diese kostenlose Version und hier ist eine solche Version für Ihre Weebly-Site, die auf den Eingaben von Hongkiat.com basiert. Dies ist ein farbenfrohes Widget, bei dem jede Überschrift eine eigene Farbe hat, die über CSS angepasst werden kann.

jQuery Akkordeon-Widget für die Weebly-Site

Das Widget besteht aus drei Teilen – Skript, CSS und HTML.

Skript hinzufügen

Fügen Sie den folgenden Code im Abschnitt " Fußzeilencode " Ihrer Weebly-Seite hinzu:

<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>

Wenn Sie sehen, dass das Akkordeon nicht geladen wird, ersetzen Sie das $ im obigen Skript durch jQuery.

CSS hinzufügen

Fügen Sie das folgende CSS im Abschnitt " Header Code " Ihrer Weebly-Seite hinzu:

<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 hinzufügen

Ziehen Sie nun ein „Embed Code”-Element per Drag & Drop und fügen Sie den folgenden HTML-Code hinzu:

<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>

Hinzufügen zusätzlicher Blöcke zum Akkordeon

Das obige Beispiel enthält fünf Blöcke im Akkordeon. Wenn Sie zusätzliche Blöcke hinzufügen möchten, müssen Sie zusätzliche Codeblöcke für CSS und HTML hinzufügen .

  • Kopieren Sie im CSS-Code den Codeblock zwischen den Kommentaren „Start/End Block for Accordion” und fügen Sie ihn ein, indem Sie „nth-of-child(4)” in „nth-of-child(5)” ändern 5. Block im Akkordeon (direkt über dem letzten Block). Jeder Block hat ein „background-color”-Attribut, das Sie ändern können, um die Kopfzeilenfarbe zu ändern.
  • Ähnlich in HTML fügen Sie einfach den Codeblock zwischen den Kommentaren „Start/Ende des Blocks für Akkordeon” direkt über dem letzten an

    Schild.

Aufnahmequelle: webnots.com
Hinterlasse eine Antwort

Diese Website verwendet Cookies, um Ihre Erfahrung zu verbessern. Wir gehen davon aus, dass Sie damit einverstanden sind, Sie können sich jedoch abmelden, wenn Sie möchten. Annehmen Weiterlesen