https://github.com/flatlogic/widgster
Small jQuery plugin that provides an easy way to handle basic widget functions like collapsing, closing, ajax-refreshing & fullsreening.
https://github.com/flatlogic/widgster
Last synced: 7 months ago
JSON representation
Small jQuery plugin that provides an easy way to handle basic widget functions like collapsing, closing, ajax-refreshing & fullsreening.
- Host: GitHub
- URL: https://github.com/flatlogic/widgster
- Owner: flatlogic
- License: mit
- Created: 2014-05-11T15:29:06.000Z (about 12 years ago)
- Default Branch: master
- Last Pushed: 2018-03-21T18:54:36.000Z (over 8 years ago)
- Last Synced: 2025-08-09T19:13:35.552Z (11 months ago)
- Language: JavaScript
- Homepage:
- Size: 11.7 KB
- Stars: 37
- Watchers: 11
- Forks: 14
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
Widgster
======================
Small jQuery plugin that provides an easy way to handle basic widget functions like collapsing, closing, ajax-refreshing & fullsreening.
**[Demo](http://widgster.flatlogic.com/demo/index.html)**
**[Advanced Demo](http://demo.flatlogic.com/4.0.1/dark/grid_live.html)**
Use
------------
To apply all these features to your default widget you have to add appropriate links (or buttons) to it:
Header
In the example above links are put into a `.widget-controls` but you can put them anywhere inside of widget.
Then widgster needs to be initialized via javascript:
$('.widget').widgster();
As you could guess `data-widgster` attribute defines widget action to be performed when link is clicked.
Actions
------------
* **close** - closes the widget;
* **collapse** - collapses (minimizes) the widget. An element holding this data attribute will be hidden when widget gets expanded;
* **expand** - expands the widget. An element holding this data attribute will be hidden when widget gets collapsed;
* **fullscreen** - fullscreens the widget. An element holding this data attribute will be hidden when widget gets restored;
* **restore** - restores the widget back to its position. An element holding this data attribute will be hidden when widget gets fullscreened;
* **load** - reloads widget content from the url provided with `data-widget-load` attribute.
All actions may be called via js:
$('.widget').widgster('close');
Options
------------
* **collapsed** - if true collapses widget after page load;
* **fullscreened** - if true fullscreens widget after page load;
* **bodySelector** - widget body selector. Used for loading and collapsing. Default is `.body`;
* **load** - an url to fetch widget body from. Default is `undefined`;
* **showLoader** - whether to show a loader when ajax refresh performed. Default is `true`;
* **autoload** - whether to automatically perform ajax refresh after page load. May be set to an integer value. If set, for example, to 2000 will refresh the widget every 2 seconds. Default is `false`;
* **closePrompt(callback)** - a function to be called when closing. Closing is only performed when `callback` is called.
Widgster accepts an object with options:
$('.widget').widgster({
collapsed: true
});
Events
------------
Each action fires both before and after event. Events have the same names as actions. Before event may be canceled.
For example, to make refresh button spin:
$('.widget').on("load.widgster", function(){
$(this).find('[data-widgster="load"] > i').addClass('fa-spin')
}).on("loaded.widgster", function(){
$(this).find('[data-widgster="load"] > i').removeClass('fa-spin')
});
How can I support the developers?
------------------------------------
- Star our GitHub repo :star:
- Create pull requests, submit bugs, suggest new features or documentation updates :wrench:
- Follow us on [Twitter](https://twitter.com/flatlogic) :feet:
- Like our page on [Facebook](https://www.facebook.com/flatlogic/) :thumbsup: