lobipanel icon indicating copy to clipboard operation
lobipanel copied to clipboard

verified publisher icon thecodeholic
→

Metadata

jQuery plugin for bootstrap panels. It extends panels with several common and useful functions.

LobiPanel

CDNJS

jQuery plugin for bootstrap panels. It extends panels with several common and useful functions.

View Demo

Features

  • Sort, drag, expand, resize, minimize bootstrap panels
  • Specify url and load content in panel from this url
  • Change the name of the panel
  • Customize action icons and action tooltips
  • Works for nested panels
  • HTML5 localStorage support
    • Save panel state: (pinned, unpinned, collapsed, fullscreen, minimized) and apply it on page load
    • Save panel position among siblings and apply on next time

Installation and dependecies

LobiPanel is depended on jQuery, jQuery ui and bootstrap.

1. Include necessary css/js files

<!DOCTYPE html>
<html>
   <head>
        <!--Default installation-->
        <link rel="stylesheet" href="lib/jquery-ui.min.css"/>
        <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css"/>
        <link rel="stylesheet" href="lib/font-awesome/css/font-awesome.min.css"/>

        <!--Installation using bower. Preferred!!! -->
        <!--<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.min.css"/>-->
        <!--<link rel="stylesheet" href="bower_components/jquery-ui/themes/ui-lightness/jquery-ui.min.css"/>-->
        <!--Run `bower install font-awesome` and uncomment this line to see font awesome examples-->
        <!--<link rel="stylesheet" href="bower_components/font-awesome/css/font-awesome.min.css"/>-->

        <link rel="stylesheet" href="dist/css/lobipanel.min.css"/>
   </head>

    <body>
        ...
        <!--Default installation-->
        <script src="lib/jquery.1.11.min.js"></script>
        <script src="lib/jquery-ui.min.js"></script>
        <script src="lib/jquery.ui.touch-punch.min.js"></script>
        <script src="bootstrap/js/bootstrap.min.js"></script>

        <!--Installation using bower. Preferred!!! -->
        <!--<script src="bower_components/jquery/dist/jquery.min.js"></script>-->
        <!--<script src="bower_components/jquery-ui/jquery-ui.min.js"></script>-->
        <!--<script src="bower_components/jquery-ui-touch-punch-improved/jquery.ui.touch-punch-improved.js"></script>-->
        <!--<script src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script>-->

        <script src="dist/js/lobipanel.js"></script>

   </body>
</html>

2. Initialize plugin and use it

Stateful panels

In order stateful panels to works you need to:

  • Give stateful: true to panel options.
  • Give data-inner-id to lobipanel element and parent element to keep track of the child which contacts lobipanels as unique identifier

For documentation and examples visit the plugin's home page

← Metadata

168
Stars
75
Forks
Watchers

Owner

verified publisher icon thecodeholic

Metadata

jQuery plugin for bootstrap panels. It extends panels with several common and useful functions.

Back