阿西河

所有教程

公众号
🌙
阿西河前端的公众号

我的收藏

    最近访问  (文章)

      教程列表

      抓包专区
      测试专区

      插件 jQuery.sidebar 中文API文档

      插件 jQuery.sidebar 中文API文档 https://github.com/jillix/jquery-sidebar

      jquery-sidebar

      A stupid simple sidebar jQuery plugin.

      jquery-sidebar

      Available on CDN! :ship:

      jQuery-Sidebar is available on CDNJS and you can use it like this:

      <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-sidebar/3.3.2/jquery.sidebar.min.js"></script>
      

      Usage

      This library depends on:

      Include the script file in your HTML page:

      ...
      <!-- Include jQuery -->
      <script src="path/to/jquery.min.js"></script>
      <!-- Include jQuery Sidebar -->
      <script src="path/to/jquery.sidebar.min.js"></script>
      <!-- Or from CDNJS:
      <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-sidebar/3.3.2/jquery.sidebar.min.js"></script>
      -->
      ...
      <div class="sidebar left">Hello World</div>
      <div class="sidebar right">I am on right!</div>
      <div class="sidebar top">I am on top!</div>
      <div class="sidebar bottom">I am on bottom!</div>
      ...
      <script>
          // Sidebar on left (default)
          $(".sidebar.left").sidebar().trigger("sidebar:open");
      
          // Sidebar on right side
          $(".sidebar.right").sidebar({side: "right"});
      
          // Sidebar on top side
          $(".sidebar.top").sidebar({side: "top"});
      
          // Sidebar on bottom side
          $(".sidebar.bottom").sidebar({side: "bottom"});
      </script>
      ...
      

      Also, please note that you must write your own CSS code for the sidebars. You can find a CSS code example here.

      Documentation

      sidebar(options)

      Initialize sidebar on selected elements.

      $(".my-sidebar").sidebar({...});
      

      After the call above, you can programatically open/close/toggle the sidebar using:

      $(".my-sidebar").trigger("sidebar:open");
      $(".my-sidebar").trigger("sidebar:close");
      $(".my-sidebar").trigger("sidebar:toggle");
      $(".my-sidebar").trigger("sidebar:close", [{ speed: 0 }]);
      

      After the sidebar is opened/closed, sidebar:opened/sidebar:closed event is emitted.

      $(".my-sidebar").on("sidebar:opened", function () {
         // Do something on open
      });
      
      $(".my-sidebar").on("sidebar:closed", function () {
         // Do something on close
      });
      

      Params

      • Object options: An object that will be merged with the default options.
      • speed (Number): animation speed (default: 200)
      • side (String): left|right|top|bottom (default: "left")
      • isClosed (Boolean): A boolean value indicating if the sidebar is closed or not (default: false).
      • close (Boolean): If true, the sidebar will be closed by default.

      Return

      • jQuery The jQuery elements that were selected.

      Changelog

      To see the versions and the changes between them go to releases page.

      How to contribute

      Have an idea? Found a bug? See how to contribute.

      License

      See the LICENSE file.

      目录
      目录