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

最新推荐文章于 2024-05-27 12:07:42 发布

神一样的我

最新推荐文章于 2024-05-27 12:07:42 发布

阅读量8.9k

点赞数 4

分类专栏：前端 JavaScript

本文链接：https://blog.csdn.net/qq_21953671/article/details/79452804

版权

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>

最低0.47元/天解锁文章

神一样的我

关注

4
点赞
踩
25

收藏

觉得还不错? 一键收藏
0
评论
Day45 EasyUI 搭建后台登录界面和管理系统主界面

EasyUI介绍1.EasuyUI介绍： EasyUI：简单的界面设计框架，作用主要是用来设计网站的后台管理系统。帮助程序员快速的构建网站界面。特点：基于jQuery的一个UI插件 2、EasyUI官网： http://www.jeasyui.com 3、EasyUI使用目录介绍： ...
复制链接

扫一扫