jQuery EasyUI是一组基于jQuery的UI插件集合体,而jQuery EasyUI的目标就是帮助web开发者更轻松的打造出功能丰富并且美观的UI界面。开发者不需要编写复杂的javascript,也不需要对css样式有深入的了解,开发者需要了解的只有一些简单的html标签。简而言之,EasyUI的使用通过查看api文档,想要的样式只需id名和class名一样就可以使用,通过 data-options选择你需要的属性即可。

EasyUI使用

  • 1 将EasyUI提供的js文件和主题(themes)样式存放到项目的指定位置
  • 2 在Html文档中引入EasyUI的插件,引用路径为相对路径
  • 3在HTML文档标签上遵循EasyUI的文档规则使用EasyUI完成页面的开发
  • 面板使用(panel):
    • 创建面板:
      • 在创建一个div标签,并class属性值为:”easyui-panel”
    • 面板属性:
    • data-options:给面板添加常用的操作。具体参照API
    • 添加按钮
    • 信息提示
  • 注意:
    • EasyUI的使用
      • 通过标签的class属性添加基本EasyUI功能,包括样式和jQuery操作
      • data-options属性对标签的基本功能进行修改操作
        1
        2
        3
        4
        5
        6
        7
        8
        9
        10
        11
        12
        13
        14
        15
        16
        17
        18
        19
        20
        21
        22
        23
        24
        25
        26
        27
        28
        29
        30
        31
        32
        33
        34
        35
        36
        37
        38
        39
        40
        41
        42
        43
        44
        45
        46
        47
        48
        49
        50
        51
        52
        53
        54
        55
        56
        57
        58
        59
        60
        61
        62
        63
        64
        65
        66
        67
        68
        69
        70
        71
        72
        73
        74
        75
        76
        77
        78
        79
        80
        81
        <html>
        <head>
        <title>登录</title>
        <meta charset="UTF-8" />
        <!--引入主题样式-->
        <link rel="stylesheet" type="text/css" href="themes/default/easyui.css" />
        <!--引入图标样式-->
        <link rel="stylesheet" type="text/css" href="themes/icon.css" />
        <!--引入jQuery文件-->
        <script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
        <!--引入EasyUi的js文件-->
        <script src="js/jquery.easyui.min.js" type="text/javascript" charset="utf-8"></script>
        <!--声明css代码域-->
        <style type="text/css">
        table{
        margin: auto;
        margin-top: 20px;
        }
        tr{
        height: 40px;
        text-align: center;
        }
        </style>
        <!--声明js代码域-->
        <script type="text/javascript">
        /*校验登录信息*/
        $(function(){

        //登录校验
        $("#btnCon").click(function(){
        //校验用户信息
        if($(":text").val()==""){
        //使用EasyUI的信息框进行提示
        $.messager.alert('登录提示',"用户名不能为空!","warning");
        }else if($(":password").val()==""){
        //使用EasyUI的信息框进行提示
        $.messager.alert('登录提示',"密码不能为空!","warning");
        }else{
        $("form").submit();
        }
        })
        //重置
        $("#btnCan").click(function(){
        $("form").get(0).reset();
        })
        })
        </script>
        </head>

        <body>
        <div id="panel_login" style="margin: auto;width: 500px;margin-top: 100px;">
        <!--创建登录面板-->
        <div id="login" class="easyui-panel" title="登录" data-options="iconCls:'icon-mlogin',minimizable:true,maximizable:true
        ,collapsible:true,closable:true" style="width: 500px;height: 200px;">
        <form action="02_main.html" method="get">
        <table>
        <tr>
        <td>用户名:</td>
        <td>
        <input type="text" name="uname"/>
        </td>
        </tr>
        <tr>
        <td>密&nbsp;&nbsp;&nbsp;码:</td>
        <td>
        <input type="password" name="pwd" />
        </td>
        </tr>
        <tr>
        <td colspan="2">
        <a id="btnCon" href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-save'">登录</a>&nbsp; &nbsp;&nbsp;
        <a id="btnCan" href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-cancel'">重置</a>
        </td>
        </tr>
        </table>
        </form>
        </div>
        </div>
        </body>

        </html>
        1
        2
        3
        4
        5
        6
        7
        8
        9
        10
        11
        12
        13
        14
        15
        16
        17
        18
        19
        20
        21
        22
        23
        24
        25
        26
        27
        28
        29
        30
        31
        32
        33
        34
        35
        36
        37
        38
        39
        40
        41
        42
        43
        44
        45
        46
        47
        48
        49
        50
        51
        52
        53
        54
        55
        56
        57
        58
        59
        60
        61
        62
        63
        64
        65
        66
        67
        68
        69
        70
        71
        72
        73
        74
        75
        76
        77
        78
        79
        80
        81
        82
        83
        84
        85
        86
        87
        88
        89
        90
        91
        92
        93
        94
        95
        96
        97
        98
        99
        100
        101
        102
        103
        104
        105
        106
        107
        108
        109
        110
        111
        112
        113
        114
        115
        116
        117
        118
        119
        120
        121
        122
        123
        124
        125
        126
        127
        128
        129
        130
        131
        132
        133
        134
        135
        136
        137
        138
        139
        140
        141
        142
        143
        144
        145
        146
        147
        148
        149
        150
        151
        152
        153
        154
        155
        156
        157
        158
        159
        160
        161
        162
        163
        164
        165
        166
        167
        168
        169
        170
        171
        172
        173
        174
        175
        176
        177
        178
        179
        180
        181
        182
        183
        184
        185
        186
        187
        188
        189
        190
        191
        192
        193
        194
        195
        196
        197
        198
        199
        200
        201
        202
        203
        204
        205
        206
        207
        208
        209
        210
        211
        212
        213
        214
        215
        216
        217
        218
        219
        220
        221
        222
        223
        224
        225
        226
        227
        228
        229
        230
        231
        232
        233
        234
        235
        236
        237
        238
        239
        240
        241
        242
        243
        244
        245
        246
        247
        248
        249
        250
        251
        252
        253
        254
        255
        256
        257
        258
        259
        <html>

        <head>
        <title>主页面</title>
        <meta charset="UTF-8" />
        <!--引入主题样式-->
        <link rel="stylesheet" type="text/css" href="themes/default/easyui.css" />
        <!--引入图标样式-->
        <link rel="stylesheet" type="text/css" href="themes/icon.css" />
        <!--引入jQuery文件-->
        <script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
        <!--引入EasyUi的js文件-->
        <script src="js/jquery.easyui.min.js" type="text/javascript" charset="utf-8"></script>
        <!--
        主页面:
        1 引入EasyUI插件
        2 使用body布局方式
        3 将布局后的每块区域完成内容填充


        -->
        <style type="text/css">
        #sdiv {
        text-align: center;
        font-size: 14px;
        font-weight: bold;
        line-height: 30px;
        background-color: gray;
        }
        /*修改头部标题样式*/

        #n_title {
        color: white;
        font-size: 14px;
        line-height: 40px;
        }
        /*修改标题超链接样式*/

        #n_title a {
        text-decoration: none;
        color: white;
        }

        #n_title a:hover {
        color: orange;
        }
        /*修改密码样式*/

        #div_pwd table {
        margin: auto;
        margin-top: 10px;
        }

        #div_pwd table tr {
        height: 40px;
        text-align: center;
        }
        </style>
        <!--声明js代码域-->
        <script type="text/javascript">
        /*网页js功能*/
        $(function() {
        //退出功能
        $("#n_title_out").click(function() {
        //提示用户是否确定退出
        $.messager.confirm("确认对话框", "你真的要退出吗?", function(r) {
        //退出
        if (r) {
        window.location.href = "01_login.html";
        }
        })
        })
        //修改密码
        $("#n_title_pwd").click(function() {
        //打开修改密码窗口
        $("#div_pwd").window("open");
        })
        //确认修改密码
        $("#btnCon").click(function() {
        //校验原有密码
        if ($(":password:eq(0)").val() == "") {
        $.messager.alert("原有密码", "原有密码不能为空!", "warning");
        } else if ($(":password:eq(1)").val() == "") {
        //校验新密码
        $.messager.alert("新密码", "新密码不能为空!", "warning");
        } else if ($(":password:eq(2)").val() == "") {
        //校验确认密码
        $.messager.alert("确认密码", "确认密码不能为空!", "warning");
        } else if ($(":password:eq(1)").val() != $(":password:eq(2)").val()) {
        //校验两次密码
        $.messager.alert("密码校验", "两次密码不一致!", "error");
        } else {
        //关闭密码窗口
        $("#div_pwd").window("close");
        //$.messager.alert("密码修改","密码修改成功!","info");
        $.messager.show({
        title: '密码修改',
        msg: '密码修改成功,新密码为:'+$(":password:eq(2)").val(),
        timeout: 3000,
        showType: 'slide'
        });
        }
        })
        //取消密码修改
        $("#btnCan").click(function(){
        $("#div_pwd").window("close");
        })
        //树状菜单和选项卡的联动
        //给菜单添加单击事件
        $("#treeMenu").tree({
        onClick:function(node){
        //控制台打印node内容
        //console.log(node);
        //获取attributes属性,判断是菜单还是菜单描述
        var attrs=node.attributes;
        if(attrs==null || attrs.url==''){
        return;
        }
        //判断选项卡是否存在
        var has=$("#div_tabs").tabs("exists",node.text);
        if(has){
        //选中存在的选项卡
        $("#div_tabs").tabs("select",node.text);
        }else{
        //创建新的选项卡面板
        $("#div_tabs").tabs("add",{
        title:node.text,
        closable:true,
        content:"<iframe src="+attrs.url+" style='width:100%;height:98%' frameborder='0'/>"
        })
        }


        }
        })



        })
        /*
        Json数据格式
        {"键名":"值","键名":"值",...........}

        {
        "键名":"值",
        "键名":"值",
        ...........
        }
        *
        *
        * */
        </script>
        </head>

        <body class="easyui-layout">
        <!--布局:北-->
        <div data-options="region:'north'" style="height: 50%;background-image: url(img/layout-browser-hd-bg.gif);">
        <!--添加网站Logo-->
        <span id="n_logo" style="margin-left: 20px;">
        <img src="img/blocks.gif" width="35px" style="margin-top: 5px;"/>
        <font color="white" size="4px">506班级管理系统</font>
        </span>
        <span id="n_title" style="float: right;">
        欢迎 admin登录&nbsp;&nbsp;&nbsp;
        <a id="n_title_pwd" href="javascript:void(0)">修改密码</a>|
        <a id="n_title_out" href="javascript:void(0)">退出</a>
        </span>
        </div>
        <!--布局:南-->
        <div id="sdiv" data-options="region:'south',border:false" style="height:35%;">
        &copy;2008-2018 506班级网站,仿冒必纠
        </div>
        <!--布局:西-->
        <div data-options="region:'west',title:'系统菜单',split:true" style="width: 200px;">
        <!--分类效果实现-->
        <div class="easyui-accordion" data-options="fit:true,border:false">
        <div id="" title="常用网站" >
        <!--创建菜单-->
        <ul id="treeMenu" class="easyui-tree">
        <li>
        <span>购物网站</span>
        <!--二级-->
        <ul>
        <li data-options="attributes:{url:'http://www.taobao.com'}">淘宝网</li>
        <li data-options="attributes:{url:'http://www.jd.com'}">京东网</li>
        <li data-options="attributes:{url:'http://www.suning.com'}">苏宁易购</li>
        </ul>
        </li>
        <li>
        <span>学习网站</span>
        <ul>
        <li data-options="attributes:{url:'http://www.bjsxt.com'}">北京尚学堂</li>
        <li data-options="attributes:{url:'http://www.baidu.com'}">百度一下</li>
        <li data-options="attributes:{url:'http://www.so.com'}">360搜索</li>
        </ul>
        </li>
        <li>
        <span>娱乐网站</span>
        <ul>
        <li>斗鱼</li>
        <li>虎牙</li>
        <li>熊猫</li>
        </ul>
        </li>
        </ul>
        </div>
        <div id="" title="个人收藏">
        菜单二
        </div>
        <div id="" title="系统信息">
        菜单三
        </div>

        </div>

        </div>
        <!--布局:中间-->
        <div data-options="region:'center'">
        <!--选项卡使用-->
        <div id="div_tabs" class="easyui-tabs" data-options="fit:true,border:false">
        <!--首页-->
        <div id="" title="首页" style="background-image:url(img/body.jpg) ;background-size: cover;">

        </div>
        </div>
        </div>
        <!--创建修改密码窗口-->
        <div id="div_pwd" class="easyui-window" title="修改密码" style="width: 400px;height: 250px;" data-options="collapsible:false,minimizable:false,maximizable:false,closed:true,modal:true">
        <table>
        <tr>
        <td>原有密码:</td>
        <td>
        <input type="password" />
        </td>
        </tr>
        <tr>
        <td>新密码:</td>
        <td>
        <input type="password" />
        </td>
        </tr>
        <tr>
        <td>确认密码:</td>
        <td>
        <input type="password" />
        </td>
        </tr>
        <tr>
        <td colspan="2">
        <a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-save'">确认修改</a> &nbsp;&nbsp;&nbsp;&nbsp;
        <a id="btnCan" href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-cancel'">取消</a>
        </td>
        </tr>
        </table>
        </div>

        </body>

        </html>