Easy ui 从小白到精通

###Easy ui 
-----
##简介
    easyui是一种基于jQuery的用户界面插件集合。
    
    easyui为创建现代化，互动，JavaScript应用程序，提供必要的功能。
    
    使用easyui你不需要写很多代码，你只需要通过编写一些简单HTML标记，就可以定义用户界面。
    
    easyui是个完美支持HTML5网页的完整框架。
    
    easyui节省您网页开发的时间和规模。
    
    easyui很简单但功能强大的。

###EasyUI中大部分的控件 都可以通过 Html / JS调出!
###使用步骤
    1.    官网下载框架包
        地址:http://www.jeasyui.com/download/index.php    

    2.    将框架包解压后, 整个文件夹复制到项目中,并将文件夹名称修改为easyui
        
    3.    引入必要的JS与CSS文件
        //引入 jQuery 核心库，这里采用的是 2.0
        <script type="text/javascript" src="easyui/jquery.min.js"></script>
        //引入 jQuery EasyUI 核心库，这里采用的是 1.3.6
        <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>
        //引入 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" />


    4.    编写组件 指定class属性即可
    


###面板-- panel

#####基础面板

    class属性设置为: easyui-panel

    title属性描述的是面板的标题


    Jquery对象的api.
    
    $obj.panel(par1);

    par1: 操作: 

        1.    open 打开
        2.    close 关闭
        3.    'expand',true : 展开
        4.    'collapse',true: 折叠

    data-options :
        描述面板功能, 键值对的集合, 键与值之间使用冒号连接, 多个键值对之间使用逗号连接
    collapsible:true//折叠工具
    minimizable:true//最小化
    maximizable:true//最大化
    closable:true"//可关闭
    tools: 
        表示一个JSON数组, 数组中应存储JSON对象, 对象应包含图标和事件

    例如:

        "tools:[{'iconCls':'icon-reload','handler':'myload'}]"


###面板嵌套

    fit: 默认为false , 设置为true 表示面板大小自适应父容器

    案例:

    <div id="div4" class="easyui-panel" style="padding:20px;width:400px;height:200px;" title="面板嵌套的效果" 
    >
        <div class="easyui-layout" data-options="fit:true">
            <div data-options="'region':'west',split:true" style="width:100px">
                左边的部分
            </div>
            <div data-options="'region':'center'">
                右边的部分
            </div>
        </div>
    </div>


###拖动组件:

    <div class="easyui-draggable"  >
       可拖动的窗体
    </div>
###可变大小Resizable 

    class属性值:easyui-resizable

    data-options:

    maxWidth:600 :最大宽度
    maxHeight:600: 最大高度


###Tooltip 提示框

    当鼠标移入时 弹出的窗体, 

    在我们原生的HTML中, 也有提示窗,但是仅仅限于超链接 , 并且样式很一般

    在easyui中, 不依赖与超链接, 任意的组件 都可以通过class=easyui-tooltip实现提示框 !

    提示的内容通过title属性指定


###进度条

    默认此进度条 总进度为100  value指定是百分比
    总是可以控制宽高的
         
        <div class="easyui-progressbar" data-options="value:80" style="width:500px;">
            
        </div>    


###消息

    messager组件是一个JS操作的组件

    使用步骤:

    $.messager.show(pra1);

    pra1: 传递一个JSON格式的对象,  常用属性如下:
        
        title: 消息的标题
        msg : 消息的内容
        showType: 消息的类型
            -    show: 普通消息
            -    slide: 滑动消息
            -    fade: 淡入消息
        timeout: 毫秒延迟

    $.messager.pregress(pra1);

    -    pra1: 传递一个JSON格式的对象, 常用属性如下:
        -    title: 标题
        -    msg  : 内容

    -    pra1: 也可以传递一个字符串 ,  表示指令:
        -    常用close  用于关闭


###选项卡

    选项卡使用的class是: easyui-tabs

    在easyui-tabs元素中添加一个div就是一个子选项卡
    子选项卡可以通过title属性来指定标题, 
    data-options添加关闭按钮
    data-options="closable:true"
    
    <div class="easyui-tabs" style="width: 800px; height: 400px">
        <!-- 
            一个div就是一个子选项
            data-options添加关闭按钮
            data-options="closable:true"
         -->
        <div title="选项卡的标题1" data-options="closable:true">
            <h3>第一个文章</h3>
        </div>
        <div title="选项卡的标题1" ">
            <h3>第一个文章</h3>
        </div>
    </div>

###折叠选项卡


    选项卡使用的class是: easyui-accordion

    在easyui-tabs元素中添加一个div就是一个子选项卡
    子选项卡可以通过title属性来指定标题, 
    data-options添加关闭按钮
    data-options="closable:true"

    <div class="easyui-accordion" style="width:800px;height:400px;">
        <div title="选项卡的标题1" data-options="closable:true" style="padding: 10px;">
            <h3>easyui-兄弟连教程</h3>
        </div>
        <div title="选项卡的标题2" style="padding: 10px;">
            <h3>easyui-兄弟连教程</h3>
        </div>
    </div>


###布局layout


    通过class=easyui-layout实现
    布局包含了东西南北中五个位置

    分别通过data-options中的region属性指定:

        北: north
        南: south
        西: west
        东: east
        中: center
    
    

    <div class="easyui-layout" style="width:800px;height:300px">
             <div data-options="region:'north',split:true" style="height:70px">1</div>
             <div data-options="region:'south',split:true" style="height:70px">2</div>
             <div data-options="region:'east',split:true" style="width:70px">3</div>
             <div data-options="region:'west',split:true" style="width:70px">4</div>
             <div data-options="region:'center',split:true" >5</div>
     </div>


