Options
When you specify an itemBox on your page you write something like this:
<div id="mybox" class="itemBox drag expand" style=""> <p>here is the content</p> </div>
You can consider the classlist as a set of options.
classlist
- itembox
- Must allways be present
- expand
- Lets you expand/unexpand the itemBox
- drag
- Lets yo drag the box around on the page
- on
- It will initially be expanded. (Default when you have no expand)
- remember
- The boxes position and expand-state will be saved in localstorage
- type-XXX
- XXX is a name of your choice that will be copied and used to tag the wrapper and you may write style set for this class
- kill
- The first unexpand will remove the itembox completely and it must be programmed to reappear
- no-header
- The header will never show, and you may drag by pointing at the content, if drag is set.
All other class names than those mentioned above will be copied to the inner content-element
style
- position
- style may contain position absolute, relative or fixed if you use drag
- display
- none in which case the itembox is invisble and it must be programmed to appear. This is usefull in popup-cases
- width
- You can drop width in style and let the content decide but it is a good idea to define it so you get a reasonable header in itemBoxes that is not on
You can also use positioning values (left,top,right,bottom) to give the box an initial position.
Stylesheet
On module Styles you will find the comlete stylesheet distributed with iBox. The code below should be considered a kind of template or master for defining your own.
sample.css