EasyUI实现用户登录界面

EasyUI虽然表单功能强大,但很多人对EasyUI的传统样式难以忍受(包括我自己),所以最近一直在琢磨怎么利用EasyUI搭建一个还算现代化的登陆界面。搞了半天搞定了,登陆界面如下图所示,自认为还算看得过去~
EasyUI实现用户登录界面_第1张图片
下面说一下实现过程,首先下载EasyUI1.8.5及其样式扩展插件,这里我用到的主要是metro-blue样式。
EasyUI实现用户登录界面_第2张图片
然后就是写代码了,代码如下所示:


<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta charset="utf-8" />
    <title>用户登录title>
    <link href="lib/easyui/themes/metro-blue/easyui.css" rel="stylesheet" />
    <link href="lib/easyui/themes/icon.css" rel="stylesheet" />
    <script src="lib/easyui/jquery.min.js">script>
    <script src="lib/easyui/jquery.easyui.min.js">script>
    <script src="lib/easyui/locale/easyui-lang-zh_CN.js">script>
    <style>
        html, body
        {
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
        }

        h1
        {
            color: rgb(128, 128, 128);
            text-align: center;
        }

        a:link, a:hover, a:visited, a:active
        {
            color: rgb(128, 128, 128);
            text-decoration: none;
        }

        form
        {
            width: 400px;
            min-width: 400px;
            position: absolute;
            left: 40%;
            top: 15%;
            margin: 0;
            padding: 30px;
            background-color: white;
            border: 2px solid rgba(128, 128, 128, 0.2);
            border-radius: 10px;
        }

            form div
            {
                margin-bottom: 10px;
            }
    style>
head>
<body>
    <form action="" method="post">
        <div>
            <h1>用户登录h1>
        div>
        <div>
            <input class="easyui-textbox" data-options="iconCls:'icon-man',iconWidth:30,iconAlign:'left',prompt:'用户名'" style="width:100%;height:35px;" />
        div>
        <div>
            <input class="easyui-passwordbox" data-options="iconWidth:30,iconAlign:'left',prompt:'密码'" style="width:100%;height:35px;" />
        div>
        <div>
            <input class="easyui-checkbox" label="记住密码" labelPosition="after" labelWidth="70" />
        div>
        <div>
            <input class="easyui-linkbutton" type="submit" value="登陆" style="width:100%;height:35px;" />
        div>
        <div>
            <div style="display:inline;">
                <a href="javascript:void(0)">还未注册?a>
            div>
            <div style="display:inline;margin-left:170px;">
                <a href="javascript:void(0)">忘记密码?a>
            div>
        div>
    form>
body>
html>

这里也可以用其他的如metro-red等样式,其他样式结果如下图所示:
EasyUI实现用户登录界面_第3张图片
EasyUI实现用户登录界面_第4张图片
EasyUI实现用户登录界面_第5张图片
EasyUI实现用户登录界面_第6张图片

你可能感兴趣的:(EasyUI,ASP.NET,jquery)