easyui panel自适应问题

项目中要用到easyui,使用也有几年时间了,刚开始使用还不错,毕竟只是简单的增删改查数据,不过到后面越来越觉得easyui不如extjs了,好多复杂一点的问题,easyui表现就力不从心了,题外话就讲到这吧,下面看看这个问题是如何解决的:

$(function () {
   $.fn.zTree.init($("#tree"), setting);
    initTopoConfig();
    showTopo(0);
    stage.wheelZoom = 0.85; // 设置鼠标缩放比例
    $("#undo").hide();
});

//初始化拓扑图配置
function initTopoConfig() {
    $("#center").append(‘‘);
    var canvas = document.getElementById(‘canvas‘);
    $("#main").panel({
        onResize: function (w, h) {
            canvas.width = w-30;
            canvas.height = h - 20;
        }
    });
    stage = new JTopo.Stage(canvas);
    scene = new JTopo.Scene(stage);
    setScene();
}
<body onselectstart="return false" class="easyui-layout" style="margin: -1px;">
    <div id="myposition" data-options="region:‘west‘,split:true,title:‘交换机列表‘" style="width: 250px;">
        <ul id="tree" class="ztree">
        </ul>
    </div>
    <div id="center" data-options="region:‘center‘,border:false,fit:true">
        <div id="main" fit="true">
            <div id="tool" style="background-color: #f5f5f5; border-bottom: 1px solid #ddd">
                <table>
                    <tr>
                        <td>
                            <a href="#" class="easyui-linkbutton" iconcls="icon-add" plain="true" onclick="addRouter()">
                                添加路由</a>
                        </td>
                        <td>
                            <a href="#" class="easyui-linkbutton" iconcls="icon-add" plain="true" onclick="addChildrenTopo()">
                                添加子图</a>
                        </td>
                        <td>
                            <a href="#" class="easyui-linkbutton" iconcls="icon-save" plain="true" onclick="save()">
                                保存</a>
                        </td>
                        <td>
                            <a href="#" class="easyui-linkbutton" iconcls="icon-zoomin" plain="true" onclick="zoomout()">
                                放大</a>
                        </td>
                        <td>
                            <a href="#" class="easyui-linkbutton" iconcls="icon-zoomout" plain="true" onclick="zoomin()">
                                缩小</a>
                        </td>
                        <td>
                            <a href="#" class="easyui-linkbutton" iconcls="icon-resize" plain="true" onclick="fitContent()">
                                自适应</a>
                        </td>
                        <td>
                            <a href="javascript:void(0)" class="easyui-linkbutton" plain="true" style="text-align: center"
                                data-options="iconCls:‘icon-reload‘" onclick="javascript:location.reload();">刷新页面</a>
                        </td>
                        <td id="undo">
                            <a href="#" class="easyui-linkbutton" iconcls="icon-undo" plain="true" onclick="before()">
                                返回上一级</a>
                        </td>
                    </tr>
                </table>
            </div>
            <canvas id="canvas"></canvas>
        </div>

总结:要把id为tool的div放到main里面,要不然就会出现自适应不成功的问题。

时间: 2024-10-11 18:41:36

easyui panel自适应问题的相关文章

easyui 布局自适应

最近在把以前写的一个项目改成用easyui做前端.过程中遇到了不少问题.其中一个就是datagrid不能很好的布局.想了好多办法都有局限.最后想到会不会是布局(easyui-layout)的问题,经过实验,最后问题解. 1:比如在项目中用到了datagrid.如果界面比较简单---只有一个datagrid只需要把它的属性fit 设置为true就能实现自动适应窗体.如果在datagrid上方还有其他div的话,div 就会把datagrid挤压到窗体的下方.如果datagrid有分页控件,分页控件

2.4 easyui - panel的使用

<div id="p" class="easyui-panel" title="My Panel"             style="width:500px;height:150px;padding:10px;background:#fafafa;"           data-options="iconCls:'icon-save',closable:true,                    c

修改easyui panel 默认样式

有这么个需求需要修改easyui panel头部中的背景色.于是根据panel中的最终被浏览器解析出来的类名,直接修改这个css样式,设置backgroud-color这个属性,发现不管用. 于是,就根据panel最后被解析出来的样式类名,手动的建这个类名,然后把背景色修改为白色,发现也无济于事. 经过摸索有两种办法: 1,在引入的easyui.css样式表中,添加没有背景色的样式,下面的样式必须放到easui.css中去,注意:单击建一个css文件,并把下面的代码拷过来就可以了.这个缺点是严重

网站前端_EasyUI.基础入门.0002.使用EasyUI Panel组件的最佳姿势?

1. 基础面板 <div id="p" class="easyui-panel" style="padding: 10px;" data-options="width:700,height:250,title:'基础面板'">     <p>jQuery EasyUI framework helps you build your web pages easily.</p>     <u

EasyUI - Panel 面板控件

效果: html代码: <div id="p" style="padding: 10px;"> <p>panel content.</p> <p>panel content.</p> </div> JS代码: 其中有些属性,之间的使用有冲突. tools属性,与href属性,与extractor属性,与loadingMessage属性,最为有用. $(function () { $('#p').

网站前端_EasyUI.基础入门.0002.带你玩转jQuery EasyUI Panel组件 ?

简单介绍: 说明: Panel面板常当作其它内容的容器,可用于创建包含Layout布局/Tabs选项卡/Accordion折叠面板等基础组件,还提供了内置的折叠/关闭/最大化/最小化的行为,你可以将它嵌入到网页的任何位置. 基础用法: <div id="p" class="easyui-panel" title="面板-标题" data-options="iconCls:'icon-save',closable:true,coll

EasyUI datagrid自适应问题解决

在使用js 动态创建EasyUI datagrid时,如果设置fit为true,在显示的时候数据的高度为固定高度不能自适应 解决办法是把fit设为false. 但这样设置后又有个问题,如果把columns定义在js里面,及时宽度设置为百分百,单元格的宽度不能随着浏览器的大小而变化 解决办法是把columns定义在页面html上. 最后的代码如下: html代码 1 <table id="grid" title="考勤数据" style="width:

EasyUI学习笔记之panel

<easyUI panel 属性:> <!--引入easyUI panel 组件 设置宽,高,定义标题(默认在左上角),设置图标iconCls:'icon-ok',引入工具tools:'#tt'--> <id="tt",这个标签内的内容被当做tool属性的值,做了添加和编辑的JS操作事件> <div class="easyui-panel" style="width:300px;height:200px"

JS各种iframe弹出控件没有滚动条或者失灵的解决办法

举例: easyui panel layer 多数的配置是 iframe : true 或者 iframeScrolling:true ,但是设置后滚动条仍然失灵 解决办法,在iframe页面 中加入框架DIV style设置为 width=100%;height=100%;overflow:auto; 原文链接 作程的博客 http://www.zuocheng.net/it/?p=208