Dialog Start tour

Power Widgets

One of the main features of this theme are the power widgets, these widgets are used to display content in a organized and customizable way. All widgets have main settings and single options(done with HTML5 data attributes), this allows each widget to be flexible. The widgets are used in combination with our custom grid, this way you can set up your own custom layout of widgets.

http://codecanyon.net/item/power-widgets-manage-and-display-your-content/2901689

Basic

Powerfull widgets.

How to use

How to use HTML elements.

Markup
<div class="powerwidget" id="widget-id">
    <header>
        <h2>Widget Title</h2>                           
    </header>
    <div>
        <!-- content goes here -->
    </div>
</div>

Usage Data Atributes (dataset)

Data atrributes are used by some of our custom plugins to set/get data.

Plugin options Type Default Desctription Full Lite * Since
grid string This is the class or element that are used for the sorting(if option sortable is set to true) of a widget. yes yes 1.0
widgets string .powerwidget Widgets class. yes yes 1.0
localStorage boolean true Everyting is saved in to the local storage, but you can turn this off. yes yes 1.0
deleteSettingsKey string You can delete the local storage settings key(if you are using local storage). The settings key is used to store things, style and title. This must be an unique(just for that page) Id or class for example: '#thelink'. yes yes 1.0
settingsKeyLabel string Reset settings? Set the text for the 'deleteSettingsKey' confirm dialog. yes yes 1.0
deletePositionKey string You can delete the local storage position key(if you are using local storage). The positions key is used to store the position of the widgets. This must be an unique(just for that page) Id or class for example: '#thelink'. yes yes 1.0
settingsKeyLabel string Reset positions? Set the text for the 'deletePositionKey' confirm dialog. yes yes 1.0
sortable boolean true You can allow widgets to be sortable. yes yes 1.0
buttonsHidden boolean false If you are using action button, you can set them to visible, or hidden. If you choose hidden(value true) the buttons will be showen if you hover over the widgets header. yes no 1.0
toggleButton boolean true Show a toggle button. yes yes 1.0
toggleClass string min-10 | plus-10 The button class, active and non-active state. The two classes must be seperated by a '|' in order to work. yes yes 1.0
toggleSpeed number(integer) 200 The speed of the collapsable effect. yes yes 1.0
onToggle function function(){} Callback function that runs if you toggle a widget. yes yes 1.0
deleteButton boolean true Show a delete button. yes no 1.0
deleteClass string trashcan-10 The button class. yes no 1.0
deleteSpeed number(integer) 200 The speed of the deleting effect. yes no 1.0
onDelete function function(){} Callback function that runs once the widget has been deleted. yes no 1.0
editButton boolean true Show a edit button. yes no 1.0
editPlaceholder string The class of the edit box wrapper, which contains the title input and styling setters(see the markup demo above for an example). yes no 1.0
editClass string pencil-10 | delete-10 The edit class, active and non-active state. The two classes must be seperated by a '|' in order to work. yes no 1.0
editSpeed number(integer) 200 The speed of the edit effect. yes no 1.0
onEdit function function(){} Callback function that runs once you close the edit box. yes no 1.0
fullscreenButton boolean true Show a fullscreen button. yes no 1.0
fullscreenClass string fullscreen-10 | normalscreen-10 The fullscreen class, active and non-active state. The two classes must be seperated by a '|' in order to work. yes no 1.0
fullscreenDiff number(integer) 3 If you change the layout fo the widget, you can use this to make sure the that fullscreen is fullscreen(if needed). yes no 1.0
onfullscreen function function(){} Callback function that runs once you go to fullscreen mode. yes no 1.0
customButton boolean true Show a custom button. yes no 1.0
customClass string The custom class, active and non-active state. The two classes must be seperated by a '|' in order to work. yes no 1.0
customStart function function(){} Callback function that runs once you start the custom button. yes no 1.0
customEnd function function(){} Callback function that runs once you end the custom button. yes no 1.0
buttonOrder string %refresh% %delete% %custom% %edit% %fullscreen% %toggle% You can change the order of the buttons yes no 1.0
opacity number(float) 1.0 The opacity of the widgets once you drag them. yes yes 1.0
dragHandle string > header Choose the element that you want to use as an drag handle. The widgets main class is the parents class. yes yes 1.0
placeholderClass string powerwidget-placeholder This is the class thats used for the placeholder. yes yes 1.0
indicator boolean true Shows a animated image if there has been made a change in the widget(AJAX, deleting, toggle...). yes yes 1.0
indicatorTime number(integer) 600 The speed of the indicator image(animated loader image). This is in milliseconds. yes yes 1.0
ajax boolean true Allow widgets to use ajax. yes no 1.0
loadingLabel string loading... Placeholder text at the start of every page load. yes no 1.0
timestampPlaceholder string Show a timestamp form the last update. Only use classes. yes no 1.0
timestampFormat string Last update: %m%/%d%/%y% %h%:%i%:%s% Choose the output format. yes no 1.0
refreshButton boolean true Allow users to refresh the ajax content manually. yes no 1.0
refreshClass string refresh-10 The class of the refresh button. yes no 1.0
labelError string Sorry but there was a error: Label of the ajax error(label + error code(s)). yes no 1.0
labelUpdated string Last Update: Label for the timestamp, which will be showen every time it has been updated. yes no 1.0
labelRefresh string Refresh Label for the refresh button, this button will allow u to refresh the ajax content. yes no 1.0
afterLoad function function(){} Callback function that runs if the widget loads any ajax content. yes no 1.0
rtl boolean false Need rtl, use this. yes yes 1.0
* Lite version of the plugin which only has a couple of basic features.

