jQuery Slidebar.js插件

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.包括Slidebar.js CDNs（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，让我们转到原始代码。

示例:

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

输出:

在点击按钮之前：

jQuery Slidebar.js插件