###window窗口
    
    class属性值为 easyui-window

    扩展自panel 使用方式基本一致 !
    title:  窗口标题, 类型为string

    重写了一些data-options属性 :
    collapsible: 是否可折叠 , 类型boolean 默认true
    minimizable: 是否显示最小化按钮 , 类型boolean 默认true
    maximizable: 是否显示最大化按钮 , 类型boolean 默认true
    closable: 是否显示关闭按钮 . 类型boolean 默认true
    shadow: 默认true , 是否显示窗体阴影
    ...

###dialog 提示窗

    class属性值为 easyui-dialog

    title: 设置窗口标题

    data-options="iconCls:'图标class'" :设置窗口图标

    
    JS方式:

    $("div选择器").dialog(pra1);

    pra1: JSON类型的数据 键值对如下:

    1.    title : 提示窗标题

    2.    width : 窗口宽度, 可忽略px , 默认为px

    3.    height: 窗口高度. 可忽略px , ...


##Menu

###Menu右键菜单

    必须要HTML配合JS才能完成的一个特殊组件

    步骤: 

    1.    先通过HTML元素, 创建菜单列表

        -    编写一个div , calss指定为easyui-menu
        -    在这个div中添加子元素, 
                -    直接子元素 就是一级菜单 
                -    子元素子元素就是二级菜单
                -    ....
                -    data-options="'iconCls':'icon-help'" 给子选项添加图标

    2.    将菜单的显示 , 绑定到鼠标的右键上 , 并取消原网页的右键效果
        
        
        //绑定事件到右键点击上
        $(document).on("contextmenu",function(e){
            e.preventDefault();//取消原网页的右键菜单效果
            $("#xdl_menu").menu('show',{
                'left':e.pageX,
                'top':e.pageY
            });

            //menu函数, 传递两个参数 
            1. show 表示显示, 
            2. 是一个JSON格式的对象, 表示菜单左上角显示的位置
        });        


    3.    给菜单中的条目 添加点击事件

        给最外层的菜单div添加: data-options="'onClick':函数名称"

        点击事件函数的编写, 需要设计一个形式参数, 会接受到被点击的元素对象!

##
    案例
    HTML部分:
    <h1>
        右键点击网页的任意部分, 弹出菜单
    </h1>
    <div id="xdl_menu" class="easyui-menu" style="width:120px" data-options="'onClick':menuClick">
        <div id="m1">吃饭</div>
        <div id="m2">睡觉</div>
        <div id="m3">打涛涛</div>
        <div id="m4">学技术
            <div  id="m5" style="width:140px">
                    <div  id="m5_1">学Java</div>
                    <div>学PHP</div>
                    <div>学H5</div>
                    <div>学UI</div>
            </div>
        </div>
        <div data-options="'iconCls':'icon-help'">帮助</div>
    </div>

##
    JS部分

        function menuClick(item){
            console.info("用户选择了",item.id);                
        }
    
        $(document).on("contextmenu",function(e){
            e.preventDefault();
            $("#xdl_menu").menu('show',{
                'left':e.pageX,
                'top':e.pageY
            });
        });



###MenuButton

    菜单按钮需要指定class属性为:easyui-menubutton
    

    data-options:

        menu: 指定弹出的菜单项的选择器(被指定的元素与子元素使用块级元素div)

    注意, 如果需要处理点击事件, 给单个元素添加onclick即可
##
    案例:

        <a href="void(0)" class="easyui-menubutton" data-options="'menu':'#menu_div'">下载</a>
    
        <div id="menu_div">
            <div data-options="iconCls:'icon-remove'">
                笔记
            </div>
            <div data-options="iconCls:'icon-print'">
                课件
            </div>
            <div data-options="iconCls:'icon-edit'">
                代码
            </div>
        </div>
        
    

###分页组件

    分页组件 是用来生成快捷的分页工具栏的
    指定class为 easyui-pagination

    data-options属性:

        total:数据的总数量
        pageSize:单页数据的长度
        onSelectPage:当用户翻页时触发的事件:
            此事件存在两个形式参数
                参数1. 用户翻页动作产生的新页码
                参数2. 新页请求的数据长度

##
    案例
    HTML部分
        <div class="easyui-pagination" style="border:1px solid #bbb;background-color: #e2e2e2;"
    data-options="total:200,pageSize:10,onSelectPage:test"
    >
    </div>


    JS部分
        
        function test(pageNumber,pageSize){
            console.info("页数",pageNumber,"数据的长度",pageSize);
            
        }

###日期选择组件

    class属性为:easyui-calendar
    
    可以通过data-options指定事件:

    1.    选择的日期发生改变时
        onChange:函数名
        编写函数时, 存在两个形式参数:
            参数1. 选择的新日期
            参数2. 之前的旧日期
        
    2.    选择日期时
        onSelect:函数名
        编写函数时, 存在一个形式参数:
            参数1. 选择的日期


    案例:

    HTML部分:
    <div class="easyui-calendar" style="width:300px;height:200px" 
    data-options="onChange:change_1,onSelect:select_1"
    ></div>

    JS部分:
        function change_1(newDate,oldDate){
            console.info("新日期:",newDate.toLocaleString(),"旧日期:",oldDate.toLocaleString());
        }
        //选择的日期 参数1.选择的日期
        function select_1(date){
            console.info("选择的日期:",date.toLocaleString());
        }