Build border layout for web pages

Tutorial » Build border layout for web pages

The border layout providers five regions: east,west,north,south,center. Below is some normal usage:

  • The north region can be used for a web site banner.
  • The south region can be used for copyright and other notes.
  • The west region can be used for navigation menu.
  • The east region can be used for promotion items.
  • The center region can be used for main content.

To apply a layout you should confirm a layout container and then defines some region. The layout must has at least a center region. Below is a layout example:

We build a border layout in a <div> container. The layout split a container into two part, the left is a navigation menu and right is a main content.

Finally we write an onclick event handle function to retrive data, the 'showcontent' function is very simple:

Download the EasyUI example:

easyui-layout-demo.zip