Bootstrap Panel Enhancement Plugin with jQuery - LobiPanel

File Size: 911 KB
Views Total: 8410
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Bootstrap Panel Enhancement Plugin with jQuery - LobiPanel

LobiPanel is a jQuery & jQuery UI plugin to create floating or static Bootstrap panels with drag'n'drop, reload, edit, minimize, maximize(fullscreen) and close capabilities.

Basic usage:

1. Load jQuery library and jQuery UI into your Bootstrap project.

<link rel="stylesheet" href="/path/to/jquery-ui.min.css">
<link rel="stylesheet" href="/path/to/bootstrap.min.css">
<link rel="stylesheet" href="/path/to/lobipanel.min.css">

<script src="/path/to/jquery.min.js"></script>
<script src="/path/to/jquery-ui.min.js"></script>
<script src="/path/to/bootstrap.min.js"></script>

2. Download and include the jQuery LobiPanel plugin's script after jQuery library.

<script src="/path/to/lobipanel.min.js"></script>

3. Create a standard Bootstrap panel component on your webpage.

<div class="panel panel-default">
  <div class="panel-heading">
    <h3 class="panel-title">Panel title</h3>
  </div>
  <div class="panel-body">
    Panel content
  </div>
</div>

4. Call the function and we're ready to go.

$(function(){
  $('.panel').lobiPanel();
});

5. Default plugin options.

//Makes <b>unpinned</b> panel draggable
//Warning!!! This requires jquery ui draggable widget to be included
draggable: true,

//Makes <b>pinned</b> panels sortable
//Warning!!! This requires jquery ui sortable widget to be included
sortable: false,

//jquery ui sortable plugin option.
//To avoid any problems this option must be same for all panels which are direct children of their parent
connectWith: '.ui-sortable',

//This parameter accepts string ['both', 'vertical', 'horizontal', 'none']. none means disable resize
resize: 'both',

//Minimum width <b>unpin, resizable</b> panel can have.
minWidth: 200,

//Minimum height <b>unpin, resizable</b> panel can have.
minHeight: 100,

//Maximum width <b>unpin, resizable</b> panel can have.
maxWidth: 1200,

//Maximum height <b>unpin, resizable</b> panel can have.
maxHeight: 700,

//The url which will be used to load content. If not provided reload button will do nothing
loadUrl: "",

//If loadUrl is provided plugin will load content as soon as plugin is initialized
autoload: true,

bodyHeight: 'auto',

//This will enable tooltips on panel controls
tooltips: true,

//Dropdown toggle icon.
toggleIcon: 'glyphicon glyphicon-cog',

//Expand to full screen animation duration
expandAnimation: 100,

//Collapse from full screen animation duration
collapseAnimation: 100,

// Initial state of the panel. Available options: pinned, unpinned, collapsed, minimized, fullscreen
state: 'pinned', 

// Initial index of the panel among its siblings
initialIndex: null, 

// If you set this to true you must specify data-inner-id. Plugin will save (in localStorage) it's states such as
// pinned, unpinned, collapsed, minimized, fullscreen, position among it's siblings
// and apply them when you reload the browser
stateful: false, 

// 'parent', 'document', 'window'
constrain: 'document', 

unpin: {
    icon: 'glyphicon glyphicon-move', //You can user glyphicons if you do not want to use font-awesome
    tooltip: 'Unpin'               //tooltip text, If you want to disable tooltip, set it to false
},

reload: {
    icon: 'glyphicon glyphicon-refresh', //You can user glyphicons if you do not want to use font-awesome
    tooltip: 'Reload'           //tooltip text, If you want to disable tooltip, set it to false
},

minimize: {
    icon: 'glyphicon glyphicon-minus', //icon is shown when panel is not minimized
    icon2: 'glyphicon glyphicon-plus', //icon2 is shown when panel is minimized
    tooltip: 'Minimize'         //tooltip text, If you want to disable tooltip, set it to false
},

expand: {
    icon: 'glyphicon glyphicon-resize-full', //icon is shown when panel is not on full screen
    icon2: 'glyphicon glyphicon-resize-small', //icon2 is shown when pane is on full screen state
    tooltip: 'Fullscreen'       //tooltip text, If you want to disable tooltip, set it to false
},

close: {
    icon: 'glyphicon glyphicon-remove', //You can user glyphicons if you do not want to use font-awesome
    tooltip: 'Close'            //tooltip text, If you want to disable tooltip, set it to false
},

editTitle: {
    icon: 'glyphicon glyphicon-pencil',
    icon2: 'glyphicon glyphicon-floppy-disk',
    tooltip: 'Edit title'
},

// change styles
styles: [
  {
    bg: '#d9534f',
    text: '#FFF'
  },
  {
    bg: '#f0ad4e',
    text: '#FFF'
  },
  {
    bg: '#337ab7',
    text: '#FFF'
  },
  {
    bg: '#5bc0de',
    text: '#FFF'
  },
  {
    bg: '#4753e4',
    text: '#FFF'
  },
  {
    bg: '#9e4aea',
    text: '#FFF'
  }
],

// Events
/**
 * @event beforeTitleChange
 * Fires before title change happens. Returning false will prevent title change from happening.
 * @param {LobiPanel} The <code>LobiPanel</code> instance
 */
beforeTitleChange: null

Change log:

2017-12-30

  • Make style change functional on mobile

2017-12-28

  • Trigger init event from different place

2017-12-20

  • Use given storageObject if exists, else create to save in localStorage
  • Wrap parent sortable initialization into jquery plugin

2017-12-19

  • Create storage interface implement it in localStorage

2017-12-17

  • Fix additional position saving bugs
  • Update parent child-inner-id on child change

2017-12-16

  • Add color change possibility

2016-10-06

  • Added option to attach events on initialization by object eventName: function approach.
  • Implemented to not finish title editing if title is empty

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