TechBlogSD - Allt för WordPress- och WEB -utveckling
WEB- och WordPress - instruktioner, nyheter, recensioner av teman och plugins

jQuery dragspel -widget för Weebly -webbplats

10

JQuery dragspel -plugin erbjuds gratis som en del av jQuery -användargränssnittsprojektet. Det finns många variationer och modifieringar tillgängliga för denna gratisversion och här är en sådan version för din Weebly -webbplats baserad på ingångar från Hongkiat.com. Detta är en färgstark widget med varje rubrik har sin egen färg som kan anpassas via CSS.

jQuery dragspel -widget för Weebly -webbplats

Det finns tre delar för widgeten – skript, CSS och HTML.

Lägger till manus

Lägg till följande kod under avsnittet " Footer Code " på din Weebly -sida:

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

Om du ser att dragspelet inte laddas, ersätt $ med jQuery i ovanstående skript.

Lägger till CSS

Lägg till nedanstående CSS under avsnittet " Rubrikkod " på din Weebly -sida:

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

Lägger till HTML

Dra och släpp nu ett "Bädda in kod" -element och lägg till följande HTML -kod:

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

Lägga till ytterligare block i dragspelet

Ovanstående exempel innehåller fem block i dragspelet. Om du vill lägga till ytterligare block måste du lägga till ytterligare kodblock för CSS och HTML.

  • I CSS-koden, kopiera kodblocket mellan kommentarerna "Start/slutblock för dragspel" och klistra in genom att ändra "n-av-barnet (4)" till "nth-of-child (5)" som kommer att vara 5: e blocket på dragspelet (strax ovanför det sista blocket). Varje block har ett "bakgrundsfärg" -attribut som du kan ändra för att ändra rubrikens färg.
  • På samma sätt i HTML, lägg bara till kodblocket mellan kommentarerna "Start/slut på block för dragspel" strax ovanför det sista

    märka.

Inspelningskälla: www.webnots.com

Denna webbplats använder cookies för att förbättra din upplevelse. Vi antar att du är ok med detta, men du kan välja bort det om du vill. Jag accepterar Fler detaljer