easyui学习

1.  引入必要的文件

　　

//引入easyUI核心UI文件css
<link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css">   
//引入easyUI图标文件
<link rel="stylesheet" type="text/css" href="easyui/themes/icon.css">   
//引入jQuery核心库，在使用时需要去除版本号
<script type="text/javascript" src="easyui/jquery-1.7.2.min.js"></script>   
//引入jQuery easyUI 核心库
<script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>  
//引入easyUI中文提示信息
<script type="text/javascript" src="easyui/locale/easyui-lang-zh_CN.js"></script> 
//引入自己开发的js文件
<script type="text/javascript" src="js/index.js"></script>

 

2. Layout（布局）

布局容器有5个区域：北、南、东、西和中间。中间区域面板是必须的，边缘的面板都是可选的。每个边缘区域面板都可以通过拖拽其边框改变大小，也可以点击折叠按钮将面板折叠起来。布局可以进行嵌套，用户可以通过组合布局构建复杂的布局结构。

1. 通过标签创建布局

为<div/>标签增加名为'easyui-layout'的类ID。

region属性控制div的布局和地图的方向一样

中间必不可少 split属性：是否可拉伸

<div id="cc" class="easyui-layout" style="width:600px;height:400px;">   
    <div data-options="region:'north',title:'North Title',split:true" style="height:100px;"></div>   
    <div data-options="region:'south',title:'South Title',split:true" style="height:100px;"></div>   
    <div data-options="region:'east',iconCls:'icon-reload',title:'East',split:true" style="width:100px;"></div>   
    <div data-options="region:'west',title:'West',split:true" style="width:100px;"></div>   
    <div data-options="region:'center',title:'center title'" style="padding:5px;background:#eee;"></div>   
</div>

2. 创建嵌套布局

注意：嵌套在内部的布局面板的左侧(西面)面板是折叠的。

<body class="easyui-layout">   
    <div data-options="region:'north'" style="height:100px"></div>   
    <div data-options="region:'center'">   
        <div class="easyui-layout" data-options="fit:true">   
            <div data-options="region:'west',collapsed:true" style="width:180px"></div>   
            <div data-options="region:'center'"></div>   
        </div>   
    </div>   
</body>

4. 通过ajax读取内容

布局是以面板为基础创建的。所有的布局面板都支持异步加载URL内容。使用异步加载技术，用户可以使自己的布局页面显示的内容更多更快。

<body class="easyui-layout">   
    <div data-options="region:'west',href:'west_content.php'" style="width:180px" ></div>   
    <div data-options="region:'center',href:'center_content.php'" ></div>   
</body>

折叠布局面板

$('#cc').layout();    
// collapse the west panel    
$('#cc').layout('collapse','west');

添加西侧区域面板和工具菜单按钮

$('#cc').layout('add',{    
    region: 'west',    
    width: 180,    
    title: 'West Title',    
    split: true,    
    tools: [{    
        iconCls:'icon-add',    
        handler:function(){alert('add')}    
    },{    
        iconCls:'icon-remove',    
        handler:function(){alert('remove')}    
    }]    
});

 

posted @ 2018-04-13 09:50  逐风一缕  阅读(144)  评论(0)    收藏  举报