Creating Widget-style Content Areas With jQuery - Widgster

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

Installation:

# NPM
$ 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="//code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="widgster.js"></script>

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

<section class="widget" data-widgster-load="reload.php">
  <header>
    <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>
  </header>
  <div class="body">
    Widget Body
  </div>
</section>

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

$(function(){
  $('.widget').widgster();
})

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:

$(function(){
  $('.widget').widgster({
    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){
        callback()
    }
  });
})

---

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