Usage classes

Defined classes related to a piece of code or plugin.

Available class Element Desctription Since
powerwidget div Main widget class. 1.0

Usage plugin

How to use our custom made jQuery plugins.

Markup
$('div#content').powerWidgets({
    grid: '',
    widgets: '.powerwidget',
    localStorage: true,
    deleteSettingsKey: '',
    settingsKeyLabel: 'Reset settings?',
    deletePositionKey: '',
    positionKeyLabel: 'Reset position?',
    sortable: true,
    buttonsHidden: false,
    toggleButton: true,
    toggleClass: 'min-10 | plus-10',
    toggleSpeed: 200,
    onToggle: function(){},
    deleteButton: true,
    deleteClass: 'trashcan-10',
    deleteSpeed: 200,
    onDelete: function(){},
    editButton: true,
    editPlaceholder: '',
    editClass: 'pencil-10 | delete-10',
    editSpeed: 200,
    onEdit: function(){},
    fullscreenButton: true,
    fullscreenClass: 'fullscreen-10 | normalscreen-10',	
    fullscreenDiff: 3,		
    onFullscreen: function(){},
    customButton: true,
    customClass: '',
    customStart: function(){},
    customEnd: function(){},
    buttonOrder: '%refresh% %delete% %custom% %edit% %fullscreen% %toggle%',
    opacity: 1.0,
    dragHandle: '> header',
    placeholderClass: 'powerwidget-placeholder',
    indicator: true,
    indicatorTime: 600,
    ajax: true,
    loadingLabel: 'loading...',
    timestampPlaceholder: '',
    timestampFormat: 'Last update: %m%/%d%/%y% %h%:%i%:%s%',
    refreshButton: true,
    refreshButtonClass: 'refresh-10',
    labelError:'Sorry but there was a error:',
    labelUpdated: 'Last Update:',
    labelRefresh: 'Refresh',
    labelDelete: 'Delete widget:',
    afterLoad: function(){},	
    rtl: false	});

Usage plugin(lite version)

How to use the plugin.

