easyui layout 自适应

时间：2015-1-24类别：Web前端

easyui layout 自适应

easyui layout 自适应

一、常见的easyui layout 自适应的情况和解决方法

1、在项目中用到了datagrid

如果界面比较简单－－－只有一个datagrid只需要把它的属性fit 设置为true就能实现自动适应窗体。如果在datagrid上方还有其他li的话，li 就会把datagrid挤压到窗体的下方。如果datagrid有分页控件，分页控件就看不到了。这个时候就应该用 easyui-layout来分隔窗体来使具体的内容放在easyui-layout不同的部分。这样就能很好的解决自适应问题。

例如

HTML 代码复制


 <li class="easyui-layout"data-options="fit:true">

            <li data-options="region:'north'" style="height:100px">

                <li>查询条件</li>

            </li>

            <li data-options="region:'center'">

                <table class="easyui-datagrid" fit="true"></table>

            </li>

        </li>

2、基于body标签的easyui-layout当浏览器窗口大小改变时,easyui-layout可以根据窗口的大小来调整自己的大小.基于li标签的easyui-layout如果想拥有上述功能必须设置easyui-layout的属性fit等于true.

例如

HTML 代码复制


      <li class="easyui-layout"data-options="fit:true">

            <li data-options="region:'north'" style="height:100px">

                <table id="part1"></table>

            </li>

            <li data-options="region:'center'">

                <table id="part2"></table>

            </li>

        </li>

二、easyui布局使用备注

在html中定义easyui时，下面两种写法是一样的。即easyui控件的属性可以写在dataoptions属性里，也可以把这些属性写到标签上。

方式一

HTML 代码复制


        <li class="easyui-layout"data-options="fit:true">

            <li data-options="region:'north'" style="height:100px">

                <table id="part1"></table>

            </li>

            <li data-options="region:'center'">

                <table id="part2"></table>

            </li>

        </li>

方式二

HTML 代码复制


<li class="easyui-layout"fit="true">

　　<li region="north"style="height:100px;">

　　　　<table id="part1"></table>

　　</li>

　　<li region="center">

            <table id="part2"></table>

　　</li>

</li>

标签：

easyui

easyui layout 自适应

easyui layout 自适应

猜您喜欢

热门推荐