Creating Widget-style Content Areas With jQuery - Widgster
File Size: | 7.64 KB |
---|---|
Views Total: | 1121 |
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.
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.