jsPanel - Complete Modal and Panel Solution

jsPanel - Complete Modal and Panel Solution

Released 3 years ago , Last update 2 years ago

A jQuery Plugin to create highly configurable floating panels, modals, hints and tooltips for use in a backend solution and other web applications.

A jsPanel can be used as a floating, draggable and resizable panel, as modal, as tooltip and even as a hint. Configuration options include additional toolbars for header and/or footer sections, support for right-to-left text direction, built in bootstrap support, 13 themes and much more.

Various options allow for a flexible way to add content to a jsPanel, including AJAX support.

Existing jsPanel sections and contents are easily accessed via various properties, and methods and events offer interaction with it.


NOTES:

Don't miss the completely new jsPanel version 3:

 

Bower

Using bower don't use the camelcase spelling of jsPanel. Use only lower case jspanel

bower install jspanel

npm

npm install jspanel

Angular

Since I haven't worked with Angular so far, I can't say very much about using jsPanel with Angular. Nevertheless I can say that:

  • Merely loading Angular doesn't affect jsPanel in a negative way
  • Angular uses only a subset of jQuery by default and that's not enough. You need to load the full jQuery library prior loading Angular. See docs.angularjs.org/api/ng/function/angular.element
  • Don't forget to load jQuery-UI (js and css) with at least UI Core, Mouse, Widget, Draggable, Resizable
  • Be sure to use HTML5 doctype

Pricing

14 day 14-day money-back guarantee

FREE

MIT license

The MIT license is an open-source license.

Need custom services for this product? Get a quote

Options, Properties, Methods and Events

jsPanel options include

  • addCLass | adds custom css classes to header, content and footer sections
  • ajax | loads content using jQuery.ajax()
  • autoclose | enables automatic closing of a jsPanel after a specified time
  • bootstrap | enables automatic adaption to a used bootstrap theme
  • callback | a function or array of functions executed when the jsPanel is loaded into the document
  • content | loads content using jQuery's append() method
  • controls | configures the control buttons in the top right corner of the jsPanel
  • dblclicks | allows to set doubleclick handlers for title, content and footer sections of a jsPanel
  • draggable | configures jQuery's draggable interaction for the jsPanel
  • id | sets the id attribute of the jsPanel
  • iframe | allows to configure an iframe as jsPanel content and supports all iframe attributes compatible with HTML5
  • load | loads content using jQuery's .load() method
  • offset | sets horizontal and/or vertical position offsets
  • overflow | configures the overflow properties of the jsPanel content area
  • paneltype | sets the type of jsPanel. This can either be a standard jsPanel, a modal jsPanel, a tooltip or a hint
  • position |sets the position of the jsPanel relative to the containing element
  • removeHeader | allows to remove the header section from the jsPanel
  • resizable | configures jQuery's resizable interaction for the jsPanel
  • rtl | support for right-to-left text direction
  • selector | specifies a container to append the jsPanel to
  • show | sets the animation used to blend in a jsPanel
  • size | sets the size of a jsPanel
  • theme | sets one of several themes of a jsPanel
  • title | sets the title of a jsPanel
  • toolbarHeader | configures a toolbar in the header section of a jsPanel
  • toolbarFooter | configures a toolbar in the footer section of a jsPanel

jsPanel properties include

  • content | represents the div element containing the content of the jsPanel
  • footer | represents the div element containing the footer toolbar
  • header | represents the complete header section (including title, controls and toolbar)
  • header.title | represents the h3 element containing the title text
  • header.controls | represents the div element containing the control buttons (close, maximize, minimize, ...)
  • header.toolbar | represents the div element containing the header toolbar
  • status | is set to the current status (normalized, maximized, minimized, ...) of the jsPanel

jsPanel methods include

  • addToolbar() | adds a toolbar to either the header or the footer of an existing jsPanel.
  • close() | removes the jsPanel from the DOM.
  • closeChildpanels() | removes all childpanels of a jsPanel from the DOM.
  • control() | either disables or enables the control specified by ctrl of an already excisting jsPanel
  • front() | moves a jsPanels to the front by increasing the z-index.
  • maximize() | maximizes a jsPanel either within the containing element or the browser window.
  • minimize() | minimizes a jsPanel to the lower left corner of the browser viewport.
  • normalize() | restores size and position of a jsPanel to the values before it was either maximized or minimized.
  • resize() | resizes an already exsisiting jsPanel.
  • smallify() | toggles the height of a jsPanel between the height of the header section and the height of the jsPanel prior being "smallified."
  • title() | either returns or sets the title/header of a jsPanel.

jsPanel events include

  • jspanelloaded
  • jspanelclosed
  • jspanelmaximized
  • jspanelminimized
  • jspanelnormalized
  • jspanelsmallified / jspanelsmallifiedMax
  • jspanelstatechange

Defaults

All options have a default value that can be overridden globally if necessary.

Dependencies

  • jQuery 1.9.1 or greater (that includes 2.1.4)
  • jQuery UI 1.9 or greater at least with core, widget, mouse, resizable and draggable (due to a bug in jQuery-UI 1.10.3 and 1.10.4 I currently recommend using version 1.11.4)
  • HTML5/CSS3 capable browser
  • Bootstrap (only in case you intend to use the bootstrap option of jsPanel)

Documentation

License » MIT license Download

Get A Quote

What do you need?
  • Custom development
  • Integration
  • Customization / Reskinning
  • Consultation
When do you need it?
  • Soon
  • Next week
  • Next month
  • Anytime

Thanks for getting in touch!

Your quote details have been received and we'll get back to you soon.

or Get a quote

for customization or integration services


Or enter your name and Email
No comments have been posted yet.