easyui 入门讲解

EasyUI：

jQuery EasyUI是一组基于jQuery的UI插件集合体，而jQuery EasyUI的目标就是帮助web开发者更轻松的打造出功能丰富并且美观的UI界面。开发者不需要编写复杂的javascript，也不需要对css样式有深入的了解，开发者需要了解的只有一些简单的html标签。

EasyUI，Bootstrap，LayUI之间的区别：

EasyUI：快速开发，能满足项目所有的需求，但不能支持响应式。

Bootstrap：框架美观性强，可提供响应式，支持手机，平板，电脑，要收费。

LayUI：免费 比较美观，比EasyUI好看，但是Bug比较多。

EasyUI使用：下载程序库并导入EasyUI的CSS和Javascript文件到您的页面。

<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/static/js/easyui5/themes/default/easyui.css">   
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/static/js/easyui5/themes/icon.css ">   
<script type="text/javascript" src="${pageContext.request.contextPath}/static/js/easyui5/jquery.min.js"></script>   
<script type="text/javascript" src="${pageContext.request.contextPath}/static/js/easyui5/jquery.easyui.min.js"></script> 
<script type="text/javascript" src="${pageContext.request.contextPath}/static/js/index.js"></script> 

注意：需要更改并修改css的目录

Layout（布局）

使用$.fn.layout.defaults重写默认值对象。

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

<div id="cc" class="easyui-layout" style="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="100px;"></div>   
    <div data-options="region:'west',title:'West',split:true" style="100px;"></div>   
    <div data-options="region:'center',title:'center title'" style="padding:5px;background:#eee;"></div>   
</div>  

Tree（树）

树控件在web页面中一个将分层数据以树形结构进行显示。它提供用户展开、折叠、拖拽、编辑和异步加载等功能。

使用案例

树控件使用<ul>元素定义。标签能够定义分支和子节点。节点都定义在<ul>列表内的<li>元素中。以下显示的元素将被用作树节点嵌套在<ul>元素中。  

<ul id="tt" class="easyui-tree">   
    <li>   
        <span>Folder</span>   
        <ul>   
            <li>   
                <span>Sub Folder 1</span>   
                <ul>   
                    <li>   
                        <span><a href="#">File 11</a></span>   
                    </li>   
                    <li>   
                        <span>File 12</span>   
                    </li>   
                    <li>   
                        <span>File 13</span>   
                    </li>   
                </ul>   
            </li>   
            <li>   
                <span>File 2</span>   
            </li>   
            <li>   
                <span>File 3</span>   
            </li>   
        </ul>   
    </li>   
    <li>   
        <span>File21</span>   
    </li>   
</ul>  

Tabs（选项卡）

选项卡显示一批面板。但在同一个时间只会显示一个面板。每个选项卡面板都有头标题和一些小的按钮工具菜单，包括关闭按钮和其他自定义按钮。

通过标签可以更容易的创建选项卡，我们不需要写任何Javascript代码。只需要给<div/>标签添加一个类ID'easyui-tabs'。每个选项卡面板都通过子<div/>标签进行创建。

<ul id="tt"></ul>  
    </div>
    <div data-options="region:'east',split:true,collapsed:true,title:'East'" style="100px;padding:10px;">east region</div>
    <div data-options="region:'south',border:false" style="height:50px;background:#A9FACD;padding:10px;">south region</div>
    <div data-options="region:'center',title:'Center'">
    <div id="menuTabs" class="easyui-tabs" style="">   
    <div title="Tab1" style="padding:20px;display:none;">   
       欢迎使用   
    </div> 

下面的代码演示如何使用Javascript创建选项卡，当该选项卡被选择时将会触发'onSelect'事件。

$('#tt').tabs({    
    border:false,    
    onSelect:function(title){    
        alert(title+' is selected');    
    }    
});  

添加一个新的包含小工具菜单的选项卡面板。添加判断可避免重复添加；

$(function(){
    $('#tt').tree({    
    
        url:'menuAction.action?methodName=treeMenu',
        onClick:function(node){
            var content = '<iframe scrolling="no" frameborder="0" src="'+node.attributes.menuURL+'" width="99%" height="99%"></iframe>';
            if($('#menuTabs').tabs('exists',node.text)){
                $('#menuTabs').tabs('select',node.text);
            }
            else{
                $('#menuTabs').tabs('add',{    
                    title:node.text,    
                    content:content,    
                    closable:true,    
                    tools:[{    
                        iconCls:'icon-mini-refresh',    
                        handler:function(){    
                            alert('refresh');    
                        }    
                    }]    
                });  
            }
        }
    });  
    
})