EasyUI官方文档学习笔记

所需CDN：

第一篇布局

边框布局（border layout）提供五个区域：east、west、north、south、center。以下是一些通常用法：

north 区域可以用来显示网站的标语。
south 区域可以用来显示版权以及一些说明。
west 区域可以用来显示导航菜单。
east 区域可以用来显示一些推广的项目。
center 区域可以用来显示主要的内容。

1.1 为网页创建边框布局

html代码：

<%--确定一个容器--%>
    
        
            Select language
            
                java
                C#
                php
                python

css代码：

js代码：

理解：

1. href="javascript:void(0)"与href="#"相比，便是不刷新跳转
2. 此处的样式修改并不好修改，由于是封装在内部的属性，如果要对某一个panel进行样式修改，需要通过调试界面找到自己能定义到的一个id或者class，然后一层一层找下去进行修改，这样有一个不好的地方就是后期如果在里面添加节点或者删除节点，样式就失效了……这里面如果对相同的class一起重新加载样式的方式简单一些，可用！important进行修改，或者通过jq选择器动态修改。

1.2 EasyUI 在面板中创建复杂布局

第一步：先创建一个面板，名字：复杂的面板布局图标：icon-search 可折叠：collapsible="true"

代码：

第二步：面板已经完成，开始添加布局

代码：

css：

.p-search{
            background:#fafafa;
            padding:5px;
            border:1px solid #ccc;
            border-bottom:0;
            overflow:hidden;
        }
        .p-search input{
            width:300px;
            border:1px solid #ccc;
            background: #fff url('images/search.png') no-repeat right top;
        }
        .p-right{
            text-align:center;
            border:1px solid #ccc;
            border-left:0;
            width:150px;
            background:#fafafa;
            padding-top:10px;
        }

用css对每一块进行样式修改，因为宽度好高度未指定，可能对某一块进行了覆盖……
在div的class为eassyui-layout里面，region的取值理解：

** center:布局的核心部分**
north:浮动到center的上方——float:top(没有的哈)
south：浮动到center的下方——float:bottom(没有的哈)
west：浮动到center的左方——float:left
east：浮动到center的右方——float:right
第三步：为每个框里面添加相关内容

头部搜索框

搜索框(样式已经在上面的css代码里)：

Search:

右部的图片

右部的图片：

![](images/msn.gif)

底部的textarea

底部的textarea：

Hi,I am easyui.

完成界面

第二篇　EasyUI 菜单与按钮

2.1 Menu Button

代码：


        Edit
        Help
    
    
        Undo
        Redo
        
        Cut
        Copy
        Paste
        
        Delete
        Select All


    Help
    Update
    About

菜单与按钮在这里并没有用到js和css，内部已经将easyui-menubutton这个class封装好了。如何修改样式在第一篇已经尝试过了……在此做个简单的了解……

第三篇 EasyUI 树形菜单

3.1 使用标记创建树形菜单

简单的树形菜单

代码：


        
            Folder
            
                
                    Sub Folder 1
                    
                        File 11
                        File 12
                        File 13
                    
                
                File 2
                File 3
            
        
        File21

除了在第一个ul里面添加了一个easyui的类名，其他的跟普通的列表嵌套是一样的……此处也就是将列表的修饰变成的图标，实质还是列表嵌套。

第四篇 Easy UI与Ajax联合使用，并通过后端获取数据库数据

此节参看企业管理系统（传智播客）,这里在使用mvc的同时，很好的阐述了easy ui的使用方式。

公众号.png