jQuery Slidebar.js 插件

JQuery是一个小巧、快速、丰富的 JavaScript 库，它是 JavaScript 的优化版本。它为我们提供了一个简单的 API，有助于 HTML 文档遍历和操作、事件处理、动画和 Ajax。 jQuery 为我们提供了多种可以在网站上实现的插件，其中之一就是Slidebar.js。

Slidebar.js： 它是一个 jQuery 插件，可帮助我们创建带有动画的滑动条。它有助于在我们的网站中实现移动应用程序风格的显示菜单和侧边栏。

可以创建四种类型的滑动条：

1. 左滑条
2. 右侧滑动条
3. 顶部滑动条
4. 底部滑动条

在本文中，我们将学习如何在我们的网站上实现左侧边栏。但在此之前，我们需要添加一些 CDN 才能使滑动条正常工作。

1. 包含 jQuery CDN

2. 包含 Slidebar.js CDNs（JS 和 CSS）

现在，我们已经包含了所有必要的 CDN，让我们转到原始代码。

例子：

HTML

  

    Slidebar Demo
    
    
    
      
    
    

  

    
  
        
        Slidebar Demo
          
        
        
            Left Slide Button
        
    
  
    
        
            
                Computer Science
                Electronics 
                IT
            
        
    
  
    
        (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);
    

  

输出：

点击按钮前：

点击按钮后：