Skip to content
Branch: master
Find file History

Latest commit

Fetching latest commit…
Cannot retrieve the latest commit at this time.

Files

Permalink
Type Name Latest commit message Commit time
..
Failed to load latest commit information.
component.css
component.js
component.json
dependencies.html
example.html
picture.jpg
readme.md

readme.md

j-Layout2

  • This component is a much simple component compared to j-Layout.

Configuration:

  • parent {String} can contain parent, window or jQuery selector for closest method (default: window)
  • margin {Number} add margin for height of this component (default: 0)
  • autoresize {Boolean} enables auto-resize (default: true)

Methods:

  • IMPORTANT component.show(type) can show a specific panel for mobile devices, type can be left, right or main
  • component.resizescrollbar(panel_type) resizes a scrollbar for a specific panel
  • component.scrolltop(panel_type) scrolls to top for a specific panel

Panel types:

  • left left panel
  • right right panel
  • top top panel (it's panel on top of all panels)
  • top2 top panel and uses top key in the config (it is between left and right panel)
  • bottom bottom panel (it's panel on bottom of all panels)
  • bottom2 bottom panel and uses bottom key in the config (it is between left and right panel)
  • main main content

Layout:

Making of layout is very easy.

<div data-type="" data-size="" data-scrollbar=""></div>

Attributes:

  • data-type must contain a type of section top, top2 ,left, right, bottom, bottom2 or main
  • data-size contains a size of section LG,MD,SM,XS --> in pixels or percentage, example: 200,200,200,0 (0 means hidden) or 20% (all values will inherit 20%)

Good to know:

  • learn from example
  • each panel is section element and must contain data-type="top" attribute with type of panel
  • define panels only which you will use
  • ordering of all section elements isn't important

Author

You can’t perform that action at this time.