Step-by-Step Documentation
Initialize
- Include the wijets.js script to your document
- Call $.wijets().make(); near the end of your html
- Done!
Basic Setup
All Wijetized Panels have to be grouped. There may be multiple groups in a page, however, panels cannot be dragged and dropped from one group to another. We start with initializing the group.
<div class="row" data-widget-group="group1">
....
</div>
Each panel within the group can be delegated with a single attribute with optional properties (encoded in JSON), such as:
<div class="row" data-widget-group="group1">
<div class="panel" data-widget="">
...
</div>
</div>
The buttons for the panels are injected with the data-actions-container="" attribute. All three together, the basic set up for wijetized panels become:
<div class="row" data-widget-group="group1">
<div class="panel" data-widget="">
<div class="panel-heading">
<div class="panel-ctrls" data-actions-container="">
<div>
<h2>Panel Heading</h2>
</div>
<div class="panel-body">
...
</div>
</div>
</div>
Options
Set all options with the data-actions-container
Option | Property | Default Attribute | Description |
---|---|---|---|
Collapse | data-action-collapse |
{"target": ".panel-body"} |
Allow collapsing on the target |
Color Picker | data-action-colorpicker |
N/A | Allow changing of widget header color |
Title Editor | data-edit-title |
N/A | Allow changing of header title |
The widget controls container
Actions like colorpicker
and edit
require a space to put the controls in. You can select and arbitrary element to be the controls container simply by adding the data-widget-controls
attribute.
<div class="row" data-widget-group="group1">
<div class="panel" data-widget='{"id": "widget1"}'>
...
<div class="panel-editbox" data-widget-controls=""></div>
...
</div>
</div>
So now when you click on the edit action, the input box gets injected into the div.panel-editbox element automatically!
Persistence (localStorage)
You can make sure the properties of a widget (such as title and header color) persist across pageviews by passing an id property to the data-widget
attribute, like so:
<div class="row" data-widget-group="group1">
<div class="panel" data-widget='{"id": "widget1"}'>
...
</div>
</div>
Note that the attribute's values are in single quotes (') since it has to be JSON encoded.
More widget options
You can add these options to the data-widget
attribute in JSON to modify widget behavior.
Option | Description |
---|---|
data-widget='{"collapse": "true"}' |
Collapses the widget by default |
data-widget='{"draggable": "false"}' |
Makes the widget non-draggable |
You can apply multiple options like so: data-widget='{"draggable": "false", "collapsed": "true"}'