dock-n-liquid
DOCK'n'LIQUID - npm This module helps the liquid designing. It aligns the child elements to dock to its parent recursively.
APIs
CLASS
dock_n_liquid
- enables a simple liquid layout. The instance references a single html element which is the root of docking structure. The static method 'select' creates and returns an instance of this class.
STATIC METHOD
dock_n_liquid.init()
- initializes alldock
classed elements as adock_n_liquid
panel. Those will be aligned the layouts in automatic.dock_n_liquid.select(element)
- selects a html element and returnsdock_n_liquid
instance.dock_n_liquid.requestFullscreen(element)
- requests to be a fullscreen mode.dock_n_liquid.exitFullscreen()
- exits from the fullscreen mode.dock_n_liquid.detach()
- detaches the element from its layout tree.dock_n_liquid.attach()
- re-attaches the element to its layout tree.
INSTANCE METHOD
dock_n_liquid.show(state)
- shows or hides the panel.
AVAILABLE CLASS NAME for HTML ELEMENT
dock
- declares the element is the panel.top
- declares the element docks to the top of the parent element. theheight
style or attribute must be specified.left
- docks to the left.width
must be specified.right
- to the right.width
must be specified.bottom
- to the bottom.height
required.resizable
- The panel could be resized by dragging a handle generated on its edge. After the completion of resizing, awindow.resize
event will be dispatched.
EXAMPLE
Sorry, too long code....
Docking to the top menu#1 menu#2 menu#3 menu#4 menu#5 content#1 content#2 content#3 content#4 content#5 The Content that occupies the rest of client area. hide panel right show panel right MIT LICENSE
LICENSE
This software is released under the MIT License, see LICENSE