jQuery easyUI快速入门

简介：

1. EasyUI是一种基于jQuery、Angular.、Vue和React的用户界面插件集合，提供了窗口/菜单/树/数据网格/按钮/表单等一系列功能组件。
2. jQuery easyUI是一个基于jQuery的框架，集成了用户界面的各种插件。提供了创建网页所需的一切，轻松创建站点。

使用 easyui优点：

1. 不需要写太多 js代码，一般只需要用一些 html 来定义用户界面。
2. 节省了开发产品的时间和规模, easyui 非常简单，但是功能非常强大。
3. 强大的数据交互能力，企业级B/S项目的开发首选，快速实现数据管理的得力助手和工具。

下载：

1. 可以从 http://www.jeasyui.com/download/index.php 下载需要的 jQuery EasyUI版本。
2. 解压到文件夹中：比如叫easyUI

       

目录结构说明

1. demo和demo-mobile为示例文件夹，了解各个组件的功能，正式发布项目时，这两个文件夹可以不用上传到服务器，demo都是html格式的，可以直接访问。demo-mobile是移动端的演示文件。
2. locale设置语言环境，比如想使用简体中文，在项目中直接引用该文件夹下的easyui-lang-zh_CN.js文件
3. plugins包含了全部组件的js处理程序
4. src包含了部分组件的js开源程序
5. themes包含了各种主题资源文件，如图标/主题样式等。

注：所有的txt文件都是文档说明，可以忽略。

1. jquery.min.js是jQuery库：如果要使用jQuery easyui,就必须先加载jQuery。
2. jQuery.easyui.min.js是easyui的核心库文件。
3. easyloader.js很少用，忽略
4. jQuery.easyui.mobile.js是移动端项目应用时的核心库文件

轻松上手：两个方法声明组件

1. 直接在html声明组件

     2. 编写js代码创建组件

页面中如何使用？

新建一个html，head中引入必要的easyui框架文件：

主题样式：themes文件中的内容

icons：各种图标文件

其它文件夹分别是主题样式，每个主题又有响应的css文件和按钮图片，每个文件夹中的easyui.css包含所有的组件样式，其它的css文件是某个组件的样式。

项目主题样式是所引用的easyui.css文件确定的，例如上面引用的第四个：default默认样式。

颜色样式

themes中有三个独立的css样式文件，color.css/icon.css/mobile.css,其中mobile.css是移动端的样式文件，先不管。color.css是颜色样式文件，它和主题样式相互配合，打造出更具个性化的应用系统。提供了8种默认的颜色样式c1-c8。如需使用颜色样式，先引用color.css，再在相关组件的属性中设置即可。比如

注：并不是所有的组件都能使用颜色样式，使用的方法也可能不同。

颜色样式并非必须要用的。

图标样式

所有的图标都是通过themes文件夹中的样式文件icon.css来进行管理的，所以必须进入。图标文件保存在icons文件夹中。

每个图标文件都被重新声明了一个class样式名称。也可以自己补充图标。

如何使用图标：easyui中，每个需要用到图标的组件都会自带iconCls属性，直接将对应的class类名复制给该属性即可。

注：icon.css仅仅用来管理项目中用到的图标，和主题中的图标是两回事。主题中会有很多自带图标。

简单的登录窗口实例：

    
    
    
    
    
    
    
    


    

        
用户名称：
        
登录密码：
    
    

        登录
    

注：

• style一般是用于对样式的微调。
• 因为现在学的easyui是基于jQuery的，所以必须将要操作的dom元素转为jQuery对象，才能使用EasyUI组件中的属性/方法或事件。

• js格式：

$(function(){

})

这两行代码的意思是包含在其中的事件代码只有在页面文档准备好之后才会执行。不然可能会有错误。

上面的代码执行后发现按钮不见了，如何绑回来？

$('#dlg').dialog({
    title:"用户登录",//对话框标题
    width:290,
    height:176,
    modal:true,//模式窗口
    buttons:'#btn',//绑定按钮
    iconCls:'icon-open',//设置窗口图标
    cls:'cl',//使用颜色样式C1
});//分号不要忘记，这只是一条语句。

其中，buttons属性用于绑定指定的标签元素，属性值可以是数组或选择器。

用户输入验证

