EasyUI官方文档学习笔记

所需CDN：

<link rel="stylesheet" type="text/css" href="http://www.jeasyui.net/Public/js/easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="http://www.jeasyui.net/Public/js/easyui/themes/icon.css">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.1.min.js"></script>
<script type="text/javascript" src="http://www.jeasyui.net/Public/js/easyui/jquery.easyui.min.js"></script>

第一篇 布局

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

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

1.1 为网页创建边框布局

html代码：

<%--确定一个容器--%>
    <div class="easyui-layout box">
        <div region="west" class="test" split="true" title="Navigator" style="width:150px;background-color:Red;">
            <p>Select language</p>
            <ul>
                <li><a href="javascript:void(0)" onclick="showcontent('java')">java</a></li>
                <li><a href="javascript:void(0)" onclick="showcontent('csharp')">C#</a></li>
                <li><a href="javascript:void(0)" onclick="showcontent('php')">php</a></li>
                <li><a href="javascript:void(0)" onclick="showcontent('python')">python</a></li>

            </ul>
        </div>
        <div class="test" id="content" region="center" title="Language" style="padding:5px;background-color:blue;"></div>
    </div>

css代码：

<style type="text/css">
    .easyui-layout.box{width:400px;height:200px;}
    <%--.panel-title{background-color:Red!important;}--%>
    .easyui-layout.box.layout>.panel.layout-panel.layout-panel-west.layout-split-west>.panel-header{color:Yellow;padding:0px;background-color:Blue;}
    .easyui-layout.box.layout>.panel.layout-panel.layout-panel-west.layout-split-west>.panel-header>.panel-title{background-color:Blue;}
</style>

js代码：

<script type="text/javascript" language="javascript">
        function showcontent(language) {
            $('#content').html('Introduce to' + language + 'language');
        }
    </script>

理解：

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

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

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

代码：

<div class="easyui-panel" title="复杂的面板布局" iconCls="icon-search" collapsible="true" style="padding:5px;width:500px;height:250px;"></div>

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

代码：

<div class="easyui-layout" fit="true">
        <div region="north" border="false" class="p-search">
            上部分搜索框
        </div>

        <div region="center" border="false">
            <div class="easyui-layout" fit="true">
                <div region="east" border="false" class="p-right">
                    右部的图片
                </div>

                <div region="center" border="false" style="border:1px solid #ccc;">
                    <div class="easyui-layout" fit="true">
                        <div region="south" split="true" border="false" style="height:60px;">
                            底部的输入部分
                        </div>
                        <div region="center" border="false">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

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代码里)：

<label>Search:</label><input></input>

右部的图片

右部的图片：

![](images/msn.gif)

底部的textarea

底部的textarea：

<textarea style="border:0;width:100%;height:100%;resize:none">Hi,I am easyui.</textarea>

完成界面

第二篇　EasyUI 菜单与按钮

2.1 Menu Button

代码：

<div style="background:#fafafa;padding:5px;width:200px;border:1px solid #ccc">
        <a href="#" class="easyui-menubutton" menu="#mm1" iconCls="icon-edit">Edit</a>
        <a href="#" class="easyui-menubutton" menu="#mm2" iconCls="icon-help">Help</a>
    </div>
    <div id="mm1" style="width:150px;">
        <div iconCls="icon-undo">Undo</div>
        <div iconCls="icon-redo">Redo</div>
        <div class="menu-sep"></div>
        <div>Cut</div>
        <div>Copy</div>
        <div>Paste</div>
        <div class="menu-sep"></div>
        <div iconCls="icon-remove">Delete</div>
        <div>Select All</div>
</div>
<div id="mm2" style="width:100px;">
    <div>Help</div>
    <div>Update</div>
    <div>About</div>
</div>

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

第三篇 EasyUI 树形菜单

3.1 使用标记创建树形菜单

简单的树形菜单

代码：

<ul class="easyui-tree">
        <li>
            <span>Folder</span>
            <ul>
                <li>
                    <span>Sub Folder 1</span>
                    <ul>
                        <li><span>File 11</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>

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

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

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