.widget-title
class.
.widget-header.header-color-blue
becomes
.widget-box.widget-color-blue
.widget-color-blue
.widget-color-blue2
.widget-color-blue3
.widget-color-green
.widget-color-green2
.widget-color-green3
.widget-color-red
.widget-color-red2
.widget-color-red3
.widget-color-yellow
.widget-color-purple
.widget-color-pink
.widget-color-dark
.widget-color-grey
.transparent
for transparent widget box:
.light-border
for light widget body border:
.collapsed
for widget box to be collapsed by default:
.widget-header-small
makes .widget-header
smaller.widget-header-large
makes .widget-header
larger.widget-header-flat
disables gradient background on .widget-header
settings
reload
fullscreen
collapse
close
data-action="collapse"
button, you can change collapsed/expanded icons by
specifying icon's data-icon-show
& data-icon-hide
attributes:
Also, if you specify any icon with
-up
or -down
in its name, it will be automatically flipped.
You can also add .collapsed
class to .widget-box
to become collapsed by default.
.no-border
class on a .widget-toolbar
hides its border.
.widget-menu
element:
ul.nav-tabs
element inside .widget-toolbar
and .tab-content
should be inside widget body's .widget-main
:
.widget-body
consists of .widget-main
and optional toolboxes .widget-toolbox
.widget-main
and .widget-toolbox
can have the following padding classes:
.no-padding
.padding-2
.padding-4
.padding-30
.padding-32
.no-padding
.widget-toolbox
can be before or after .widget-main
.toolbox-vertical
to .widget-toolbox
for vertical toolbox
close
toggle
hide
show
reload
fullscreen
$('#my-widget').widget_box('toggle'); $('#my-widget').widget_box('show'); $('#my-widget').widget_box('close'); $('#my-widget').widget_box('reload');
show.ace.widget
triggered before a widget box is shownhide.ace.widget
triggered before a widget box is hiddenclose.ace.widget
triggered before a widget box is closedreload.ace.widget
triggered before a widget box is reloadedfullscreen.ace.widget
triggered before a widget box is fullscreensetting.ace.widget
triggered before a widget box is fullscreenshown.ace.widget
triggered after a widget box is shownhidden.ace.widget
triggered after a widget box is hiddenclosed.ace.widget
triggered after a widget box is closedreloaded.ace.widget
triggered after a widget box is reloadedfullscreened.ace.widget
triggered after a widget box is fullscreened$('#my-widget').on('close.ace.widget reload.ace.widget', function(event) { if(waitingForContent) { event.preventDefault();//action will be cancelled, widget box won't close } });
$('#my-widget').on('shown.ace.widget', function(event) { //$(this).doSomething(); });
reload.ace.widget
can be used to load remote content.
reloaded.ace.widget
:
$('#my-widget').on('reload.ace.widget', function(ev) { $.ajax({url: 'remote-data.php'}).done(function(content) { //use content //when ready ... $('#my-widget').trigger('reloaded.ace.widget'); }); });
setting.ace.widget
event does not have an "after" event.
$('#my-widget').on('setting.ace.widget', function(ev) { //launch a modal (settings box) or other appropriate action });
$('.widget-container-col').sortable({ connectWith: '.widget-container-col', items: '> .widget-box', opacity: 0.8, revert: true, forceHelperSize: true, placeholder: 'widget-placeholder', forcePlaceholderSize: true, tolerance: 'pointer', start: function(event, ui){ //when an element is moved, its parent (.widget-container-col) becomes empty with almost zero height //we set a "min-height" for it to be large enough so that later we can easily drop elements back onto it ui.item.parent().css({'min-height': ui.item.height()}) }, update: function(event, ui) { //the previously set "min-height" is not needed anymore //now the parent (.widget-container-col) should take the height of its child (.wiget-box) ui.item.parent({'min-height':''}) } });