码迷,mamicode.com
首页 > 其他好文 > 详细

layout(布局)组件

时间:2019-10-03 23:51:39      阅读:231      评论:0      收藏:0      [点我收藏+]

标签:you   方式   exp   remove   cti   标签   tle   splay   nbsp   

一、依赖于 Panel(面 板)组件和 resizable(调整大小)组件。

二、class加载方式

   <div id="box" class="easyui-layout" style="height: 600px;width: 400px">
    <div data-options="region:‘north‘" title="north" style="height: 100px;"></div>
    <div data-options="region:‘south‘" title="south" style="height: 100px;"></div>
    <div data-options="region:‘west‘" title="west" style="width: 100px"></div>
    <div data-options="region:‘east‘" title="east" style="width: 100px"></div>
    <div data-options="region:‘center‘" title="center"></div>
   </div>

三、js加载方式

  <div id="box" style="height: 600px;width: 400px">
  <div data-options="region:‘north‘,maxHeight:‘200‘"
    border=‘false‘
    iconCls=‘icon-add‘
    title=‘north‘
    href="index.html"
    collapsible="false"
    style ="height: 100px;"></div>
  <div data-options="region:‘south‘" title="south" style="height: 100px;"></div>
  <div data-options="region:‘west‘" title="west" style="width: 100px"></div>
  <div data-options="region:‘east‘" title="east" style="width: 100px"></div>
  <div data-options="region:‘center‘" title="center"></div>
    </div>
  $(function () {
    $("#box").layout({
    //属性
      fit:true,//如果设置为 true,布局组件将自适应父容 易。当使用 body 标签创建布局的时候,整 个页面会自动最大。默认为 false。值为boolean
    });
    //方法
      console.log($(‘#box‘).layout(‘panel‘, ‘north‘));//返回指定面板
      $(‘#box‘).layout(‘collapse‘, ‘north‘);//设置指定面板折叠,参数可用值有 : ‘north‘,‘south‘,‘east‘,‘west‘。
      $(‘#box‘).layout(‘expand‘, ‘north‘);//设置指定面板展开,参数可用值有 : ‘north‘,‘south‘,‘east‘,‘west‘。
      $(document).click(function () { $(‘#box‘).layout().css(‘display‘, ‘block‘); $(‘#box‘).layout(‘resize‘); });////重新调整布局和大小
      $(‘#box‘).layout(‘add‘, { title : ‘center title‘, region : ‘center‘, });//新增一个面板
      $(‘#box‘).layout(‘remove‘, ‘north‘);////删除指定面板
    })

layout(布局)组件

标签:you   方式   exp   remove   cti   标签   tle   splay   nbsp   

原文地址:https://www.cnblogs.com/Alaic2052243080/p/11588087.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!