Easyui后台管理界面设计

5542人阅读 评论(0) 收藏 举报
分类:

1

Easyui 后台管理界面登陆设计

@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
    <script src="~/Scripts/jquery-1.8.2.js"></script>
    <script src="~/jquery-easyui/jquery.easyui.min.js"></script>
    <script src="~/jquery-easyui/locale/easyui-lang-zh_CN.js"></script>
    <link href="~/jquery-easyui/themes/default/easyui.css" rel="stylesheet" />
    <link href="~/jquery-easyui/themes/icon.css" rel="stylesheet" />
    <style type="text/css">
        p {
            height: 22px;
            line-height: 22px;
            padding: 4px 0 0 25px;
        }
    </style>
</head>
<body>
    <div id="login" style="padding-left:6px">
        <p>管理员账号:<input type="text" id="userName" name="userName" value="" /></p>
        <p>管理员密码:<input type="password" id="userPassword" name="userPassword" value="" /></p>
    </div>
    <div id="btn">
        <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-clear'" onclick="javascript:$('#login').dialog('close')">取消</a>
        <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-ok'" onclick="">登陆</a>
    </div>
</body>
</html>

<script type="text/javascript">
    $(function () {

        //------------------------登陆界面---------------

        $("#login").dialog({
            title: ' 登陆后台',
            width: 350,
            height: 200,
            modal: true,
            buttons: '#btn',

        })
    })

    //---------------管理员账号验证-------------

    $("#userName").validatebox({
        required: true,
        missingMessage: "必填项",
        invalidMessage: '用户名不能为空',
    })

    $("#userPassword").validatebox({
        required: true,
        missingMessage: "必填项",
        //invalidMessage:'密码不能为空',
        validType: 'length[6,20]',

    })

    //--------------页面加载的时候就先验证一次,这样就可以保证输入框聚焦
    $(function () {

        if (!$("#userName").validatebox("isValid")) { //如果验证的返回值是false(即:验证不成功)
            $("#userName").focus(); //聚焦
        }
        else if (!$("#userPassword").validatebox("isValid")) {
            $("#userPassword").focus();
        }
    })
    

    //----------------登陆---------
    $("#btn a").click(function () {
        if (!$("#userName").validatebox("isValid")) { //如果验证的返回值是false(即:验证不成功)
            $("#userName").focus(); //聚焦
        }
        else if (!$("#userPassword").validatebox("isValid")) {
            $("#userPassword").focus();
        }
        else {

            $.ajax({
                url: '/Test/CheckLogin',
                data: { 'userName': $("#userName").val(), 'userPassword': $("#userPassword").val() },

                beforeSend: function () {
                    $.messager.progress({
                        text: '正在登陆中.....',
                    })
                },
                success: function (data) {                  
                    if (data=="True") {                       
                        window.location.href = "/Home/Index";
                    }
                    else {
                        $.messager.progress('close'); //关闭正在登陆中.....这个提示框
                        $.messager.alert("登陆失败!", "用户名或密码错误!", 'warning', function () {
                            $("#userPassword").select();//当 textarea 或文本类型的 input 元素中的文本被选择时,会发生 select 事件。(这里的作用主要就是当密码输入错误,就将密码输入框设为选中状态,这样当用户点击一下密码输入框的时候密码输入框中的内容会别清空)
                        })
                    }
                }
            })
        }

    })
</script>

后台界面设计

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index17</title>
    <script src="~/Scripts/jquery-1.8.2.js"></script>
    <script src="~/jquery-easyui/jquery.easyui.min.js"></script>
    <script src="~/jquery-easyui/locale/easyui-lang-zh_CN.js"></script>
    <link href="~/jquery-easyui/themes/default/easyui.css" rel="stylesheet" />
    <link href="~/jquery-easyui/themes/icon.css" rel="stylesheet" />

    <style type="text/css">
        .logo {
            width: 180px;
            height: 50px;
            line-height: 50px;
            text-align: center;
            font-weight: bold;
            font-size: 20px;
            float: left;
            color: #fff;
        }

        .logout {
            float: right;
            padding: 30px 15px 0 0;
            color: #fff;
        }
    </style>
