Easyui后台管理界面设计
2024-05-06 21:14:20
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'" οnclick="javascript:$('#login').dialog('close')">取消</a><a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-ok'" οnclick="">登陆</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后台管理界面设计相关推荐
- 网站后台管理界面设计的一些想法
一.最常见的网站后台管理的界面布局 1.头部 2.菜单 3.主要工作区域 4.底部 二.工作区的交互设计 后台操作管理的主要工作区域在图示的区域3,古老的网站后台管理程序中,区域3被设计成一次只能展示 ...
- Easyui 搭建后台管理界面
Easyui是目前后台管理界面使用比较流行的框架. 以下是我个人初学Easyui api后搭建的后台管理界面. 框架使用jquery-easyui-1.5.3 首页main.jsp代码,主要使用eas ...
- 基于bootstrap的漂亮网站后台管理界面框架汇总
基于bootstrap的漂亮网站后台管理界面框架汇总 10个最新的 Bootstrap 3 管理模板 这里分享的 10 个模板是从最新的 Bootstrap 3 管理模板集合中挑选出来的,可以帮助你用 ...
- 吐血推荐50个高端大气上档次的后台管理界面模板
UI设计 | 2013-09-03 通过使用漂亮的管理面板你可以省掉很多的时间,同样,设计良好的界面也适合在移动终端上使用,从而减少对PC的依赖和提供管理的灵活性. 这里收集了50个高端大气上档次 ...
- 设备管理系统html,蓝色的远程监控设备系统后台管理界面html模板
模板名称: 蓝色的远程监控设备系统后台管理界面html模板 模板页面: actions.html.add.html.apikey_manage.html.batch.html.change_passw ...
- django language_Python+Django— 入门通关（三）| admin：后台管理界面
本节主要告诉大家如何使用Django的后台管理界面. 本节课程代码: https://pan.baidu.com/s/1AfxetY12AjMrILoVml6eCw 提取码:2kle 更多Django ...
- vuejs 和 element 搭建的一个后台管理界面【收藏】
介绍: 这是一个用vuejs2.0和element搭建的后台管理界面. 相关技术: vuejs2.0:渐进式JavaScript框架,易用.灵活.高效,似乎任何规模的应用都适用. element:基于 ...
- vuejs 和 element 搭建的一个后台管理界面
介绍: 这是一个用vuejs2.0和element搭建的后台管理界面. 相关技术: vuejs2.0:渐进式JavaScript框架,易用.灵活.高效,似乎任何规模的应用都适用. element:基于 ...
- python3 django html 中文乱码_解决django后台管理界面添加中文内容乱码问题
在学习使用django做一个简单的个人博客项目,通过admin后台添加中文文章内容的时候,遇到中文内容显示乱码的问题. 排除了网上资料中的提到的几个问题: 1.数据上传默认采用的是unicode编码 ...
最新文章
- 找出前50个素数，构成素数表
- 求python一个类与对象的代码_Python基础系列（五）类和对象，让你更懂你的python代码...
- android message to iphone,这款应用可以将苹果的iMessage带到安卓系统
- 利用Minst数据集训练原生GAN网络
- 新浪微博表情代码以及对应的gif图片url
- R软件中调用windows字体二
- （AS笔记）Android 实现第三方QQ登录——QQ互联
- 绿城离职员工万言书全文
- arcgis生成等高线CAD无法识别高程
- 活动报名丨AI ProCon 2020火爆来袭！
- 我热爱生命本来的样子
- 无限乱斗连接服务器失败,LOL新版无限乱斗模式服务器挤爆怎么办 客户端哪些功能被限制...
- XXL-Job Docker部署
- LoadRunner 常用函数大全+1
- 北大新任校长王恩哥的10句话
- Kindle Fire v6.3 root 教程
- 云计算奇妙学习之旅第一期：初识云计算
- 大三成长日记——第二弹（批处理bat篇）
- TCP/IP four-storey model
- 软件工程课开学测试——根据已有的CSS模板资源，搭建整个系统