jQuery Plugin To Create Sliding Drawer Panels - cabinet

cabinet is a jQuery sidebar plugin used to create fixed & tabbed drawer panels that you can slide out/down/up them via mouse click/drag.

How to use it:

1. Include jQuery library and the jQuery cabinet plugin in the Html page.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="jquery.cabinet.js"></script>

2. Include the cabinet.css for basic styles.

<link rel="stylesheet" href="cabinet.css">

3. Create the Html for a tabbed drawer panel that stick to the left side of your screen.

<div class="cabinet-left">
  <div class="cabinet-drawer">
    <div class="cabinet-knob">
      <p>Tab 1</p>
    </div>
    <div class="cabinet-box">
      <h3>Title 1</h3>
      <p>Content 1</p>
    </div>
  </div>
  <div class="cabinet-drawer">
    <div class="cabinet-knob">
      <p>Tab 2</p>
    </div>
    <div class="cabinet-box">
      <h3>Title 2</h3>
      <p>Content 2</p>
    </div>
  </div>
</div>

4. Initialize the plugin as follow.

$(function() {
  var backup_params;
  var options = {
    onMouseDown: function(){
      var $this = $(this);
      backup_params = {
        'transition-duration': $this.css('transition-duration')
      };
      var params = {
        'transition-duration': '0'
      };
      $this.css(params);
    }
    ,onMouseUp: function(){
      var $this = $(this);
      $this.css(backup_params);
    }
  };

  $('.cabinet-left').cabinet($.extend({
    width: 300
    ,mode: 'position'
  }, options));

});

Change log:

2015-10-02

• v1.6.1

2015-09-20

• bugfix

2015-05-06

• Fixed closeWidth, closeHeight bugs.

---

This awesome jQuery plugin is developed by fintopo. For more Advanced Usages, please check the demo page or visit the official website.