simplefx.js
Simple eyecandy effects: shadows, rounding etc.
Functions
OAT.SimpleFX.shadow(element, options)
Adds a shadow to element . Available options
are:
-
imagePath
- path to directory
with shadow images
-
offsetX
,
offsetY
- horizontal and vertical
offset
-
rightSize
,
bottomSize
- dimensions of
shadows
-
rightImage
,
bottomImage
,
cornerImage
- file names
OAT.SimpleFX.roundImg(element, options)
ToBeDone
- Verify OAT.SimpleFX.roundDiv
vs OAT.SimpleFX.roundImg - original documentation had
this section header as roundImg -- but sample code was
roundDiv
Creates rounded corners on element , using images.
Available options are:
-
corners
- array of booleans,
specifying corners to be rounded. Starting from left top
clockwise.
-
edges
- array of booleans,
specifying edges to be rounded. Starting from top
clockwise.
-
cornerFiles
,
edgeFiles
- array of file
names
-
thickness
- array of sizes,
specifying thicknesses of corners. Starting from left top
clockwise.
OAT.SimpleFX.roundDiv(element, optionsObject)
ToBeDone
- Verify OAT.SimpleFX.roundDiv
vs OAT.SimpleFX.roundImg - original documentation had
this section header as roundImg -- but sample code was
roundDiv
Creates rounded corners on element , using stacked
DIVs. Available options are:
-
corners
- array of booleans,
specifying corners to be rounded, clockwise from top
left.
-
color
,
backgroundColor
- colors to be
used. BackgroundColor is used only for computation of
antialiasing color. Defaults to ' auto '
(inherit).
-
antialias
- boolean
value
-
size
- radius. Good values are
2-8 .
OAT.SimpleFX.shader(clicker, target, options)
Marks clicker as a button, which hides/shows
target . Target may be an array of elements.
Available options are:
-
type - (toggle)
-
0 - only hide
-
1 - only show
-
2 - both
Examples
Example 1, using OAT.SimpleFX.roundImg
ToBeDone
- Verify OAT.SimpleFX.roundImg
vs OAT.SimpleFX.roundDiv - original code had
roundDiv , but description was
roundImg
OAT.SimpleFX.shadow("myDiv", {});
OAT.SimpleFX.roundImg("myDiv",{corners:[1,1,0,0]});
OAT.SimpleFX.shader("myDiv", ["myDiv1","myDiv2"], {type:2});
Example 2, using OAT.SimpleFX.roundDiv
ToBeDone
- Verify OAT.SimpleFX.roundImg
vs OAT.SimpleFX.roundDiv - original code had
roundDiv , but description was
roundImg
OAT.SimpleFX.shadow("myDiv", {});
OAT.SimpleFX.roundDiv("myDiv", {antialias:1, size:5});
OAT.SimpleFX.shader("myDiv", ["myDiv1","myDiv2"], {type:2});