Плагин jQuery Slidebar.js

Опубликовано: 30 Ноября, 2021

JQuery - это небольшая, быстрая и многофункциональная библиотека JavaScript, которая является оптимизированной версией JavaScript. Он предоставляет нам простой API, который помогает в обходе HTML-документа и манипулировании им, обработке событий, анимации и Ajax. jQuery предоставляет нам множество плагинов, которые могут быть реализованы на веб-сайте, одним из которых является Slidebar.js.

Slidebar.js: Это плагин jQuery, который помогает нам создавать ползунок вместе с анимацией. Это помогает реализовать на нашем веб-сайте открывающие меню и боковые панели в стиле мобильных приложений.

Можно создать четыре типа ползунков:

Левая ползунковая панель
Правая ползунковая панель
Верхняя панель слайдов
Нижняя ползунковая панель

В этой статье мы узнаем, как реализовать левую боковую панель на нашем веб-сайте. Но перед этим нам нужно добавить несколько CDN, чтобы ползунок работал.

1. Включите jQuery CDN.

<script src=”https://code.jquery.com/jquery-3.5.1.min.js” type=”text/javascript”></script>

2. Включите CDN Slidebar.js (JS и CSS).

<script src=”https://cdnjs.cloudflare.com/ajax/libs/slidebars/2.0.2/slidebars.min.js” type=”text/javascript”></script>
<link rel=”stylesheet” href=”https://cdnjs.cloudflare.com/ajax/libs/slidebars/2.0.2/slidebars.min.css”>

Теперь, когда мы включили все необходимые CDN, перейдем к исходному коду.

Пример:

HTML

 <!DOCTYPE html>
 < html >
 
< head >
    < title >Slidebar Demo</ title >
    < link rel = "stylesheet" href =
 " https://cdnjs.cloudflare.com/ajax/libs/slidebars/2.0.2/slidebars.min.css " >
    < script src =
        " https://code.jquery.com/jquery-3.5.1.min.js "
        type = "text/javascript" >
    </ script >
     
    < script src =
 " https://cdnjs.cloudflare.com/ajax/libs/slidebars/2.0.2/slidebars.min.js "
        type = "text/javascript" >
    </ script >
 </ head >
 
< body >
    < div canvas = "container" class = "slidebar-button" >
 
        <!-- Creating a heading -->
        < h2 >Slidebar Demo</ h2 >
         
        <!-- Creating a button, clicking on
            which the left slidebar will open -->
        < button class = "js-toggle-left" >
            Left Slide Button
        </ button >
    </ div >
 
    < div class = "slidebar-content" >
        < div off-canvas = "left-slidebar left reveal" >
            < ol >
                < li >Computer Science</ li >< br >
                < li >Electronics </ li >< br >
                < li >IT</ li >< br >
            </ ol >
        </ div >
    </ div >
 
    < script >
        (function ($) {
            "use strict";
 
            // Creating an instance of Slidebars
            var controller = new slidebars();
 
            // Initialize Slidebars
            controller.init();
 
            // left Slidebar controls
            $('.js-toggle-left').on('click', function (event) {
                event.stopPropagation();
                controller.toggle('left-slidebar');
            });
            $(controller.events).on('opened', function () {
                $('[canvas="container"]')
                    .addClass('js-close-any-slidebar');
            });
            $(controller.events).on('closed', function () {
                $('[canvas="container"]')
                    .removeClass('js-close-any-slidebar');
            });
            $('body').on('click', '.js-close-any-slidebar',
            function (event) {
                event.stopPropagation();
                controller.close();
            });
        })(jQuery);
    </ script >
 </ body >
 
</ html > 

Выход:

Перед нажатием кнопки:

После нажатия кнопки:

Technical Scripter JQuery Picked

Плагин jQuery Slidebar.js

HTML

РЕКОМЕНДУЕМЫЕ СТАТЬИ