如输入框至少输几个字符，不能输哪些字符。需要使用validatebox组件。

步骤:选择-转为对象-使用方法

$('#suer').validatebox({
    required:true,
    validType:'length[5,10]'
});

easyUI中有个强大的linkbutton组件是专门用来处理按钮的，代码如下：

$('button').linkbutton({
    width:60,
    iconCls:'icon-key'
});

单击事件：jquery的：

$('button').linkbutton({
    width:60,
    iconCls:'icon-key'
}).click(function(){
    alert('点击我了');
});

linkbutton自带了onClick事件类型：

$('button').linkbutton({
    width:60,
    iconCls:'icon-key',
    onClick:function(){
        if (!$('#user').validatebox('isValid')){
            $('#user').focus();
        } else if(!$('#password').validatebox('isValid')){
            $('#password').focus();
        } else {
            $.messager.progress({
                text:'正在登录中…',
            });
        }
    }
})

使用了validatebox的isValid方法，该方法有个返回值，如果验证通过返回true,否则false.

messager也是一个组件，用于弹出消息，风格有：alert/confirm/prompt/progress进度框等

其中让对象获取焦点，easyui没有相关方法，就直接用了jQuery的focus方法。如果使用组件自带的方法，格式：$('').组件（'方法’,参数）

移动光标

原理:jQuery中，用户按下键盘上的任何键，都会出发keydown事件。

$('#user').keydown(function(e){
    if(e.keyCode == 13){
        $('#password').focus();
    }
});//如果在用户名编辑器上回车，就将焦点移动到密码上，同理密码也是

其中，e表示事件对象，代表着事件状态。

有的组件里封装了方法，有的没有，任何时候都可以随意使用jQuery的方法。

封装移动光标事件：

function keymove(e,next,up){
    if(e.keyCode == 13){
        $(next).focus();
    };
    if(e.keyCode == 13 && e.shiftkey){
        $(up).focus();
    };
}

调用：

$('#user').validatebox({
    XXX
}).keydown(function(e){
    keymove(e,'#password','#button');
});

向服务器提交验证

$('button').linkbutton({
    width:60,
    iconCls:'icon-key',
    onClick:function(){
        if (!$('#user').validatebox('isValid')){
            $('#user').focus();
        } else if(!$('#password').validatebox('isValid')){
            $('#password').focus();
        } else {
            $.ajax({
                url:'login.php',
                type:'post',
                data:{
                    user:$('user').val(),  //val()表示取值
                    password:$('password').val(),
                },
                beforeSend:function(){
                    $.messager.progress({
                        text:'正在登录中…',
                    });
                },
                success:function(data){
                    $.messager.progress('close');
                    if(data==0){
                        $.messager.alert('警告','用户名或密码错误，请重新输入', 'warning',         function(){
    $('#password').select();//未通过默认选密码框
})；

                    }else{
                        location.href='main.php';
                    }
                }
            })
        }
    }
})

messager的alert方法可以带四个参数，警告框标题/警告内容/图标类型/回调函数，回调函数在这里指关闭警告框时，自动选择“密码”来方便用户重新输入。

会话控制：

通过会话ID判断一个会话周期中所访问的多个页面是否来自同一个用户。

首先，如果登录时后台通过，后台返回一个不为0的值，然后记录下user

客户端接收到不为0的数据，则跳转，main.php中也要加入会话控制代码，如果找不到user，强制跳到登录页面。

添加用户退出功能

源代码结构：

    

        
    
    

    

        

        
XXXX
    
    

layout布局组件应用之后将铺满整个屏幕，按照布局中的region属性分为上/左/下/中心区域。页面上直接使用data-options属性超级方便，不用再设置id然后设置了。

现在加一个退出按钮，如果直接:

    
    退出登录

会发现挨着logo，所以设置样式

$('a').linkbutton({
    width:80,
    iconCls:'icon-man',
    plain:true,
    onClick:function(){
        $.messager.confirm('退出','确定要退出登录吗',function®{
            if(r) location.href='logout.php';
        });
   },
}).css({
    margin:'30px 18px 0 0',
    color:'XXX',
    float:'right'
    });

解析：先应用linkbutton效果变成一个按钮，然后用jQuery的css方法设置样式。