utils.blur.js
Sometimes objects need to be blurred to put other objects into focus, or to disable functionality
Code |
Blur Area |
Action |
|---|---|---|
new UTILS.Blur({
target: $('#black-blur-area'),
color: 'black'
}).show();
|
||
new UTILS.Blur({
target: $('#white-blur-area'),
color: 'white'
}).show();
|
||
UTILS.dim.show(); //enable
UTILS.dim.hide(); //disable
|
||
var box = new APP.Box({
w: 700,
title: 'app box',
center: true,
classname: 'edit-box',
fx: { effect:'slide-down' }
}).show();
|
||
new UTILS.Spinner({
target: $('body'),
type: 'medium',
blur: true,
center: true
}).show();
|
||
API
Option |
Required |
Default |
Description |
|---|---|---|---|
| target | optional | $('body') |
DOM elm to blurred out |
| color | optional | white |
specifies the color of the blur |
| opac | optional | 0.7 |
opacity of the blur |
| resize | optional | false |
specifies whether the blur should be resized according to target size - only applicable if target is 'body' |
API Methods
Method |
Default |
Repeat |
Description |
|---|---|---|---|
| onShow | null |
REPEAT | stack of functions to execute when blur is shown |
| onHide | null |
REPEAT | stack of functions to execute when blur is hidden |