<section>
|
<h1 class="blue" data-id="#custom/widget-box"><i class="ace-icon fa fa-desktop grey"></i> Widget Box</h1>
|
|
<div class="hr hr-double hr32"></div>
|
|
<!-- #section:custom/widget-box -->
|
<div class="help-content">
|
<h3 class="info-title smaller">1. Widget Box</h3>
|
<div class="info-section">
|
<ul class="info-list list-unstyled">
|
<li>
|
<div class="well">
|
<i class="ace-icon fa fa-hand-o-right"></i>
|
Please note that widget box title should now have <code>.widget-title</code> class.
|
<br />
|
Also widget color options
|
are now applied to the box, not header.
|
<br />
|
For example <code>.widget-header.header-color-blue</code> becomes
|
<code>.widget-box.widget-color-blue</code>
|
</div>
|
</li>
|
|
<li>
|
Widget box consists of <b>header</b> and <b>body</b>.
|
<pre data-language="html">
|
<div class="widget-box">
|
<div class="widget-header"></div>
|
<div class="widget-body"></div>
|
</div>
|
</pre>
|
</li>
|
</ul>
|
</div>
|
|
|
|
<h3 class="info-title smaller" data-id="#custom/widget-box.options">2. Widget Box Options</h3>
|
<!-- #section:custom/widget-box.options -->
|
<div class="info-section">
|
<ul class="info-list list-unstyled">
|
<li>
|
You can use following classes for a different widget box color:
|
<ol>
|
<li><code>.widget-color-blue</code></li>
|
<li><code>.widget-color-blue2</code></li>
|
<li><code>.widget-color-blue3</code></li>
|
<li><code>.widget-color-green</code></li>
|
<li><code>.widget-color-green2</code></li>
|
<li><code>.widget-color-green3</code></li>
|
<li><code>.widget-color-red</code></li>
|
<li><code>.widget-color-red2</code></li>
|
<li><code>.widget-color-red3</code></li>
|
<li><code>.widget-color-yellow</code></li>
|
<li><code>.widget-color-purple</code></li>
|
<li><code>.widget-color-pink</code></li>
|
<li><code>.widget-color-dark</code></li>
|
<li><code>.widget-color-grey</code></li>
|
</ol>
|
<pre data-language="html">
|
<div class="widget-box widget-color-blue">
|
...
|
</div>
|
</pre>
|
|
</li>
|
<li>
|
<!-- #section:custom/widget-box.options.transparent -->
|
Add <code>.transparent</code> for transparent widget box:
|
<pre data-language="html">
|
<div class="widget-box transparent">
|
...
|
</div>
|
</pre>
|
<!-- /section:custom/widget-box.options.transparent -->
|
</li>
|
|
<li>
|
Add <code>.light-border</code> for light widget body border:
|
<pre data-language="html">
|
<div class="widget-box widget-color-dark light-border">
|
...
|
</div>
|
</pre>
|
</li>
|
|
<li>
|
<!-- #section:custom/widget-box.options.collapsed -->
|
Add <code>.collapsed</code> for widget box to be collapsed by default:
|
<pre data-language="html">
|
<div class="widget-box collapsed">
|
...
|
</div>
|
</pre>
|
<!-- /section:custom/widget-box.options.collapsed -->
|
</li>
|
</ul>
|
</div>
|
<!-- /section:custom/widget-box.options -->
|
|
|
<h3 class="info-title smaller" data-id="custom/widget-box.toolbar">3. Widget Header</h3>
|
<!-- #section:custom/widget-box.toolbar -->
|
<div class="info-section">
|
<ul class="info-list list-unstyled">
|
<li>
|
Header consists of title and toolbar(optional action buttons):
|
<pre data-language="html">
|
<div class="widget-header">
|
<h4 class="widget-title smaller">title!</h4>
|
<div class="widget-toolbar"></div>
|
</div>
|
</pre>
|
</li>
|
|
<li>
|
<h3 class="hidden" data-id="#custom/widget-box.header.options">Widget Header</h3>
|
<!-- #section:custom/widget-box.header.options -->
|
<ol>
|
<li><code>.widget-header-small</code> makes <code>.widget-header</code> smaller</li>
|
<li><code>.widget-header-large</code> makes <code>.widget-header</code> larger</li>
|
<li><code>.widget-header-flat</code> disables gradient background on <code>.widget-header</code></li>
|
</ol>
|
<pre data-language="html">
|
<div class="widget-header widget-header-small widget-header-flat">
|
</div>
|
</pre>
|
<!-- /section:custom/widget-box.header.options -->
|
</li>
|
|
<li>
|
Widget toolbar consists of buttons with custom icons and elements.
|
<pre data-language="html">
|
<div class="widget-toolbar">
|
<a data-action="settings" href="#"><i class="ace-icon fa fa-bars"></i></a>
|
<a data-action="reload" href="#"><i class="ace-icon fa fa-refresh"></i></a>
|
<a data-action="fullscreen" class="orange2" href="#"><i class="ace-icon fa fa-expand"></i></a>
|
<a data-action="collapse" href="#"><i class="ace-icon fa fa-chevron-up"></i></a>
|
<a data-action="close" href="#"><i class="ace-icon fa fa-times"></i></a>
|
</div>
|
</pre>
|
</li>
|
|
<li>
|
Current action buttons that trigger an event and perform an action are:
|
<ol>
|
<li><code>settings</code></li>
|
<li><code>reload</code></li>
|
<li><code>fullscreen</code></li>
|
<li><code>collapse</code></li>
|
<li><code>close</code></li>
|
</ol>
|
Please refer to widget events section for more info.
|
</li>
|
|
<li>
|
For <code>data-action="collapse"</code> button, you can change collapsed/expanded icons by
|
specifying icon's <code>data-icon-show</code> & <code>data-icon-hide</code> attributes:
|
<pre data-language="html">
|
<a data-action="collapse" href="#">
|
<i class="ace-icon fa fa-minus" data-icon-show="fa-plus" data-icon-hide="fa-minus"></i>
|
</a>
|
</pre>
|
Also, if you specify any icon with <code>-up</code> or <code>-down</code> in its name, it will be automatically flipped.
|
<div class="space-4"></div>
|
|
You can also add <code>.collapsed</code> class to <code>.widget-box</code> to become collapsed by default.
|
</li>
|
|
<li>
|
You can have multiple toolbars in widget header:
|
<pre data-language="html">
|
<div class="widget-header">
|
<h4 class="widget-title"></h4>
|
|
<div class="widget-toolbar no-border"></div>
|
<div class="widget-toolbar"></div>
|
</div>
|
</pre>
|
|
<code>.no-border</code> class on a <code>.widget-toolbar</code> hides its border.
|
</li>
|
|
|
|
<li>
|
To have a dropdown menu inside widget toolbar,
|
you should wrap the action button and menu inside a <code>.widget-menu</code> element:
|
<pre data-language="html">
|
<div class="widget-toolbar">
|
|
<a data-action="reload" href="#"><i class="ace-icon fa fa-refresh"></i></a>
|
|
<div class="widget-menu">
|
<a data-toggle="dropdown" data-action="settings" href="#"><i class="ace-icon fa fa-bars"></i></a>
|
<ul class="dropdown-menu dropdown-menu-right dropdown-light-blue dropdown-caret dropdown-closer">
|
<li><a href="#dropdown1" data-toggle="tab">Option#1</a></li>
|
<li><a href="#dropdown2" data-toggle="tab">Option#2</a></li>
|
</ul>
|
</div>
|
|
</div>
|
</pre>
|
</li>
|
|
<li>
|
<!-- #section:custom/widget-box.tabbed -->
|
To have tabs in widgets, you should put the <code>ul.nav-tabs</code> element inside <code>.widget-toolbar</code>
|
and <code>.tab-content</code> should be inside widget body's <code>.widget-main</code>:
|
<pre data-language="html">
|
<div class="widget-header widget-header-small">
|
<h5 class="widget-title">Tabbed</h5>
|
<div class="widget-toolbar no-border">
|
<ul id="myTab" class="nav nav-tabs">
|
<li class="active"><a href="#home" data-toggle="tab">Home</a></li>
|
<li><a href="#profile" data-toggle="tab">Profile</a></li>
|
<li><a href="#info" data-toggle="tab">Info</a></li>
|
</ul>
|
</div>
|
</div>
|
|
<div class="widget-body">
|
<div class="widget-main">
|
<!-- tab content here -->
|
</div>
|
</div>
|
|
</pre>
|
<!-- /section:custom/widget-box.tabbed -->
|
</li>
|
</ul>
|
</div>
|
<!-- /section:custom/widget-box.toolbar -->
|
|
|
<h3 class="info-title smaller">4. Widget Body</h3>
|
<div class="info-section">
|
<ul class="info-list list-unstyled">
|
<li>
|
Widget box consists of <b>header</b> and <b>body</b>.
|
<pre data-language="html">
|
<div class="widget-box">
|
<div class="widget-header"></div>
|
<div class="widget-body"></div>
|
</div>
|
</pre>
|
</li>
|
|
<li>
|
<code>.widget-body</code> consists of <code>.widget-main</code>
|
and optional toolboxes <code>.widget-toolbox</code>
|
<pre data-language="html">
|
<div class="widget-body">
|
<div class="widget-toolbox"> ... </div>
|
|
<div class="widget-main"> ... </div>
|
|
<div class="widget-toolbox padding-8"> ... </div>
|
</div>
|
</pre>
|
</li>
|
|
<li>
|
<code>.widget-main</code> and <code>.widget-toolbox</code>
|
can have the following padding classes:
|
<ul>
|
<li><code>.no-padding</code></li>
|
<li><code>.padding-2</code></li>
|
<li><code>.padding-4</code></li>
|
<li>...</li>
|
<li><code>.padding-30</code></li>
|
<li><code>.padding-32</code></li>
|
</ul>
|
|
For example when putting a table inside widget box
|
you may want to use <code>.no-padding</code>
|
|
<pre data-language="html">
|
<div class="widget-body">
|
<div class="widget-main no-padding">
|
|
<table class="table table-striped table-bordered table-hover">
|
<thead class="thin-border-bottom">
|
</thead>
|
|
<tbody>
|
</tbody>
|
</table>
|
|
</div>
|
</div>
|
</pre>
|
</li>
|
|
<li>
|
<!-- #section:custom/widget-box.toolbox -->
|
<code>.widget-toolbox</code> can be before or after <code>.widget-main</code>
|
<pre data-language="html">
|
<div class="widget-toolbox">
|
<div class="btn-toolbar">
|
...
|
</div>
|
</div>
|
|
<div class="widget-main">
|
...
|
</div>
|
|
<div class="widget-toolbox padding-8 clearfix">
|
<button class="btn btn-xs btn-danger pull-left">
|
<i class="ace-icon fa fa-times"></i>
|
I don't accept
|
</button>
|
<button class="btn btn-xs btn-success pull-right">
|
I accept
|
<i class="ace-icon fa fa-arrow-right icon-on-right"></i>
|
</button>
|
</div>
|
</pre>
|
<hr />
|
Add <code>.toolbox-vertical</code> to <code>.widget-toolbox</code> for vertical toolbox
|
|
<!-- /section:custom/widget-box.toolbox -->
|
</li>
|
|
</ul>
|
</div>
|
|
|
|
<h3 class="info-title smaller">5. Functions & Events</h3>
|
<div class="info-section">
|
<ul class="info-list list-unstyled">
|
<li>
|
The following functions are available for widgets:
|
<ol>
|
<li><code>close</code></li>
|
<li><code>toggle</code></li>
|
<li><code>hide</code></li>
|
<li><code>show</code></li>
|
<li><code>reload</code></li>
|
<li><code>fullscreen</code></li>
|
</ol>
|
|
<pre data-language="html">
|
<div class="widget-box" id="my-widget">
|
....
|
</div>
|
</pre>
|
|
<pre data-language="javascript">
|
$('#my-widget').widget_box('toggle');
|
$('#my-widget').widget_box('show');
|
$('#my-widget').widget_box('close');
|
$('#my-widget').widget_box('reload');
|
</pre>
|
</li>
|
|
<li>
|
The following events are triggered when using widgets:
|
<br />
|
<b>Before Events:</b>
|
<ol>
|
<li><code>show.ace.widget</code> triggered before a widget box is shown</li>
|
<li><code>hide.ace.widget</code> triggered before a widget box is hidden</li>
|
<li><code>close.ace.widget</code> triggered before a widget box is closed</li>
|
<li><code>reload.ace.widget</code> triggered before a widget box is reloaded</li>
|
<li><code>fullscreen.ace.widget</code> triggered before a widget box is fullscreen</li>
|
<li><code>setting.ace.widget</code> triggered before a widget box is fullscreen</li>
|
</ol>
|
|
<b>After Events:</b>
|
<ol>
|
<li><code>shown.ace.widget</code> triggered after a widget box is shown</li>
|
<li><code>hidden.ace.widget</code> triggered after a widget box is hidden</li>
|
<li><code>closed.ace.widget</code> triggered after a widget box is closed</li>
|
<li><code>reloaded.ace.widget</code> triggered after a widget box is reloaded</li>
|
<li><code>fullscreened.ace.widget</code> triggered after a widget box is fullscreened</li>
|
</ol>
|
</li>
|
|
<li>
|
With "before events" you can cancel an action.
|
<br />
|
For example when you are waiting for remote content to arrive, you can cancel "close" events:
|
<pre data-language="javascript">
|
$('#my-widget').on('close.ace.widget reload.ace.widget', function(event) {
|
if(waitingForContent) {
|
event.preventDefault();//action will be cancelled, widget box won't close
|
}
|
});
|
</pre>
|
</li>
|
|
<li>
|
With "after events" you can do some action after its finished:
|
<pre data-language="javascript">
|
$('#my-widget').on('shown.ace.widget', function(event) {
|
//$(this).doSomething();
|
});
|
</pre>
|
</li>
|
|
<li>
|
<code><span class="blue">reload</span>.ace.widget</code> can be used to load remote content.
|
<br />
|
When data is ready, you can trigger <code><span class="green">reloaded</span>.ace.widget</code>:
|
<pre data-language="javascript">
|
$('#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');
|
});
|
});
|
</pre>
|
</li>
|
|
<li>
|
<code>setting.ace.widget</code> event does not have an "after" event.
|
<br />
|
You can use it to be notified when "settings" button is clicked and show a dialog:
|
<pre data-language="javascript">
|
$('#my-widget').on('setting.ace.widget', function(ev) {
|
//launch a modal (settings box) or other appropriate action
|
});
|
</pre>
|
</li>
|
|
</ul>
|
</div>
|
|
|
|
|
<h3 class="info-title smaller">7. Widget Drag & Drop</h3>
|
<div class="info-section">
|
<ul class="info-list list-unstyled">
|
<li>
|
Using jQuery UI, you can add drag & drop functionality to widget boxes or any other set of elements:
|
<pre data-language="html">
|
<div class="row">
|
|
<div class="col-sm-6 widget-container-col">
|
<div class="widget-box">
|
...
|
</div>
|
</div>
|
|
<div class="col-sm-6 widget-container-col">
|
<div class="widget-box">
|
...
|
</div>
|
</div>
|
|
</div>
|
</pre>
|
|
<pre data-language="javascript">
|
$('.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':''})
|
}
|
});
|
</pre>
|
</li>
|
</ul>
|
</div>
|
|
</div>
|
<!-- /section:custom/widget-box -->
|
|
</section>
|
