EasyUI 搭建后台登录界面和管理系统主界面

最新推荐文章于 2024-07-19 09:28:04 发布

诚o

最新推荐文章于 2024-07-19 09:28:04 发布

阅读量2.2w

点赞数 4

EasyUI介绍

1.EasuyUI介绍：
EasyUI：简单的界面设计框架，作用主要是用来设计网站的后台管理系统。帮助程序员快速的构建网站界面。
特点：
基于jQuery的一个UI插件
2、EasyUI官网：
http://www.jeasyui.com
3、EasyUI使用目录介绍：
jeasyui：
demo: easui的效果示例
locale：easyui的语言文件
plugins:easyUI的案例切割的js文件
src:源码
themes:easyUI提供的css样式
jquery.easyui.min.js:easyUI的插件
jquery.min.js：easyUI依赖额jquery文件

EasyUI的使用

1 导入EasyUI的支持
2 将要使用的EasyUI加入到项目中
导入css文件
导入js文件
3 EasyUI是通过class类选择器方式进行样式添加的
在HTML标签上使用class属性直接引入EasyUI提供的样式支持
4 使用data-options指定一些样式效果，例如：小图标
使用此属性对样式的一些特效进行自定义修改
5 同时可以使用style属性自定义
示例：
form登录

EasyUI登录界面：

1 优化登录页面
登录界面居中
form表单居中显示
给登录和重置添加功能
jQuery校验弹窗

<html>

    <head>
        <title>登录</title>
        <meta charset="UTF-8" />
        <!--
            EasyUI使用:
                1 将EasyUI提供的js文件和主题（themes）样式存放到项目的指定位置
                2 在Html文档中引入EasyUI的插件
                3在HTML文档标签上遵循EasyUI的文档规则使用EasyUI完成页面的开发

            面板使用(panel)：
                创建面板：
                    在创建一个div标签，并class属性值为："easyui-panel"
                面板属性:
                    title:添加面板标题
                    data-options：给面板添加常用的操作。具体参照API 
                    添加按钮
                信息提示
            注意：
                EasyUI的使用
                    通过标签的class属性添加基本EasyUI功能，包括样式和jQuery操作
                    data-options属性对标签的基本功能进行修改操作
        -->
        <!--引入主题样式-->
        <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>

EasyUI主页面布局

EasyUI主页面布局：
注意：先引入EasyUI相关组件
1 body使用布局样式
2 使用div进行东南西北的布局
3 设置可以手动调节大小
EasyUI主页布局（2）：
1 设置底部网站声明
2 设置头部网站logo
3 设置顶部用户退出提示框
4 设置用户修改密码window窗口
5 校验密码修改
EasyUI主页布局（3）：设置树状菜单和选项卡
EasyUI主页布局 (4) ：设置菜单和选项卡的联动操作

<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==null){
                            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 id="btnCon" 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>

小结

EasyUI介绍
EasyUI的使用
EasyUI登录界面

小知识：

1、javascript:void(0):使超链接失效，http://www.runoob.com/js/js-void.html
2、json:
JSON(JavaScript Object Notation, JS 对象标记) 是一种轻量级的数据交换格式。

JSON 键/值对：
JSON 键值对是用来保存 JS 对象的一种方式，和 JS 对象的写法也大同小异，键/值对组合中的键名写在前面并用双引号 "" 包裹，使用冒号 : 分隔，然后紧接着值：
{"firstName": "Json"}
这很容易理解，等价于这条 JavaScript 语句：
{firstName : "Json"}

JSON 和 JS 对象互转：
要实现从对象转换为 JSON 字符串，使用 JSON.stringify() 方法：
var json = JSON.stringify({a: 'Hello', b: 'World'}); //结果是 '{"a": "Hello", "b": "World"}'
要实现从 JSON 转换为对象，使用 JSON.parse() 方法：
var obj = JSON.parse('{"a": "Hello", "b": "World"}'); //结果是 {a: 'Hello', b: 'World'}
3、行内元素居中：line-height:
4、使用EasyUI给一般标签加样式  举例 class="easyui-linkbutton" data-options:"iconCls:'icon-save'";
5、 &copy;生成网站底部C符号
6.background-size: cover;，cover覆盖
7.注意data-options=""  是等号
8、modal:true"窗口置顶，别的窗口无法操作
9、closed:true 设置窗口为隐身状态。

源码下载：
链接：https://pan.baidu.com/s/1L-bZT7kwu5CeWzcnqyBJvg 密码：w391
资料：
themes文件夹
jquery.easyui.min.js
jquery.min.js
jEasyUI1.3.6版API中文版(Richie696).
img:
这里写图片描述