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"}'