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