wtorek, 16 sierpnia, 2022
Strona głównaJQueryResponsly.js - Responsywny zestaw widżetów

Responsly.js – Responsywny zestaw widżetów

Responsly.js to zestaw prostych widżetów sideshow i akordeon...

-

- Reklama -

Responsly.js to zestaw prostych widżetów (sideshow i akordeon), napisanych przy użyciu CSS3 i udostępnione jako wtyczka JQuery. Plugin jest dość prosty w budowie, zarazem jeden jak i drugi. W łatwy sposób można go dostosować stylując HTML.

Meta:

Oficjalna strona: Wejdź na stronę internetową

Repozytorium: GitHub Responsly.js

Rozmiar repozytorium: 214 KB

NPM: Brak

Licencja: MIT

Pobierz: X-plugin Responsly.js

– Reklama –

 

– Reklama –

Funkcje:

  • Wtyczki działają responsywnie, na (Duży monitor, Laptop, Tablet, Telefon).
  • Stylizacja wtyczki oparta o CSS.
  • Przejścia oparte o CSS (w miarę możliwości przyśpieszone przez JQuery).
  • Animacje działają na wszystkich przeglądarka, również na IE.
  • Prosta i lekka konstrukcja, rozdzielona na poszczególne widżety, wiec używasz tylko tego co chcesz.
  • Można widżety dostosować edytując CSS.

Slajder:

  • Pokaż/Ukryj przyciski nawigacji.
  • Nawigacja z klawiatury.
  • Auto start slajdów i możliwość ustawienia czasu przejścia.
  • Możliwość użycia wtyczki jQuery throttle

Użycie:

Upewnij się że biblioteka JQuery jest zainstalowana.

  • Dodaj referencje.
<link rel="stylesheet" href="slidy.css">
<script src="slidy.js"></script>
– Reklama –
  • Dodaj ten kod HTML do swojej strony w dowolnym miejscu, tam gdzie chcesz wyświetlać pokazy slaidów. Najlepiej wybrać responsywny kontener.

<div id="slidyBanner" class="slidyContainer" title="Your tooltip text">
        <div class="slidySlides">

            <!-- Each slide is wrapped in figure section -->

            <!-- Slide 1 -->
            <!-- add the 'slidyCurrent' class to which slide you want as default -->
            <figure class="slidyCurrent">
                <!-- Your context goes here -->
                <img  alt="Uyuni, Bolivia" src="img/banner/16 Uyuni Salt Flats - 61 - Banner.jpg">
                <!-- Use the figcaption element to add captions -->
                <figcaption>An Image</figcaption>
            </figure>

            <!-- Slide 2 -->
            <figure>
                <img  alt="Shanghai, China"  src="img/banner/2 Shanghai - 38 - Banner.jpg">
                <figcaption>Another image</figcaption>
            </figure>

            <!-- Slide 3 -->
            <figure>
                <p> I am some text</p>
                <p> Your not limited to images, you can have what ever you want </p>
                <figcaption>Text</figcaption>
            </figure>

            <!-- Add more slides as necessary -->

        </div>
</div>

– Reklama –
  • I na koniec dodaj opcje i kod JQuery uruchamiający dodany wcześniej szablon HTML.
<script>
    $('.slidyContainer').slidy({
        // Są to wartości domyślne, więc nie trzeba ich tylko określać, jeśli zostaną zmienione

        throttle: false, // Ustaw na true i dołącz wtyczkę jQuery throttle (http://benalman.com/projects/jquery-throttle-debounce-plugin/)
        throttleTime: 500, // Liczba ms oczekiwania na throttling
        showArrows: true, // Pokaż strzałki dla następnego/poprzedniego obrazu
        movePrev: 'movePrev', // Identyfikator diva używany dla przycisku cofania
        moveNext: 'moveNext', // Identyfikator diva używany dla przycisku dalej
        useKeybord: true, // Użyj klawiszy rozwinąć/ zwinąć sekcje
        auto: false,       // Start automat ustaw na true 
        interval: 6000,     // Czas między każdym slajdem
        initialInterval: 10000  // Początkowy interwał ładowania strony

    });
</script>
  • Przykład w codesandbox.io.

Akordeon:

  • Nawigacja za pomocą klawiatury.
  • Możliwość użycia wtyczki jQuery throttle.

Użycie:

Upewnij się że biblioteka JQuery jest zainstalowana.

  • Dodaj referencje.
<link rel="stylesheet" href="accordly.css">
<script src="accordly.js"></script>
– Reklama –
  • Dodaj ten kod HTML do swojej strony w dowolnym miejscu, tam gdzie chcesz wyświetlać pokazy akordeon. Najlepiej wybrać responsywny kontener
    <div class="accordion">
        <!-- Section 1 -->
        <section>
            <hgroup>
                <h4>Section 1 title</h4>
            </hgroup>
            <article>
                <h2> Put your content here </h2>
            </article>
        </section>

        <!-- Section 2 -->
        <section>
            <hgroup>
                <h4>Section 2 title</h4>
            </hgroup>
            <article>
                <h2> This is more context and can contain anything</h2>
            </article>
        </section>

        <!-- Add more sections as needed -->

    </div>
– Reklama –
  • I na koniec dodaj opcje i kod jQuery uruchamiający dodany wcześniej szablon HTML.
$('.accordion').accordy({
        throttle: false, // Ustaw na true i dołącz wtyczkę jQuery throttle (http://benalman.com/projects/jquery-throttle-debounce-plugin/)
        throttleTime: 500, // Liczba ms oczekiwania na throttling
        useKeybord: true, // Użyj klawiszy rozwinąć/ zwinąć sekcje
        keyPressUp: 75, //Klawisz K
        keyPressDown: 74 //Klawisz J
    });
  • Przykład w codesandbox.io.

Na koniec linki do repozytoriów z przykładów:

Myślę że te przykłady wyjaśnią wszystkie wątpliwości z uruchomianiem pluginu.

Pozdrawiam… 🙂

– Reklama –
- Reklama -
- Reklama -

1 KOMENTARZ

Zostaw swój komentarz na ten temat:

- Reklama -

MUSISZ TO PRZECZYTAĆ

- Reklama -
- Reklama -
%d bloggers like this: