layout(布局)组件

Posted alaic2052243080

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了layout(布局)组件相关的知识,希望对你有一定的参考价值。

一、依赖于 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(布局)组件的主要内容,如果未能解决你的问题,请参考以下文章

第二百零二节,jQuery EasyUI,Layout(布局)组件

vue-grid-layout组件的改装--暴露布局方法

ALearning第四章 Android Layout组件布局

unity GUI Layout 组件(全)

Grid for layout, Flexbox for components Grid 用于布局,Flexbox 用于组件

Android UI布局之区分 android:gravity 和 android:layout_gravity