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.(同一张图片仅仅需要加载一次就够了,下 ...
随机推荐
- Method Swizzling和AOP(面向切面编程)实践
Method Swizzling和AOP(面向切面编程)实践 参考: http://www.cocoachina.com/ios/20150120/10959.html 上一篇介绍了 Objectiv ...
- hiho #1305 区间求差
#1305 : 区间求差 时间限制:10000ms 单点时限:1000ms 内存限制:256MB 描述 给定两个区间集合 A 和 B,其中集合 A 包含 N 个区间[ A1, A2 ], [ A3, ...
- Android九点图（Nine-Patch）制作及应用
你可能之前还没有听说过Nine-Patch这个名词,它是一种被特殊处理过PNG图片,能够指定哪些区域可以被拉伸而哪些区域不可以. 现在我将手把手教你如何去制作一张九点PNG图像. ---------- ...
- JSP Servlet WEB生命周期
[转载] JavaWeb的生命周期是由Servlet容器来控制的总的来说分为三个阶段1.启动阶段:加载web应用相关数据,创建ServletContext对象,对Filter和servlet进行初始化 ...
- VC中基于 Windows 的精确定时[转]
在工业生产控制系统中,有许多需要定时完成的操作,如定时显示当前时间,定时刷新屏幕上的进度条,上位 机定时向下位机发送命令和传送数据等.特别是在对控制性能要求较高的实时控制系统和数据采集系统中,就更需要 ...
- Scala教程
Scala表示可扩展性语言,是一种混合函数式编程语言.它是由Martin Odersky创建,并于2003年首次发布. Scala平滑地集成面向对象和函数式语言的特点,并且Scala被编译在Java虚 ...
- [20160731]read a file and print it on the screen
//read a file and print it on the screen import java.io.*; public class MyPrintStreamTest2{ public s ...
- (转)利用eclipse external tool 执行mvn jetty:run
一.如果这个工程是标准的maven-webapp那么基本上不用修改,直接运行jetty:run就可以执行. 但是有时候会报错说 [ERROR] No plugin found for prefix ' ...
- Selenium WebDriver 处理table
首先,html table是由 table 元素以及一个或多个 tr.th 或 td 元素组成. for example: 这是一个简单的html table: 源码如下: <html> ...
- 【关于服务器端SQL Server 2008的设置】 使其他客户端机可通过ODBC数据源可访问
服务器系统:Server 2003 数据库:SQL Server 2005 服务器配置:开启服务:server.workstation(这两个服务对于提供局域网共享有很大作用) 关闭防火墙 开启gue ...