ORB

PowerWidgets

Power widgets — is a extremely powerfull tool for organizing workspace in Dashboard. Sortable, easy-to-edit responsive blocks bring real joy and happyness.

After playing with widgets – don't forget to clear HTML5 LocalStorage

Clear all storage

Hidden widget

data-widget-hidden="true"

Basic widget

This is basic widget. As shown above — you can use 4 types of action buttons: toggle, edit, fullscreen and delete. As option you can add also Refresh button. Generally you can create and insert variety of other content elements in Widget header, everything depends on your fantasy.

Typical HTML structure of widget look like this:

<div class="powerwidget" id="widget-id">
    <header>
        <h2>Widget Title</h2>                           
    </header>
    <div>
        <!-- content goes here -->
    </div>
</div>
Never forger to assign unique id for a new widgets. In case of duplicate IDs on one page problems with styling and HTML5 LocalStorage problems will occur.

Widget IconUse Icons

Use any of hundreds icons to make widget unique with data-widget-icon="fa fa-cog"

No edit button

To disable editing use data-widget-editbutton="false"

Not sortable

To make widgets sortable within the grid — add .bootstrap-grid class to grid column.

About Sorting

As a part of the grid all Power Widgets are Sortable by default setting in JavaScript.

Use data-widget-sortable="false" to disable sorting of concrete widget.

Auto refresh

No toggle button

This is example of widget without toggling feature, using data-widget-togglebutton="false" attribute. Moreover, under edit button there is no input field for renaming widget, just color change. Yes! You decide the way of editing widgets — you can disable as Widget Rename so Widget Styling.

Take a look on a code below — this is Editbox.

<div class="powerwidget-editbox">
  <!-- Delete div below to disable renaiming-->
  <div>
    <label>Title:</label>
    <input class="form-control" type="text" />
  </div>
  <!-- Delete div below to disable styling widget -->
  <div>
    <label>Styles:</label>
    <span data-widget-setstyle="pink" class="pink-btn"></span> ...
    <span data-widget-setstyle="black" class="black-btn"></span> 
    </div>
</div>

No delete button

You'll never delete this widget with data-widget-deletebutton="false"

No fullscreen button

Get no fullscreen feature with data-widget-fullscreenbutton="false"

Collapsed widget

data-widget-collapsed="true"
Notice, i will always be collapsed

No timestamp

WidgetsData Attributes

Widget Data AtributesDataset

Please pay attention to fact that you can globally set widgets data-attributes via Java Script. Working example of that you find in main scripts.js file.
HTML5 data attributes Place at Example value Description
data-widget-sortable powerwidget false Prevent a widget from being sortable(can only be used with the value 'false').
data-widget-icon powerwidget fa fa-cog or entypo-heart Use a icon in the widgets header (see icon page for icons).
data-widget-togglebutton powerwidget false Prevent a widget from having a toggle button(can only be used with the value 'false').
data-widget-deletebutton powerwidget false Prevent a widget from having a delete button(can only be used with the value 'false').
data-widget-editbutton powerwidget false Prevent a widget from having a edit button(can only be used with the value 'false').
data-widget-fullscreenbutton powerwidget false Prevent a widget from having a fullscreen button(can only be used with the value 'false').
data-widget-load powerwidget widget-ajax.php The file that is loaded with ajax.
data-widget-refresh powerwidget 10 Seconds to refresh a ajax file(see 'data-widget-load').
data-widget-refreshbutton powerwidget false Prevent a ajax widget from showing a refresh button(can only be used with the value 'false').
data-widget-hidden powerwidget false Hide a widget at load (can only be used with the value 'true'). You can show it by selecting the matching checkbox in the widget management panel(seperate plugin).
data-widget-collapsed powerwidget false Collapse a widget upon load(can only be used with the value 'true'). This will allways be collapsed every page load.
data-widget-grid false You can exclude grids from being a sortable/droppable area, this means that all widgets in this area will work, but cant be sortable/droppable and that all other widgets cant be dropped in this area. Add this attribute(can only be used with the value 'false') to a grid element.
data-widget-setstyle red This dataset can be used in the edit box wrapper, it allows you to set a different style. This dataset can be used on every element aslong its inside the widget.
These HTML5 attributes are used as individual widget options. Main options can be changed in the widgets plugin it self. Notice: data attributes can only have 1 boolean value (see above)!