JQuery Easyui using the tutorial to create a border layout for a Web page

<jquery Easyui Latest version download >

This tutorial shows you how to create a border layout for a Web page using jquery easyui. The border layout provides five areas: East, West, north, south, center, and here are some common uses:

• North area can be used to display a banner for a website

• South area can be used to display copyright and other considerations

• The West area can be used to display the navigation menu

• East area can be used to display promotional items

• The center area can be used to display the main content

View Demo

To apply a layout, you should first confirm a layout container and then define some areas. The layout must contain at least one center area. Here is an example layout:

< div class = "easyui-layout" style = "width:400px;height:200px;" > < div region = "west" split = "true" title = "Navigator" style = "width:150px;" > < p style = "padding:5px;margin:0;" >Select language:</ p > < ul > < li >< a href = "javascript:void(0)" onclick = "showcontent(‘java‘)" >Java</ a ></ li > < li >< a href = "javascript:void(0)" onclick = "showcontent(‘cshape‘)" >C#</ a ></ li > < li >< a href = "javascript:void(0)" onclick = "showcontent(‘vb‘)" >VB</ a ></ li > < li >< a href = "javascript:void(0)" onclick = "showcontent(‘erlang‘)" >Erlang</ a ></ li > </ ul > </ div > < div id = "content" region = "center" title = "Language" style = "padding:5px;" > </ div > </ div >

We create a border layout in a "div" container. The layout splits a container into two parts, the left side is a navigation menu, and the right side is the main content.

Finally, we write an OnClick event handler function to retrieve the data, and the "showcontent" function is simple:

function showcontent(language){ $( ‘#content‘ ).html( ‘Introduction to ‘ + language +  ‘ language‘ ); }

Download the Easyui example: Easyui-layout-demo.zip

interested friends can click to see more articles about jquery Easyui !

JQuery Easyui using the tutorial to create a border layout for a Web page