Documentation
JESS Framework Usage
To link the JESS library to your HTML document you need to link the core jess.js script, eventually followed by module-specific code (see below). jQuery framework must be loaded before the JESS library.
Example:
<head> <script type="text/javascript" src="js/jquery-1.3.min.js"></script> <script type="text/javascript" src="js/jess.min.js"></script> </head>
Module: StyledBox
The styledBox module is made to easy create virtually any box style. The idea is to use a 9-sliced background image, put its corner slices to respective box corners, fill the box edges by repeating the edge slices, and fill the center part by repeating the central slice.
Usage
There must be both jQuery and JESS framework script code loaded. Then some box style can be defined (by calling the JE$$.styledBox() method, see below). Once there is a box style defined and the DOM of the document is ready, all HTML elements of the class "JESS-styledbox-id" (where "id" is ID of an existing box style) are automatically processed to use the proper style. Example:
<div class="JESS-styledbox-blueround"> ... </div>
Available Methods
JE$$.styledBox(options)- defines new box style, see below.
JE$$.styledBoxReplace( string selector, string oldStyleID, string newStyleID)-
replaces the style of all boxes matching the selector to another style. Can be used in event handlers to create catchy mouseover efects etc.
Example:JE$$.styledBoxReplace('#menu.selected', 'greenwithshadow', 'bluewithbiggershadow'); JE$$.apply( 'styledBox', string styleID)-
common public framework method to manually apply a style. In this case the first parameter must be
'styledBox'. IfstyleIDis set, only given style is applied, leave it empty to (re)apply all styles. This method may be useful i.e. when new boxes are dynamicaly added to the document and should be styled, or if the style should be re-applied for some reason.
Example:JE$$.apply('styledBox');
Background Image Slices
There must be a folder containing those 9 slices. These are image files named 1.ext to 9.ext, where "ext" is the file extension (usually "png" or "jpg"). With this set of images, a box style must be defined.
Note: There will be an online service for creating slices and style definitions automatically. Since it's not available yet, coders have to create the slices and style definitions themselves, manually.
Style Definition
The style definition is a piece of Javascript code, the syntax is:
JE$$.styledBox(options);
where options is an object containing following keys:
- string
id - an unique ID of the styledBox style. If a style with an existing ID is created, the previous style of this ID is overwritten.
- string
border -
fallback 'border' CSS property used if the 9-image background can't be applied (e.g. unsupported browser)
Example:'1px solid green'
Default value:'1px solid black' - string
bgColor -
fallback 'background-color' CSS property used if the 9-image background can't be applied (e.g. unsupported browser)
Example:'#ccffe0'
Default value:'transparent' - required string
img -
a relative URL to the folder containing image slices
Example:'img/styledboxes/blueround' - string
ext -
file extension of the image slices
Example:'jpg'
Default value:'png' - required object
width -
slice size definition, object containing values of top, right, bottom, left width of the slice, in pixels.
Example:{ top:5, right:10, bottom:15, left:10 } - int
minWidth -
minimal width of the box, in pixels.
Example:40
Default value:0 - int
minHeight -
minimal height of the box, in pixels.
Example:40
Default value:0 - string
padding -
a 'padding' CSS property applied to the box (only if the 9-image background is beeing applied).
Example:'15px 40px 25px 20px'
Default value:'0' - array
order -
slice stack order. By default, slices are stacked from 1 to 9 (top-left corner has the lowest, while bottom-right corner has the highest z-index). Changing this can be useful if slice overlapping may occur on boxes smaller than the source 9-slice image. By omitting a value you cause the respective slice won't be used - i.e. omit 5 to leave the central part of the box empty.
Example:[9,8,7,6,4,3,2,1]
Default value:[1,2,3,4,5,6,7,8,9]
Example:
<head>
<script type="text/javascript" src="js/jquery-1.3.min.js"></script>
<script type="text/javascript" src="js/jess.min.js"></script>
<script type="text/javascript">
JE$$.styledBox({
id : 'blueround',
border: '1px solid blue',
bgColor : '#ccf',
img : 'img/blueround',
ext : 'png',
width : { top:10, right:10, bottom:10, left:10 },
padding : '15px 20px',
minHeight : 20,
minWidth : 20
});
</script>
</head>
<body>
...
<div class="JESS-styledbox-blueround"> ... </div>
...
However, this is the manual approach to styled boxes creating. Once the onlice service is ready and predefined styles are used, the example will look like this:
<head> <script type="text/javascript" src="js/jquery-1.3.min.js"></script> <script type="text/javascript" src="js/jess.min.js"></script> <script type="text/javascript" src="js/jess-defs.js"></script> </head> <body> ... <div class="JESS-styledbox-blueround"> ... </div> <div class="JESS-styledbox-greenwithshadow"> ... </div> ...
Browser Support
Any modern browser (IE7+, Gecko/FF, Safari/WebKit, Opera). IE6 and older are not supported, fallback style is applied here.