Creating Widget-style Content Areas With jQuery - Widgster

Creating Widget-style Content Areas With jQuery - Widgster
File Size: 7.64 KB
Views Total: 1034
Last Update:
Publish Date:
Official Website: Go to website
License: MIT

Widgster is a small jQuery plugin to create floating widget-style content areas with expand, collapse, reload, restore, fullscreen, and close capabilities.


$ npm install widgster --save

How to use it:

1. Download and import the jQuery Widgster plugin's script in the webpage which has jQuery library installed.

<script src="//"></script>
<script src="widgster.js"></script>

2. Create the html for the widget with custom controls.

<section class="widget" data-widgster-load="reload.php">
    <h4>Widget Header</h4>
    <div class="widget-controls">
      <a data-widgster="load" href="#">Reload</a>
      <a data-widgster="expand" href="#">Expand</a>
      <a data-widgster="collapse" href="#">Collapse</a>
      <a data-widgster="fullscreen" href="#">Fullscreen</a>
      <a data-widgster="restore" href="#">Restore</a>
      <a data-widgster="close" href="#">Close</a>
  <div class="body">
    Widget Body

3. Enable the widget by calling the function widgster on the top container.


4. Apply your own CSS styles to the widget.

.widget {
  background-color: white;
  padding: 20px;

.widget > header > h4 {
  margin: 0;
  display: inline-block;

.widget-controls {
  float: right;
  font-size: small;
  word-spacing: 2px;

5. Config the widget by overriding the default settings values as displayed below:

    collapsed: false,
    fullscreened: false,
    transitionDuration: 150,
    bodySelector: '.body',
    showLoader: true,
    autoload: false,
    loaderTemplate: '<div style="text-align: center; margin-top: 10px;">Loading...</div>',
     * provide a way to insert a prompt before removing widget
     * @param callback
    closePrompt: function(callback){

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