一、easyui笔记：用户登录

最新推荐文章于 2021-09-23 00:08:32 发布

sn_explore6688

最新推荐文章于 2021-09-23 00:08:32 发布

阅读量3k

点赞数

分类专栏：编程语言 web前端文章标签： easyui

本文链接：https://blog.csdn.net/forward2014/article/details/19190701

版权

编程语言同时被 2 个专栏收录

9 篇文章 0 订阅

订阅专栏

web前端

3 篇文章 0 订阅

订阅专栏

相比的extjs的文件大、高难度，个人还是比较钟意easyui的小巧简单易用，尝试把easyui引入目前在用的oa系统中

第一步，引入必备的一些css和js

<title>协同办公 - 用户登录</title>
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
    <link href="/easyui/themes/default/easyui.css" rel="stylesheet" type="text/css" />
    <link href="/easyui/themes/icon.css" rel="stylesheet" type="text/css" />
    <link href="/easyui/demo/demo.css" rel="stylesheet" type="text/css" />
    <script src="/easyui/jquery.min.js" type="text/javascript"></script>
    <script src="/easyui/jquery.easyui.min.js" type="text/javascript"></script>
    <script src="/Scripts/jquery.md5.js" type="text/javascript"></script>
    <script src="/Scripts/jquery.cookie.js" type="text/javascript"></script>
    <link href="/content/myStyle.css" rel="stylesheet" type="text/css" />

第二步，编写登录页面html

<div id="container">
    <div id="header">
        <div class="logo"><span>协同办公平台</span></div>
        <ul><li><a href="#">设为首页</a></li><li><a href="#">加入收藏</a></li><li class="last"><a href="#">控件下载</a></li></ul>
    </div>
    <div class="banner"></div>
    <form id="login" method="post" >
    <ul class="login">
        <li><span>用户名：</span></li>
        <li><input type="text" name="uname" class="easyui-validatebox txt" tabindex="1" value="" data-options="required:true"/></li>
        <li><span>密  码：</span></li>
        <li><input type="password" name="upwd" class="easyui-validatebox txt" value="" tabindex="2" data-options="required:true" /></li>
        <li><input type="submit" name="btnLogin" class="btn" tabindex="3" value="登 录" /></li>
        <li><input type="reset" name="btnReset" class="btn" tabindex="4" value="重 置" /></li>
    </ul>
    </form>
    <div class="footer"><span>版本号：1.0.0</span></div>
</div>

最终实现效果