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="width: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="width: 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="data:images/kdmconfig.png"></img><br />
<span>设备申购</span>
</a>
</div>
<div class="nav-item">
<a href="javascript:addTab('设备档案','device/index')">
<img src="data:images/hammer_32.png"></img><br />
<span>设备档案</span>
</a>
</div>
<div class="nav-item">
<a href="javascript:addTab('设备申购')">
<img src="data: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="data:images/32/users_business_32.png"></img><br />
<span>用户管理</span>
</a>
</div>
<div class="nav-item">
<a href="javascript:addTab('设备申购')">
<img src="data:images/kdmconfig.png"></img><br />
<span>操作日志</span>
</a>
</div>
<div class="nav-item">
<a href="javascript:addTab('设备维修')">
<img src="data: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="data:images/banner.gif"></img>
<div style="margin-top: 20px;">
<p>xxxx有限公司。</p>
<p> </p>
<p>监控平台。</p>
<p> </p>
</div>
</div>
</div>
</div>
</body>
</html>
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 { width: 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',width: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>密 码：</li>
<li>
<input name="password" type="pass" class="InputStyle" value="" id="txtPassword" /></li>
</ul>
<ul>
<li> </li>
</ul>
<ul>
<li></li>
<li>
<div style="width: 170px; text-align: left">
<button class="sexybutton" id="btnLogin"><span><span><span class="usergo">登录</span></span></span></button>
<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(-);
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 = ; x < str.Length; x++)
{ var a = Convert.ToByte(str[x]); if (x != )
{
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;
//} }
}
借用 疯狂秀才 的界面。
EasyUi – 2.布局Layout + 3.登录界面的更多相关文章
- EasyUi – 2.布局Layout + 3.登录界面
1.页面布局 <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="index.a ...
- 布局(layout)文件图形界面不能显示：An error has occurred. See error log for more details. java.lang.NullPointe
#问题解析# Android工程中Layout文件夹下的布局文件图形界面无法显示,一般发生这种情况在导入工程操作后极易出现,因为可能eclipse使用的sdk版本不同,target类型不同,所用And ...
- [转]Android：布局实例之模仿QQ登录界面
Android:布局实例之模仿QQ登录界面 预览图: 准备: 1.找到模仿对象 QQ登陆界面UI下载>>>>> 2.导入工程 3.查看布局结构和使用控件 其对应效果图分布 ...
- Android：布局实例之模仿QQ登录界面
预览图: 准备: 1.找到模仿对象 QQ登陆界面UI下载>>>>> 2.导入工程 3.查看布局结构和使用控件 其对应效果图分布为 4.分析样式选择器 下拉箭头2种样式:点 ...
- 前端框架 EasyUI （2）页面布局 Layout
在 Web 程序中,页面布局对应用程序的用户体验至关重要. 在一般的信息管理类的 Web 应用程序中,页面结构通常有一个主工作区,然后在工作区上下左右靠近边界的区域设置一些边栏,用于显示信息或放置一些 ...
- QQ登录界面布局
简单的qq登录界面布局 <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmln ...
- 基于easyUI实现登录界面
此文章是基于 EasyUI+Knockout实现经典表单的查看.编辑 一. 准备工作 1. 点击此下载相关文件,并把文件放到 ims 工程对应的文件夹下 二. 相关文件介绍 1. login.jsp: ...
- Android：布局实例之模仿京东登录界面
预览图及布局结构参考: 布局: <?xml version="1.0" encoding="utf-8"?> <RelativeLayout ...
- swing实现QQ登录界面1.0（ 实现了同一张图片只加载一次）、（以及实现简单的布局面板添加背景图片控件的标签控件和添加一个关闭按钮控件）
swing实现QQ登录界面1.0( 实现了同一张图片只加载一次).(以及实现简单的布局面板添加背景图片控件的标签控件和添加一个关闭按钮控件) 代码思路分析: 1.(同一张图片仅仅需要加载一次就够了,下 ...
随机推荐
- sizeof和小部分c++语法
ios 中 sizeof(类型) 获取类型所占字节 32位操作系统中, 每个字节占8个位 64位操作系统中, 每个字节占16个位 INT_MAX 2147483647 int size1 = siz ...
- 【Networking】容器网络大观 && SDN 资料汇总
SDNLAB技术分享(十五):容器网络大观 SDNLAB君• 16-06-17 •2957 人围观 编者按:本文系SDNLAB技术分享系列,本次分享来自SDN撕X群(群主:大猫猫)群直播,我们希望 ...
- Redis系列-配置文件小结
如果不指定配置文件,Redis也可以启动,此时,redis使用默认的内置配置.不过在正式环境,常常通过配置文件[通常叫redis.conf]来配置redis. redis.conf配置格式如下: ke ...
- POJ 2769
http://poj.org/problem?id=2796 题意:求n个数的和乘以这n个数中的最小值的积最大的数,以及其范围. 思路:求每一个数两边的比其大的数的和,再乘以这个数.还有一个范围,用单 ...
- default constructor,copy constructor,copy assignment
C++ Code 12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849 ...
- CEF3开发者系列之工程和代码结构
CEF支持一系列的编程语言和操作系统,并且能很容易地整合到新的或已有的工程中去.它的设计思想就是易用且兼顾性能. CEF3支持一系列的编程语言和操作系统,并且能很容易地整合到新的或已有的工程中去.它的 ...
- Unity3D研究院之手游开发中所有特殊的文件夹(转)
这里列举出手游开发中用到了所有特殊文件夹. 1.Editor Editor文件夹可以在根目录下,也可以在子目录里,只要名子叫Editor就可以.比如目录:/xxx/xxx/Editor 和 /Edi ...
- ios bitcode 机制对 dsym 调试文件的影响
今天想试试用dsym和crash文件跟踪crash信息,可是一直返回如下信息: Thread name: Dispatch queue: com.apple.main-thread Thread Cr ...
- google API 点连线
这个是模拟的数据,用于测试,为了方便学习 弹出框信息都是固定的,以及操作都不是写的循环,实际开发用 setInterval 或者for 以减少冗余. <!DOCTYPE html> < ...
- java读取excel
/* * this function will read from excel * and will return the items of excel */ public static String ...