jQuery EasyUI使用教程之建立Web頁面的邊框佈局

<jQuery EasyUI最新版下載>

本教程主要爲你們演示如何使用jQuery EasyUI建立Web頁面的邊框佈局。該邊框佈局提供五個區域：east、west、north、south、center，如下是一些常見的用法：

• north區域能夠用於顯示一個網站的標語

• south區域可用於顯示版權及其餘注意事項

• west區域可用於顯示導航菜單

• east區域可用於顯示促銷項目

• center區域可用於顯示主要內容

查看演示

想要應用一個佈局，首先你應該確認一個佈局容器，而後定義一些區域。佈局中必須包含至少一個center區域。下面是一個佈局示例：

< 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 >

咱們在一個"div"容器裏建立一個邊框佈局。佈局將一個容器拆分爲兩個部分，左邊是一個導航菜單，右邊是主要內容。

最後，咱們寫一個onclick事件處理函數來檢索數據，「showcontent」功能很簡單：

function showcontent(language){

$( '#content' ).html( 'Introduction to ' + language +  ' language' );

}

下載該EasyUI示例：easyui-layout-demo.zip

有興趣的朋友能夠點擊查看更多有關jQuery EasyUI的文章！