$('#thismustbeanid').powerWidgetsLite({ // see list below for options });

Plugin options

Most of our custom made jQuery plugins have options/settings.

Plugin options Type Default Desctription Full Lite * Since
grid string This is the class or element that are used for the sorting(if option sortable is set to true) of a widget. yes yes 1.0
widgets string .powerwidget Widgets class. yes yes 1.0
localStorage boolean true Everyting is saved in to the local storage, but you can turn this off. yes yes 1.0
deleteSettingsKey string You can delete the local storage settings key(if you are using local storage). The settings key is used to store things, style and title. This must be an unique(just for that page) Id or class for example: '#thelink'. yes yes 1.0
settingsKeyLabel string Reset settings? Set the text for the 'deleteSettingsKey' confirm dialog. yes yes 1.0
deletePositionKey string You can delete the local storage position key(if you are using local storage). The positions key is used to store the position of the widgets. This must be an unique(just for that page) Id or class for example: '#thelink'. yes yes 1.0
settingsKeyLabel string Reset positions? Set the text for the 'deletePositionKey' confirm dialog. yes yes 1.0
sortable boolean true You can allow widgets to be sortable. yes yes 1.0
buttonsHidden boolean false If you are using action button, you can set them to visible, or hidden. If you choose hidden(value true) the buttons will be showen if you hover over the widgets header. yes no 1.0
toggleButton boolean true Show a toggle button. yes yes 1.0
toggleClass string min-10 | plus-10 The button class, active and non-active state. The two classes must be seperated by a '|' in order to work. yes yes 1.0
toggleSpeed number(integer) 200 The speed of the collapsable effect. yes yes 1.0
onToggle function function(){} Callback function that runs if you toggle a widget. yes yes 1.0
deleteButton boolean true Show a delete button. yes no 1.0
deleteClass string trashcan-10 The button class. yes no 1.0
deleteSpeed number(integer) 200 The speed of the deleting effect. yes no 1.0
onDelete function function(){} Callback function that runs once the widget has been deleted. yes no 1.0
editButton boolean true Show a edit button. yes no 1.0
editPlaceholder string The class of the edit box wrapper, which contains the title input and styling setters(see the markup demo above for an example). yes no 1.0
editClass string pencil-10 | delete-10 The edit class, active and non-active state. The two classes must be seperated by a '|' in order to work. yes no 1.0
editSpeed number(integer) 200 The speed of the edit effect. yes no 1.0
onEdit function function(){} Callback function that runs once you close the edit box. yes no 1.0
fullscreenButton boolean true Show a fullscreen button. yes no 1.0
fullscreenClass string fullscreen-10 | normalscreen-10 The fullscreen class, active and non-active state. The two classes must be seperated by a '|' in order to work. yes no 1.0
fullscreenDiff number(integer) 3 If you change the layout fo the widget, you can use this to make sure the that fullscreen is fullscreen(if needed). yes no 1.0
onfullscreen function function(){} Callback function that runs once you go to fullscreen mode. yes no 1.0
customButton boolean true Show a custom button. yes no 1.0
customClass string The custom class, active and non-active state. The two classes must be seperated by a '|' in order to work. yes no 1.0
customStart function function(){} Callback function that runs once you start the custom button. yes no 1.0
customEnd function function(){} Callback function that runs once you end the custom button. yes no 1.0
buttonOrder string %refresh% %delete% %custom% %edit% %fullscreen% %toggle% You can change the order of the buttons yes no 1.0
opacity number(float) 1.0 The opacity of the widgets once you drag them. yes yes 1.0
dragHandle string > header Choose the element that you want to use as an drag handle. The widgets main class is the parents class. yes yes 1.0
placeholderClass string powerwidget-placeholder This is the class thats used for the placeholder. yes yes 1.0
indicator boolean true Shows a animated image if there has been made a change in the widget(AJAX, deleting, toggle...). yes yes 1.0
indicatorTime number(integer) 600 The speed of the indicator image(animated loader image). This is in milliseconds. yes yes 1.0
ajax boolean true Allow widgets to use ajax. yes no 1.0
loadingLabel string loading... Placeholder text at the start of every page load. yes no 1.0
timestampPlaceholder string Show a timestamp form the last update. Only use classes. yes no 1.0
timestampFormat string Last update: %m%/%d%/%y% %h%:%i%:%s% Choose the output format. yes no 1.0
refreshButton boolean true Allow users to refresh the ajax content manually. yes no 1.0
refreshClass string refresh-10 The class of the refresh button. yes no 1.0
labelError string Sorry but there was a error: Label of the ajax error(label + error code(s)). yes no 1.0
labelUpdated string Last Update: Label for the timestamp, which will be showen every time it has been updated. yes no 1.0
labelRefresh string Refresh Label for the refresh button, this button will allow u to refresh the ajax content. yes no 1.0
afterLoad function function(){} Callback function that runs if the widget loads any ajax content. yes no 1.0
rtl boolean false Need rtl, use this. yes yes 1.0
* Lite version of the plugin which only has a couple of basic features.

Globally And Per-Call Overridable Options

This plugin has per-call(as the example above shows) and globally overridable options. Globally options can be used to override the default options, this is best used if you want to override the plugin options by default, this will prevent any issues with the plugin, as you dont have to change any thing in the plugin core it self. How to use: $.fn.pluginName.key = 'value';

Power Widgets Panel

This theme allows you to use a widgetspanel as a management tool for the power widgets. You can remove this panel/plugin if you want, because the Power widgets plugin doesn't need the eWidgetPanel plugin to work.

Basic

Powerfull widgets.

How to use

How to use HTML elements.

Markup
<div id="changeme" class="powerwidgetspanel">
    <header>
        <h2>Power widgets panel</h2>
    </header>
    
    <div class="powerwidgetspanel-widget" data-widget-id="widget1">
        <input type="checkbox" checked/>
        <label>Basic widget</label>
    </div>
    
    ...
    ...
    ...
</div>

Usage Data Atributes (dataset)

Data atrributes are used by some of our custom plugins to set/get data.

HTML5 data attributes Element Example Desctription Since
data-widget-id div widget1 This is the link to the widget, so this must match the widgets ID. 1.0

Usage classes

Defined classes related to a piece of code or plugin.

Available class Element Desctription Since
powerwidgetspanel-widget div Main widget checkbox holder class. 1.0

Usage plugin

How to use our custom made jQuery plugins.

Markup
$('#powerwidgetspanel').powerWidgetsPanel({
    target: '#options',
    widgets: '.powerwidget',
    localStorage: true,
    trigger: '',
    triggerClass:'plus-10 | min-10',
    effectPanel: 'slide',
    speedPanel: 200,
    effectWidget: 'slide',
    speedWidget: 200,
    onToggle: function(){}
});

Plugin options

Most of our custom made jQuery plugins have options/settings.

Plugin options Type Default Desctription Since
target string This is the id of the wrapper that holds the widgets. This must match the id of the powerwidgets plugin. 1.0
widgets string .powerwidget Widgets class. 1.0
localStorage boolean true Everyting is saved in to the local storage, but you can turn this off. 1.0
trigger string This is the trigger that shows or hides the panel. You dont have to use this. 1.0
triggerClass string plus-10 | min-10 The trigger button class, active and non-active state. The two classes must be seperated by a '|' in order to work. 1.0
effectPanel string slide The effect of the panel. You can choose between 'slide' and 'fade'. 1.0
effectPanel number(integer) 200 The speed of the panel effect. 1.0
effectWidget string slide The effect of the widget. You can choose between 'slide' and 'fade'. 1.0
effectWidget number(integer) 200 The speed of the widget effect. 1.0
onToggle function function(){} Callback function that runs if you toggle the panel. 1.0

Globally And Per-Call Overridable Options

This plugin has per-call(as the example above shows) and globally overridable options. Globally options can be used to override the default options, this is best used if you want to override the plugin options by default, this will prevent any issues with the plugin, as you dont have to change any thing in the plugin core it self. How to use: $.fn.pluginName.key = 'value';

Non-widgets(e-blocks)

One of the main features of this theme are the power widgets, but if you don't need or simply don't want to use these widgets you can use the basic blocks, these blocks dont have any options or settings and are fixed. Most things that fit in a widget should fit in a block. Notice that widgets can be sortable, blocks arn't.

Basic

Simple replacements for widgets.

How to use

How to use HTML elements.

Markup
<div class="e-block" id="block-id">
    <header>
        <h2>Block Title</h2>                           
    </header>
    <div>
    <!-- content goes here -->
    </div>
</div>

Icon & indicator

Simple replacements for widgets.

How to use

How to use HTML elements.

Markup
<div class="e-block" id="block-id">
    <header>
        <span class="icon-day-calendar"></span>
        <h2>Icon and indicator</h2>
        <span class="indicator">147</span>                                
    </header>
    <div>
    <!-- content goes here -->
    </div>
</div>

Title & etabs right

Simple replacements for widgets.

How to use

How to use HTML elements.

Markup
<div class="e-block" id="block-id">
    <header>
        <h2>e-block with title and tabs</h2>
        <div class="right">
            <ul class="etabs">
                <li class="etabs-active"><a href="#etab1">Tab 1</a></li>
                <li><a href="#etab2">Tab 2</a></li>
            </ul> 
        </div>                        
    </header>
    <div>
        <div id="etab1" class="etabs-content">
        <!-- content goes here -->
        </div> 
        <div id="etab2" class="etabs-content">
        <!-- content goes here -->
        </div> 
    </div>
</div>

Non-widgets - etabs left

Simple replacements for widgets.

How to use

How to use HTML elements.

Markup
<div class="e-block" id="block-id">
    <header>
        <ul class="etabs">
            <li class="etabs-active"><a href="#etab1">Tab 1</a></li>
            <li><a href="#etab2">Tab 2</a></li>
        </ul>                        
    </header>
    <div>
        <div id="etab1" class="etabs-content">
        <!-- content goes here -->
        </div> 
        <div id="etab2" class="etabs-content">
        <!-- content goes here -->
        </div> 
    </div>
</div>