zoukankan      html  css  js  c++  java
  • EasyUi – 2.布局Layout + 3.登录界面

    1.页面布局

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="index.aspx.cs" Inherits="Easyui.Web.index" %>
    
    <!DOCTYPE html>
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>XX科技 - 监控</title>
        <script src="Scripts/jquery-easyui-1.3.2/jquery-1.8.0.min.js"></script>
        <script src="Scripts/jquery-easyui-1.3.2/jquery.easyui.min.js"></script>
        <link href="Scripts/jquery-easyui-1.3.2/themes/default/easyui.css" rel="stylesheet">
        <link href="Scripts/jquery-easyui-1.3.2/themes/icon.css" rel="stylesheet" />
        <script src="Scripts/jquery-easyui-1.3.2/locale/easyui-lang-zh_CN.js"></script>
    
        <style>
            .nav-item
            {
                text-align: center;
            }
    
            .nav-item a
            {
                color: #000;
                text-decoration: none;
            }
            /*菜单js打开tab出现的滚动条隐藏*/
            .panel-body-noborder
            {
                overflow: hidden;
            }
        </style>
    
        <script type="text/javascript">
            $(function () {
    
            })
    
            function addTab(title, href) {
                var tt = $('#main-center');
                if (tt.tabs('exists', title)) {
                    tt.tabs('select', title);
                } else {
                    if (href) {
                        var content = '<iframe scrolling="yes" frameborder="0"  src="' + href + '" style="100%;height:100%;"></iframe>';
                    } else {
                        var content = '未实现';
                    }
                    tt.tabs('add', {
                        title: title,
                        closable: true,
                        content: content
                    });
                }
            }
        </script>
    </head>
    <body id="cc" class="easyui-layout">
        <div data-options="region:'north',split:true" style="height: 50px; background-color: gray"></div>
        <div data-options="region:'west',title:'导航菜单',split:true" style=" 150px;">
            <div id="aa" class="easyui-accordion" fit="true" style="height: auto;">
                <div title="设备监控" data-options="iconCls:'icon-save'" style="overflow: auto; padding: 10px;">
                    <div class="nav-item">
                        <a href="javascript:addTab('设备申购')">
                            <img src="images/kdmconfig.png"></img><br />
                            <span>设备申购</span>
                        </a>
                    </div>
                    <div class="nav-item">
                        <a href="javascript:addTab('设备档案','device/index')">
                            <img src="images/hammer_32.png"></img><br />
                            <span>设备档案</span>
                        </a>
                    </div>
                    <div class="nav-item">
                        <a href="javascript:addTab('设备申购')">
                            <img src="images/kdmconfig.png"></img><br />
                            <span>设备申购</span>
                        </a>
                    </div>
                </div>
                <div title="系统设置" data-options="iconCls:'icon-wrench-screwdriver'" style="padding: 10px;">
                    <div title="业务操作" selected="true" style="overflow: auto;">
                        <div class="nav-item">
                            <a href="javascript:addTab('用户管理','AdminUser/main.html')">
                                <img src="images/32/users_business_32.png"></img><br />
                                <span>用户管理</span>
                            </a>
                        </div>
                        <div class="nav-item">
                            <a href="javascript:addTab('设备申购')">
                                <img src="images/kdmconfig.png"></img><br />
                                <span>操作日志</span>
                            </a>
                        </div>
                        <div class="nav-item">
                            <a href="javascript:addTab('设备维修')">
                                <img src="images/package_settings.png"></img><br />
                                <span>设备维修</span>
                            </a>
                        </div>
                    </div>
    
                </div>
            </div>
        </div>
        <div data-options="region:'center'" style="padding: 5px; background: #eee;">
            <div id="main-center" class="easyui-tabs" fit="true" border="false">
                <div title="首页" style="padding: 20px;">
                    <img src="images/banner.gif"></img>
                    <div style="margin-top: 20px;">
                        <p>xxxx有限公司。</p>
                        <p>&nbsp;</p>
                        <p>监控平台。</p>
                        <p>&nbsp;</p>
                    </div>
                </div>
            </div>
        </div>
    </body>
    </html>

    image

    2.登录界面

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>用户登录 - 防盗器监控管理系统</title>
        <link href="css/sexybuttons.css" rel="stylesheet" type="text/css" />
        <link href="css/mainlogin.css" rel="stylesheet" type="text/css" />
        <script src="Scripts/jquery-easyui-1.3.2/jquery-1.8.0.min.js"></script>
        <script src="Scripts/jquery-easyui-1.3.2/jquery.easyui.min.js"></script>
        <link href="Scripts/jquery-easyui-1.3.2/themes/default/easyui.css" rel="stylesheet">
        <link href="Scripts/jquery-easyui-1.3.2/themes/icon.css" rel="stylesheet" />
        <script src="Scripts/jquery-easyui-1.3.2/locale/easyui-lang-zh_CN.js"></script>
    
        <script type="text/javascript">
    
            var LoginAndReg;
    
            function login() {
                var txtUserName = $("#txtUserName");
                var txtPassword = $("#txtPassword");
    
                if (txtUserName.val() == "") {
                    alert("请输入用户名!");
                    txtUserName.focus();
                    return false;
                } else if (txtPassword.val() == "") {
                    alert("请输入密码!");
                    txtPassword.focus();
                    return false;
                } else {
                    //$("#btnLogin").click(function () {
                        console.info($("#txtPassword").val());
                        var user = encodeSTR($("#txtUserName").val());
                        var pass = encodeSTR($("#txtPassword").val());
                    $.post(
                        "Login.ashx",
                        { txtUsername: user, txtPass: pass, },
                        
                                    function (e) {
                                        console.info(e);
                                        alert(e);
                                        if (e == "登录成功!") {
                                            window.location.href = "index.aspx";
                                        }
                                    }, "html"
                                );
                    //});
    
    
                }
            }
    
    
            function encodeSTR(str) {
    
                var t = "";
    
                for (var x = 0; x < str.length; x++) {
    
                    var a = str.charCodeAt(x);
    
                    if (x != 0) {
                        t += '|';
                    }
    
                    t += new Number(a).toString(10);
                }
    
                return t;
            }
    
            function decodeSTR(str) {
    
                var a1 = str.split('|');
    
    
                for (var x = 0; x < a1.length; x++) {
                    a1[x] = String.fromCharCode(a1[x]);
                }
    
                return a1.join('');
            }
    
    
            function getsize() {
                var windowHeight = 0;
                var widowWidth = 0;
                if (typeof (window.innerHeight) == 'number') {
                    windowHeight = window.innerHeight;
                    widowWidth = window.innerWidth;
                }
                else {
                    if (document.documentElement && document.documentElement.clientHeight) {
                        windowHeight = document.documentElement.clientHeight;
                        widowWidth = document.documentElement.clientWidth;
                    }
                    else {
                        if (document.body && document.body.clientHeight) {
                            windowHeight = document.body.clientHeight;
                            widowWidth = document.body.clientWidth;
                        }
                    }
                }
    
                return {  widowWidth, height: windowHeight };
            }
    
    
            $(function () {
    
                $('#btnLogin').click(function () { login(); return false; });
                //响应键盘的回车事件
                //$(this).keydown(function (event) {
                //    if (event.keyCode == 13) {
                //        event.returnValue = false;
                //        event.cancel = true;
                //        return login();
                //    }
                //});
                //$('#txtorgcode').combobox({
                //    data:orgdata,valueField:'id',textField:'text',panelHeight:'300',160
                //})
            })
    
        </script>
    </head>
    <body>
        <div id="LoginCircle">
            <div id="LoginDoc">
                <div id="SysName"></div>
    
                <form id="LoginFrom" method="post">
                    <div id="SysInput">
                        <!--<ul>
                        <li>单位代码:</li>
                        <li>
                            <input id="txtorgcode" name="orgcode" value="" type="text" class="InputStyle" maxlength="18" /></li>
                    </ul>-->
                        <ul>
                            <li>用户名:</li>
                            <li>
                                <input id="txtUserName" name="username" value="" type="text" class="InputStyle" maxlength="18" /></li>
                        </ul>
                        <ul>
                            <li>&nbsp;&nbsp;&nbsp;码:</li>
                            <li>
                                <input name="password" type="pass" class="InputStyle" value="" id="txtPassword" /></li>
                        </ul>
                        <ul>
                            <li>&nbsp;</li>
                        </ul>
                        <ul>
                            <li></li>
                            <li>
                                <div style=" 170px; text-align: left">
                                    <button class="sexybutton" id="btnLogin"><span><span><span class="usergo">登录</span></span></span></button>&nbsp;
                                    <button class="sexybutton" type="reset"><span><span><span class="reload">重置</span></span></span></button>
                                </div>
                            </li>
    
                        </ul>
                    </div>
                </form>
                <div class="clear">
                </div>
            </div>
        </div>
        <div id="Copy">
            <font color="red">防盗器监控管理系统</font> Version 1.0 由XX科技提供技术支持!
            <br />
        </div>
    </body>
    </html>

    一般处理程序

    Login.ashx

    using System;
    using System.Collections.Generic;
    using System.Data;
    using System.Data.Common;
    using System.Data.SqlClient;
    using System.Linq;
    using System.Web;
    using System.Web.SessionState;
    using Easyui.Common;
    using Easyui.Common.DEncrypt;
    
    namespace Easyui.Web
    {
      
         //<summary>
         //Login 的摘要说明
         //</summary>
        public class Login : IHttpHandler
        {
            HttpRequest Request;
            HttpResponse Response;
            HttpSessionState Session;
            HttpServerUtility Server;
            HttpCookie Cookie;
            public void ProcessRequest(HttpContext context)
            {
                context.Response.Buffer = true;
                context.Response.ExpiresAbsolute = DateTime.Now.AddDays(-1);
                context.Response.AddHeader("pragma", "no-cache");
                context.Response.AddHeader("cache-control", "");
                context.Response.CacheControl = "no-cache";
                context.Response.ContentType = "text/plain";
                Request = context.Request;
                Response = context.Response;
                Session = context.Session;
                Server = context.Server;
    
                //string userName =  PageValidate.InputText(decodeSTR(Request["txtUsername"].ToString()), 30);
                //string Password = PageValidate.InputText(decodeSTR(Request["txtPassword"].ToString()), 30);
                string userName = Request["txtUsername"].ToString();
                string Password = Request["txtPass"].ToString();
    
    
                    Easyui.BLL.TUser person = new Easyui.BLL.TUser();
                    DESEncrypt encrypt = new DESEncrypt();
    
                    //userName = encrypt.Encrypto(userName);
                    //Password = encrypt.Encrypto(Password);
    
                    bool checkPass = person.UserCheckIn11(decodeSTR(userName.ToString()), decodeSTR(Password.ToString()));
    
                    if (!checkPass)
                    {
    
                        Response.Write("登陆失败!");
                    }
                    else
                    {
                        //person.UserHistoryAdd(userName);
                        //Session["userName"] = userName;
                        //person.Log("登录成功!");
                        //this.Response.Redirect("index.aspx");
                        Response.Write("登录成功!");
                    }
                
            }
    
            public bool IsReusable
            {
                get
                {
                    return false;
                }
            }
    
    
            private string decodeSTR(string str)
            {
    
                string[] str1 = str.Split('|');
    
                string str2 = null;
    
                foreach (var item in str1)
                {
    
                    str2 += (char)int.Parse(item);
    
                }
    
                return str2;
    
            }
            public string encode(string str)
            {
                var t = "";
    
                for (var x = 0; x < str.Length; x++)
                {
    
                    var a = Convert.ToByte(str[x]);
    
                    if (x != 0)
                    {
                        t += '|';
                    }
    
                    t += a;
                }
                return t;
            }
    
    
    
            ///// <summary>
            ///// 用户登录 用户登录信息加入
            ///// </summary>
            ///// <param name="UserName"></param>
            ///// <param name="PassWord"></param>
            ///// <returns></returns>
            ////public bool UserCheckIn(string UserName, string PassWord)
            //{
            //    DbCommand dbcommand = db.GetStoredProcCommand("Person_UserCheckIn");
    
            //    db.AddInParameter(dbcommand, "@UserName", DbType.AnsiString, UserName);
            //    db.AddInParameter(dbcommand, "@PassWord", DbType.AnsiString, PassWord);
            //    dbcommand.CommandType = CommandType.StoredProcedure;
    
            //    SqlDataReader sdr = (SqlDataReader)db.ExecuteReader(dbcommand);
    
            //    if (sdr.Read())
            //    {
            //        if (System.Convert.ToInt32(sdr["rowc"]) > 0)
            //        {
            //            HttpContext context = HttpContext.Current;
            //            context.Session["UserName"] = UserName;
            //            context.Session["UserClass"] = sdr["Usertype"];
            //            context.Session["Psn_id"] = sdr["Psn_id"];
            //            context.Session["Name"] = sdr["Name"];
            //            context.Session["Depart_id"] = sdr["Depart_id"];
            //            context.Session["DepartName"] = sdr["DepartName"];
            //            sdr.Close();
            //            return true;
            //        }
            //    }
            //    else
            //    {
            //        sdr.Close();
            //    }
            //    return false;
            //}
    
        }
    }

    借用  疯狂秀才 的界面。

    image

  • 相关阅读:
    CSS Transform让百分比宽高布局元素水平垂直居中
    Apache配置详解
    MAMP环境配置
    ajax 设置Access-Control-Allow-Origin实现跨域访问
    Git常用命令
    ThinkPHP3.2.3批量执行sql语句(带事务)
    MySQL 百万级分页优化(Mysql千万级快速分页)
    zabbix server端与agent端源码安装 自定义监控项
    Tomcat多实例集群架构 安全优化和性能优化
    Tomcat安装应用部署及配置文件解读
  • 原文地址:https://www.cnblogs.com/tangge/p/3224595.html
Copyright © 2011-2022 走看看