jQuery EasyUI 布局 - 为网页创建边框布局

忘是亡心i 2024-03-23 16:20 38阅读 0赞

边框布局（border layout）提供五个区域：east、west、north、south、center。以下是一些通常用法：

*  north 区域可以用来显示网站的标语。
 *  south 区域可以用来显示版权以及一些说明。
 *  west 区域可以用来显示导航菜单。
 *  east 区域可以用来显示一些推广的项目。
 *  center 区域可以用来显示主要的内容。

![156805d1c89ad92116d847578205f2c3.png][]

为了应用布局（layout），您应该确定一个布局（layout）容器，然后定义一些区域。布局（layout）必须至少需要一个 center 区域，以下是一个布局（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)" οnclick="showcontent('java')">Java</a></li>
>                     <li><a href="javascript:void(0)" οnclick="showcontent('cshape')">C#</a></li>
>                     <li><a href="javascript:void(0)" οnclick="showcontent('vb')">VB</a></li>
>                     <li><a href="javascript:void(0)" οnclick="showcontent('erlang')">Erlang</a></li>
>                 </ul>
>             </div>
>             <div id="content" region="center" title="Language" style="padding:5px;">
>             </div>
>         </div>

我们在一个 <div> 容器中创建了一个边框布局（border layout），布局（layout）把容器切割为两个部分，左边是导航菜单，右边是主要内容。

最后我们写一个 onclick 事件处理函数来检索数据，'showcontent' 函数非常简单：

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

[156805d1c89ad92116d847578205f2c3.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/23/fac197639b99416a98447b79cba0d6a2.png