阿西河

所有教程

公众号
🌙
阿西河前端的公众号

我的收藏

    最近访问  (文章)

      教程列表

      抓包专区
      测试专区

      EasyUI 布局 – 在面板中创建复杂布局

      EasyUI 布局 - 在面板中创建复杂布局

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

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

      以下就是所有代码:

      <div class="easyui-panel" title="Complex Panel Layout" iconCls="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="images/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="border:0;width:100%;height:100%;resize:none">Hi,I am easyui.</textarea>
                              </div>
                              <div region="center" border="false">
                              </div>
                          </div>
                      </div>
                  </div>
              </div>
          </div>
      </div>
      

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

      卖前端学习教程

      只需几十元,就能买到培训班的内部教程!开启高薪之路!

      零基础小白阿里P7的教程都有!

      同时长期收购所有培训班的前端教程

      目录
      目录