jquery-easyui中创建复杂的布局效果

jquery-easyui中利用panel, layout等插件可以做出很复杂的布局效果，通常不需要编写JS代码。以一个MSN的消息框为例子，看一下效果图：

 

 

设计这样的布局只需要编写HTML就行了，代码如下：

 

<div class="easyui-panel" title="Complex Panel Layout" icon="icon-search" collapsible="true" style="padding:5px;width:500px;height:250px;">
    <div class="easyui-layout" fit="true">
        <div region="north" border="false" class="p-search">
            <label>Search:</label><input></input>
        </div>
        <div region="center" border="false">
            <div class="easyui-layout" fit="true">
                <div region="east" border="false" class="p-right">
                    <img src="msn.gif"/>
                </div>
                <div region="center" border="false" style="border:1px solid #ccc;">
                    <div class="easyui-layout" fit="true">
                        <div region="south" split="true" border="false" style="height:60px;">
                            <textarea style="overflow:auto;border:0;width:100%;height:100%;">Hi,I am easyui.</textarea>
                        </div>
                        <div region="center" border="false">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

 

我们看到，不需要编写JS就能够拥有设计复杂页面布局的能力。

 

原文及下载地址：http://jquery-easyui.wikidot.com/tutorial:panel

评论

14 楼 jerry 2013-01-16  

layout比extjs中的差远了。

13 楼 stworthy 2012-04-17  

改变region做什么。

12 楼 qihongce 2012-04-17  

如果在js中改变region的属性值，好像没效果呀！！

11 楼 lgstarzkhl 2010-08-31  

混淆这点挺闹心

10 楼 ifanvip 2010-05-15  

lucky16 写道

楼主可以讲一下esayui的学习方法吗。  没有找到文档，很痛苦啊啊！

这是我一个月前做的文档，欢迎下载
http://www.iteye.com/topic/644040

9 楼 stworthy 2010-05-14  

文档在这里啊
http://jquery-easyui.wikidot.com/

8 楼 lucky16 2010-05-13  

楼主可以讲一下esayui的学习方法吗。  没有找到文档，很痛苦啊啊！

7 楼 唯快不破 2010-03-21  

楼主，你的这段代码在ie8中会报“参数错误”的js错误，指向jquery1.4.2，显示也有问题，但在firefox中正常。

6 楼 xiogxiog 2010-03-06  

为什么http://www.etmvc.cn好久访问不了了

5 楼 arienya 2010-03-03  

没错，不开源不能用，没有后期保障。

4 楼 zhajie 2010-02-26  

用了一下demo，tab例子,多点几次，就出现，out of memory 在17行

不敢用！

3 楼 sinoyster 2010-02-26  

不是GPLv3的么？

2 楼 mickey0811 2010-02-26  

是漂亮~！但是代码混淆了，也没有文档，不太敢用

1 楼 yuyue618 2010-02-26  

这两天也看到easyui的demo感觉比官方ui用着更爽啊