easyUI笔记

easyUI介绍

什么是 jQuery EasyUI
jQuery EasyUI 框架提供了创建网页所需的一切，帮助您轻松建立站点。
easyui 是一个基于 jQuery 的框架，集成了各种用户界面插件。
easyui 提供建立现代化的具有交互性的 javascript 应用的必要的功能。
使用 easyui，您不需要写太多 javascript 代码，一般情况下您只需要使用一些 html 标记来定义用户界面。
HTML 网页的完整框架。
easyui 节省了开发产品的时间和规模。
easyui 非常简单，但是功能非常强大。

easyUI快速入门

easyui-resizable展示可变拖动变化效果

导入easyUI

复制easyUI到项目静态资源下即可

引入easyUI

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" type="text/css" href="../easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="../easyui/themes/icon.css">

<script type="text/javascript" src="../easyui/jquery.min.js"></script>
<script type="text/javascript" src="../easyui/jquery.easyui.min.js"></script>
</head>

使用 easyui-resizable

<div style="width: 100px;height: 200px;background-color: red;" 
class="easyui-resizable"></div>

为resizable控件添加属性-html

data-options="maxWidth:400,maxHeight:400"

js中设置resizable中的属性

$("div").resizable({
        maxWidth: 400,
        maxHeight: 400,
        minWidth: 10,
        minHeight: 10,
        edge: 30
});

设置easyUI的事件

$("div").resizable({
        onStartResize: function() {
            $("span").html("开始改变大小了");
        },
        onStopResize: function() {
            $("span").html("停止改变大小了");
        },
        onResize: function() {
            $("span").html("大小在一直改变");
        }
});

设置easyUI的方法

$("#bt1").click(function(){
        $("div").resizable("disable");
    });
    $("#bt2").click(function(){
        $("div").resizable("enable");
});

快速入门总结：
- 对于easyUI中两个属性以，隔开
- 大小不写单位
- 键值对以 key:value形式进行书写
- 事件调用该class类型，执行事件

LinkButton

效果演示

<a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-add'">添加</a>
<a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-remove'">删除</a>
<a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-ok'">提交</a>
<a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-no'">删除</a>
<a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-cancel'">取消</a>
<a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-cut'">剪切</a>
<a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-save'">保存</a>
<a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-search'">搜索</a>
<a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-help'">帮助</a>

js中设置按钮

$("#a").linkbutton({
    iconCls: 'icon-search'
});

禁用和启用按钮（调用按钮中方法）

$("#a1").click(function(){
    $("#a").linkbutton("disable");
});
$("#a1").click(function(){
    $("#a").linkbutton("enable");
});

ProgressBar 进度条

效果展示

<div id="p" class="easyui-progressbar" 
data-options="value:60" style="width:400px;"></div>

js代码操作

$("#p").progressbar({
    width:700,
    height:23,
    value: 60,
    text: "正在下载中"
});

动态修改进度

var progress = 0;
var interval;

$(function() {
    //点击下载按钮开始下载
    $("#download").click(function() {
        //启动定时任务
        interval = window.setInterval(download, 50);
    });
    function download() {
        //设置progressbar的value值
        $("#p").progressbar("setValue", progress++)
    }
    $("#p").progressbar({
        onChange: function(value) {
            //当value值==100时，还原
            if(value == 100) {
                $("#p").progressbar("setValue", 0)
                window.clearInterval(interval);
                alert("下载成功");
            }

        }
    });
})

Panel（面板）

效果演示

    <div style="height:150px;width:300px;" 
    title="标题文件" class="easyui-panel">文本内容</div>

panel属性展示

$(function() {
    $("#myId").panel({
        width: 300,
        height: 200,
        title: '我是标题',
        collapsible: true,
        minimizable: true,
        maximizable: true,
        closable: true,
        href: 'http://www.baidu.com',
        loadingMessage: '伦家正在努力加载'
    });
    //用程序设置id为myId的DOM节点的定位方式为绝对定位--如果不设置，没有效果  
    $("#myId").panel("panel").css("position", "absolute");
});

