课程表

jEasyUI 应用

jEasyUI 拖放

jEasyUI 菜单与按钮

jEasyUI 布局

jEasyUI 数据网格

jEasyUI 窗口

jEasyUI 树形菜单

jEasyUI 表单

jEasyUI 参考手册

工具箱
速查手册

jEasyUI 创建复杂布局

当前位置:免费教程 » JS/JS库/框架 » jQuery EasyUI

面板(Panel)允许您创建用于多种用途的自定义布局。在本实例中,我们使用面板(panel)和布局(layout)插件来创建一个 msn 消息框。

我们在区域面板中使用多个布局(layout)。在消息框的顶部我们放置一个查询输入框,同时在右边放置一个人物图片。在中间的区域我们通过设置 split 属性为 true,把这部分切割为两部分,允许用户改变区域面板的尺寸大小。

以下就是所有代码:

  1. <div class="easyui-panel" title="Complex Panel Layout" iconCls="icon-search" collapsible="true" style="padding:5px;width:500px;height:250px;">
  2. <div class="easyui-layout" fit="true">
  3. <div region="north" border="false" class="p-search">
  4. <label>Search:</label><input></input>
  5. </div>
  6. <div region="center" border="false">
  7. <div class="easyui-layout" fit="true">
  8. <div region="east" border="false" class="p-right">
  9. <img src="images/msn.gif"/>
  10. </div>
  11. <div region="center" border="false" style="border:1px solid #ccc;">
  12. <div class="easyui-layout" fit="true">
  13. <div region="south" split="true" border="false" style="height:60px;">
  14. <textarea style="border:0;width:100%;height:100%;resize:none">Hi,I am easyui.</textarea>
  15. </div>
  16. <div region="center" border="false">
  17. </div>
  18. </div>
  19. </div>
  20. </div>
  21. </div>
  22. </div>
  23. </div>

我们不需要写任何的 javascript 代码,它自己有非常强大的设计用户界面的功能。

下载 jQuery EasyUI 实例

jeasyui-layout-panel.zip

转载本站内容时,请务必注明来自W3xue,违者必究。
 友情链接:直通硅谷  点职佳  北美留学生论坛

本站QQ群:前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

W3xue 的所有内容仅供测试,对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接(目前9元/月)请联系QQ:27243702 沸活量
皖ICP备17017327号-2 皖公网安备34020702000426号