</head>
<body>
    <!--region:'north'表示上北这个面板-->
    <!--split:true,表示面板可以拖拉-->
    <!--iconCls:'icon-save'表示给面板加一个保存的图标-->
    <!--href:'/Home/CheckUserInfo' 表示这个面板将会从/Home/Index中请求数据-->
    <!--collapsible:false,定义这个面板是否显示折叠按钮。默认值true。-->
    <!--maxHeight:200,表示面板的最大宽度为200px-->
    <!--minHeight:80,表示面板的最小宽度为80px-->
    <!--noheader:true 表示不显示头标记,为false表示显示头标记。其作用与去掉title是一样的-->

    <!--上北-->
    <div id="box" class="easyui-layout" style="width: 800px; height:500px">
        <div data-options="
             region:'north',
             title:'上北',
             split:true,
             iconCls:'icon-save',
             noheader:true
             "
             style="height: 60px; background-color: #241f1f;">

            <div class="logo">后台管理</div>
            <div class="logout">你好,无盐海 | <a href="#">退出</a></div>
        </div>

        <!--左西-->
        <div id="west" data-options="region:'west',title:'导航'" style="width:150px;padding:10px"></div>

        <!--右东-->
        @*<div data-options="region:'east',split:true,title:'右东'" style="width:100px"></div>*@

        <!--中间-->
        <div data-options="region:'center'" style="width:auto">

            <div id="tabs" style="overflow:hidden">
                <div title="起始页" style="padding:5px 10px; display:block">
                    欢迎来到后台管理系统!
                </div>
                <div title="我是表2">我是表2的内容</div>
            </div>

        </div>
        <!--下南-->
        <div data-options="region:'south',split:false,noheader:true" style="height:35px;line-height:35px; text-align:center">联系方式:12345679   |中华人民共和国</div>
    </div>
</body>
</html>
<script type="text/javascript">
    $(function () {
        $("#tabs").tabs({
            fit: true, //自适应父容器
            border: false, //去掉边框

        });



        $("#west").panel({
            onExpand: function () {
                $("#tabs").tabs().resize();//面板展开后重置布局
                
            },
            onBeforeExpand: function () {
                //alert("面板展开之前触发!");
                //return false; 取消展开,取消展开后 事件将不会被触发 
            },
        })
    })
</script>


查看评论

同事的一个很好的easyui 界面

$(function(){ // 加载签章数据 $('#Signature').datagrid({ width:'auto', //height:450, ...
  • zona_wzq
  • zona_wzq
  • 2017-03-14 23:15:27
  • 1685

easyui主界面传统布局,tab页面等

  • huangbaokang
  • huangbaokang
  • 2017-08-28 14:32:11
  • 743

easyui 搭建页面

本文讲述了如何使用easyui来搭建一个简单的界面来当做后台管理系统的主界面...
  • zys_1997
  • zys_1997
  • 2017-04-28 17:46:14
  • 1365

19套漂亮的Easy-UI 模板+登录页面模板,后台界面模板

  • 2017年10月11日 08:51
  • 577KB
  • 下载

MVC自带异步请求

@{ Layout = null; } MicrosoftAjax function afterSuccess(dat...
  • AinSnow
  • AinSnow
  • 2015-01-14 21:34:25
  • 5629

jQuery Mobile 表单基础

1、jQuery Mobile 表单结构    jQuery Mobile 使用 CSS 为 HTML 表单元素添加样式,让它们更具吸引力,更易于使用。在 jQuery Mobile 中,您可以使用...
  • qq_27626333
  • qq_27626333
  • 2016-07-20 21:36:43
  • 2218

微信公众号开发——网页授权 (页面分享 、获取用户基本信息)

第一步:要用到的接口文档如下第二步:使用网页服务,公众号需要如下配置1.设置 授权回调页面域名2.设置 JS接口安全域名设置(点击公众号左边菜单 公众号设置 进入设置页面 点击 功能设置)上代码BLL...
  • u014742815
  • u014742815
  • 2016-09-29 09:04:21
  • 6386

<meta name="viewport" content="width=device-width...

网页手机wap2.0网页的head里加入下面这条元标签,在iPhone的浏览器中页面将以原始大小显示,并不允许缩放。 width - viewport的宽度 height - viewport的...
  • kongdaoxian
  • kongdaoxian
  • 2011-10-14 20:09:02
  • 24004

jQuery Mobile 按钮图标

1、添加图标到 jQuery Mobile 按钮 我们可以使用 ui-icon 类将图标添加到按钮上,并可以使用指定类来设置按钮位置。 Search 注意: 在其他方式的按钮上,如列表或表单中的...
  • qq_27626333
  • qq_27626333
  • 2016-07-20 20:33:26
  • 3011

jQuery Mobile 表格

1、响应式表格    响应式设计一般用于适配用户各种移动设备。我们只需要使用一个简单的类名,jQuery Mobile 就能根据屏幕的尺寸自动调整页面内容。响应式表格让页面内容在移动端和桌面设备上能...
  • qq_27626333
  • qq_27626333
  • 2016-07-20 21:01:30
  • 2503
    个人资料
    持之以恒
    等级:
    访问量: 96万+
    积分: 1万+
    排名: 1076
    最新评论