自定义效果演示

$("#myId2").panel({
        width: 300,
        height: 200,
        title: '我是标题',
        href: 'http://www.baidu.com',
        loadingMessage: '伦家正在努力加载',
        tools: [{
            iconCls: 'icon-add',
            handler: function() {
                alert("添加");
            }

        }, {
            iconCls: 'icon-remove',
            handler: function() {
                alert("移除");
            }
        }, {
            iconCls: 'icon-edit',
            handler: function() {
                alert("编辑");
            }
        }]
    });

Window效果

效果演示

<div id="win"></div>
$('#win').window({    
width:600,    
height:400,    
modal:true   
});

window方法测试

$("#hcenter").click(function() {
        $("#win").window("hcenter");
    });
    $("#vcenter").click(function() {
        $("#win").window("vcenter");
    });
    $("#center").click(function() {
        $("#win").window("center");
    });
    $("#open").click(function() {
        $("#win").window("open");
    });
    $("#close").click(function() {
        $("#win").window("close");
});

Messager（消息窗口）

消息窗口提供了不同的消息框风格，包含alert(警告框), confirm(确认框), prompt(提示框), progress(进度框)等。所有的消息框都是异步的。用户可以在交互消息之后使用回调函数去处理结果或做一些自己需要处理的事情。

效果演示
警告框
```
$.messager.alert
```
确认输入框
```
$.messager.confirm
```
输入框
```
$.messager.prompt
```
广告框
```
$.messager.show
```

进度条框

基本效果展示

$.messager.progress({
            text: "正在下载",
            interval: 2000,
            title: "下载框"
});

获取进度条对象 bar

var progressbar = $.messager.progress("bar");

案例：当进度到100时，让进度条框消失

$("#bt1").click(function() {

    $.messager.progress({

        interval: 1000,
        title: "下载框"
    });
    var p = $.messager.progress("bar");
    p.progressbar({
        onChange: function(value) {
            if(value == 100) {
                $.messager.progress("close");
            }
        }
    });

});

Dialog（对话框窗口）

js效果演示

$("#dd").dialog({

    title: "员工管理系统",
    collapsible: true,
    minimizable: true,
    content: "我是管理内容",
    maximizable: true,
    toolbar: [{
        text: "添加",
        iconCls: "icon-add",
        handler: function() {
            $("#dd").append("哈哈哈");

        }

    }, {
        text: "删除",
        iconCls: "icon-remove",
        handler: function() {
            alert("删除");
        }

    }]
});

Tabs（选项卡）

选项卡效果演示

<div id="tt" class="easyui-tabs" style="width:500px;height:250px;">
    <div title="Tab1" style="padding:20px;display:none;">
        tab1
    </div>
    <div title="Tab2" style="overflow:auto;padding:20px;display:none;">
        tab2
    </div>
    <div title="Tab3" style="padding:20px;display:none;">
        tab3
    </div>
</div>

监听选项卡选中

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

添加操作按钮

$('#tt').tabs({
    tools: [{
        iconCls: 'icon-add',
        handler: function() {
            alert('添加')
        }
    }, {
        iconCls: 'icon-save',
        handler: function() {
            alert('保存')
        }
    }]
});

选中某个选项卡

$("#bt1").click(function() {
        $("#tt").tabs("select",1);
});

秒客网

[置顶] easyUI入门--1

easyUI笔记

easyUI介绍

easyUI快速入门

LinkButton

ProgressBar 进度条

Panel（面板）

Window效果

Messager（消息窗口）

Dialog（对话框窗口）

Tabs（选项卡）

Layout（布局）重点

accordion

相关文章

[置顶] easyUI入门--1

easyUI笔记

easyUI介绍

easyUI快速入门

LinkButton

ProgressBar 进度条

Panel（面板）

Window效果

Messager（消息窗口）

Dialog（对话框窗口）

Tabs（选项卡）

Layout（布局） 重点

accordion

相关文章

Layout（布局）重点