easyui框架首页封装

最新推荐文章于 2024-01-18 04:10:25 发布
最新推荐文章于 2024-01-18 04:10:25 发布
阅读量435 收藏
点赞数
分类专栏： easyui-api 文章标签： easyui框架首页封装
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/huangbaokang/article/details/103470463
版权

主持右键菜单，Tab操作

var _menus = null;

$(function(){
	InitLeftMenu();
	tabClose();
	tabCloseEven();
	
	$('#tabs').tabs({
        onSelect: function (title) {
            var currTab = $('#tabs').tabs('getTab', title);
            var iframe = $(currTab.panel('options').content);

			var src = iframe.attr('src');
			if(src)
				$('#tabs').tabs('update', { tab: currTab, options: { content: createFrame(src)} });

        }
    });
});


//初始化左侧
function InitLeftMenu() {
	$("#nav").accordion({animate:false});
	
	$.ajax({
		async:false,
		cache:false,
		type: 'POST',
		dataType: "json",
		url: path+'/userlogin/pingMenu',//请求的action路径
		error: function () {//请求失败处理函数
			alert('请求失败');
		},success:function(data){
			 _menus = data;
		}
	});
	
    $.each(_menus, function(i, n) {
		var menulist ='';
		menulist +='<ul>';
        $.each(n.menus, function(j, o) {
			menulist += '<li><div><a ref="'+o.menuid+'" href="#" rel="' + path + o.url + '" ><span class="icon '+o.icon+'" >&nbsp;</span><span class="nav">' + o.menuname + '</span></a></div></li> ';
        });
		menulist += '</ul>';

		$('#nav').accordion('add', {
            title: n.menuname,
            content: menulist,
            iconCls: 'icon ' + n.icon
        });

    });

	$('.easyui-accordion li a').click(function(){
		var tabTitle = $(this).children('.nav').text();

		var url = $(this).attr("rel");
		var menuid = $(this).attr("ref");
		var icon = getIcon(menuid,icon);

		addTab(tabTitle,url,icon);
		$('.easyui-accordion li div').removeClass("selected");
		$(this).parent().addClass("selected");
	}).hover(function(){
		$(this).parent().addClass("hover");
	},function(){
		$(this).parent().removeClass("hover");
	});

	//选中第一个
	var panels = $('#nav').accordion('panels');
	var t = panels[0].panel('options').title;
    $('#nav').accordion('select', t);
}
//获取左侧导航的图标
function getIcon(menuid){
	var icon = 'icon ';
	$.each(_menus, function(i, n) {
		 $.each(n.menus, function(j, o) {
		 	if(o.menuid==menuid){
				icon += o.icon;
			}
		 });
	});

	return icon;
}

function createTab(subtitle,url,icon){
	if(!$('#tabs').tabs('exists',subtitle)){
		$('#tabs').tabs('add',{
			title:subtitle,
			content:createFrame(url),
			closable:true,
			icon:icon
		});
	}else{
		var tab = $('#tabs').tabs('getTab',subtitle);  // get selected panel
		$("#tabs").tabs('update',{
	        tab:tab,
	        options:{
	           title:subtitle,
	           content:createFrame(url),
		       closable:true,
		       fit:true,
		       selected:true,
		       icon:icon
	        }
		});
		
		$('#tabs').tabs('select',subtitle);
	}
}
function createMainTab(subtitle,url,icon){
	
	
	$('#tabs').tabs('add',{
		title:subtitle,
		content:createFrame(url),
		closable:false,
		icon:icon,
	});
	
}
function createFrame(url)
{
	var s = '<iframe scrolling="auto" frameborder="0"  src="'+url+'" style="width:100%;height:100%;"></iframe>';
	return s;
}

function tabClose()
{
	/*双击关闭TAB选项卡*/
	$(".tabs-inner").dblclick(function(){
		var subtitle = $(this).children(".tabs-closable").text();
		$('#tabs').tabs('close',subtitle);
	});
	/*为选项卡绑定右键*/
	$(".tabs-inner").bind('contextmenu',function(e){
		$('#mm').menu('show', {
			left: e.pageX,
			top: e.pageY
		});

		var subtitle =$(this).children(".tabs-closable").text();

		$('#mm').data("currtab",subtitle);
		$('#tabs').tabs('select',subtitle);
		return false;
	});
}
//绑定右键菜单事件
function tabCloseEven()
{
	//刷新
	/*$('#mm-tabupdate').click(function(){
		var currTab = $('#tabs').tabs('getSelected');
		var url = $(currTab.panel('options').content).attr('src');
		$('#tabs').tabs('update',{
			tab:currTab,
			options:{
				content:createFrame(url)
			}
		})
	})*/
	//关闭当前
	$('#mm-tabclose').click(function(){
		var currtab_title = $('#mm').data("currtab");
		$('#tabs').tabs('close',currtab_title);
	});
	//全部关闭
	$('#mm-tabcloseall').click(function(){
		$('.tabs-inner span').each(function(i,n){
			var t = $(n).text();
			if(t!='首页'){
				$('#tabs').tabs('close',t);
			}
		});
	});
	//关闭除当前之外的TAB
	$('#mm-tabcloseother').click(function(){
		$('#mm-tabcloseright').click();
		$('#mm-tabcloseleft').click();
	});
	//关闭当前右侧的TAB
	$('#mm-tabcloseright').click(function(){
		var nextall = $('.tabs-selected').nextAll();
		if(nextall.length==0){
			//msgShow('系统提示','后边没有啦~~','error');
			alert('后边没有啦~~');
			return false;
		}
		nextall.each(function(i,n){
			var t=$('a:eq(0) span',$(n)).text();
			if(t!='首页'){
				$('#tabs').tabs('close',t);
			}
		});
		return false;
	});
	//关闭当前左侧的TAB
	$('#mm-tabcloseleft').click(function(){
		var prevall = $('.tabs-selected').prevAll();
		if(prevall.length==0){
			alert('到头了，前边没有啦~~');
			return false;
		}
		prevall.each(function(i,n){
			var t=$('a:eq(0) span',$(n)).text();
			if(t!='首页'){
				$('#tabs').tabs('close',t);
			}
		});
		return false;
	});

	//退出
	$("#mm-exit").click(function(){
		$('#mm').menu('hide');
	});
}

//弹出信息窗口 title:标题 msgString:提示信息 msgType:信息类型 [error,info,question,warning]
function msgShow(title, msgString, msgType) {
	$.messager.alert(title, msgString, msgType);
}

首页页面

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1">
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>xxxxxxxxxxxxxxxxx管理系统</title>
	<%@ include file="/jsp/headCommon.jsp"%>
	<style type="text/css">
		a:hover {
			text-decoration: none;
		}
		
		a:link {
			text-decoration: none;
		}
	</style>
	
    <script type="text/javascript"  charset="utf-8">

		
     //设置登录窗口
     function openPwd() {
    	 add('修改密码','<%=path%>/userlogin/doUpwd?id=${login_id}','pencil',400,120);
     }
     
     //选择期号
     function openPeriod() {
    	 openwindow('选择期号','<%=path%>/userlogin/doChoosePeriod',750,400);
     }

     $(function() {
     	var urlPP="<%=path%>";
     	addMainTab("首页",urlPP+"/main/home","icon-cologne-home");
         
         function currentTime(){
         	var d = new Date(),str = '';
         	 str += d.getFullYear()+'年';
         	 str  += d.getMonth() + 1+'月';
         	 str  += d.getDate()+'日';
         	 str += d.getHours()+'时'; 
         	 str  += d.getMinutes()+'分'; 
         	str+= d.getSeconds()+'秒'; 
         	return str;
         	}
         	setInterval(function(){$('#timerSpan').html(currentTime);},1000);
         
         $('#cicon01').click(function() {
             openPwd();
         });

         $('#loginOut').click(function() {
        	 $.messager.confirm('系统提示', '您确定要退出本次登录吗?', function(r) {
                 if (r) {
                     location.href = '<%=path%>/loginOut';
                 }
             });
         });
     });
		
    </script>
</head>
<body class="easyui-layout" style="overflow-y: hidden"  scroll="no">

<!--
<noscript>
<div style=" position:absolute; z-index:100000; height:2046px;top:0px;left:0px; width:100%; background:white; text-align:center;">
    <img src="images/noscript.gif" alt='抱歉，请开启脚本支持！' />
</div>
</noscript>

-->
<style type="text/css">
		*{margin:0;padding:0}
		body{ position:relative;overflow-x:hidden;}
		.headerit{overflow: hidden;height:90px; background:url(<%=path%>/images/lhp_headbg.jpg) no-repeat center top; line-height: 0px; color: rgb(255, 255, 255); font-family: Verdana, 微软雅黑, 黑体; width:1440px}
		.optionit{display:block;height:80px;line-height: 70px;float:right;width:300px;padding-right:20px}
		#cicon01{display:block;float:right;width:50px;height:70px;text-indent:-44444px;background:url(<%=path%>/images/lhp_ico01_04.png) no-repeat 0 0;margin-left:10px;}
		#cicon01:hover{background-image:url(<%=path%>/images/lhp_ico01_on_04.png);}
		#editpass{display:block;float:right;width:65px;height:74px;text-indent:-44444px;background:url(<%=path%>/images/c_icon02.png) no-repeat 0 0;margin-top:10px;margin-left:20px;}
		#editpass:hover{background-image:url(<%=path%>/images/c_icon02-on.png);}
		#loginOut{display:block;float:right;width:50px;height:60px;text-indent:-44444px;background:url(<%=path%>/images/lhp_ico02_04.png) no-repeat 0 0;margin-left:10px;}
		#loginOut:hover{background-image:url(<%=path%>/images/lhp_ico02_on_04.png);}
		.by_txt{font-size:12px; font-family:"宋体"; font-weight:100; padding-left:70px; float:left; display:inline}
	</style>
	
    
    <div region="north" split="true" border="false" class="layout-body panel-body panel-body-noheader panel-body-noborder headerit" title="">
        <span class="optionit">
        <span class="by_txt"></span>
	        <a href="#" id="loginOut">退出</a>
	        <a href="#" id="cicon01">修改密码</a>
	    </span>
        <span style="font-size: 16px; ">
	        <img src="<%=path%>/images/lhp_logo_02.jpg" align="absmiddle" alt="xxxxxxxx业务技术平台" />
        </span>
    </div>
    
    <style>
    .top-bar { position: absolute; width: 100%; height: 22px; top: 0; left: 0; }
	.top-bar-left { position: absolute; width: 500px; height: 22px; }
	.top-bar-right { position: absolute; width: 400px; height: 22px; right: 0; }
	.top-bar-right #timerSpan { position: absolute; padding-top: 5px; right: 10px; }
	.top-bar-right #periodSpan { position: absolute; padding-top: 5px; right: 10px; }
	.top-bar-right #themeSpan { position: absolute; width: 350px; top: 24px; right: 5px; text-align: right; }
	
	.top-toolbar { position: absolute; font-weight: normal; padding: 0; width: 100%; height: 28px; top: 60px; left: 0; border-top-width: 1px; border-bottom-width: 0; z-index: 100; }
	.top-toolbar-topmost { top: 0px; height: 27px; border-top-width: 0px; border-bottom-width: 1px; }
	.top-toolbar #infobar { position: absolute; height: 26px; line-height: 26px; left: 10px; }
	.top-toolbar #searchbar { position: absolute; height: 26px; left: 400px; padding-top: 1px; }
	.top-toolbar #buttonbar { position: absolute; height: 26px; right: 5px; padding-top: 1px; text-align: right; }
	</style>
    
     	<div id="toolbar" class="panel-header panel-header-noborder top-toolbar">
                <div id="infobar">
                    <span class="icon-cologne-customers" style="padding-left: 25px; background-position: left ;float:left;">
                        	&nbsp;欢迎登录：&nbsp;${name}
                    
                    </span>
                    <div id="periodSpan" style="float:left;margin-left:18px;">
                    	当前培训期号：<font color="red">${period.number }</font>
                    	<a href="javascript:openPeriod();" class="easyui-linkbutton" iconCls="icon-cologne-milestone" plain="true">切换</a>
                    </div>
                	<div id="timerSpan" style="float:left;margin-left:18px;"></div>
                </div>
                
            </div>
    

<!--  -->
        <div region="south" split="true" style="height:40px;overflow:hidden; background: #D2E0F2; ">
        <div class="footer"  style="height: 40px;line-height: 30px; background: #D2E0F2; ">Copyright © 2014 xxxxxxx有限公司 电话：0797－xxxxxxxxxxxxxxx</div>
    </div>
    
    <div region="west" hide="true" split="true" title="&nbsp;" style="width:220px;" id="west">
	<div id="nav" class="easyui-accordion" fit="true" border="false">
		<!--  导航内容 --> 
				
			</div>

    </div>
    
    <div id="mainPanle" region="center" style="background: #eee; overflow-y:hidden">
        <div id="tabs" class="easyui-tabs"  fit="true" border="false" >
        <!-- 
			<div title="系统首页" style="padding:20px;overflow:hidden; color:red; " >
			</div>
			 -->
		</div>
    </div>

	<div id="mm" class="easyui-menu" style="width:150px;">
		<div id="mm-tabupdate">刷新</div>
		<div class="menu-sep"></div>
		<div id="mm-tabclose">关闭</div>
		<div id="mm-tabcloseall">全部关闭</div>
		<div id="mm-tabcloseother">除此之外全部关闭</div>
		<div class="menu-sep"></div>
		<div id="mm-tabcloseright">当前页右侧全部关闭</div>
		<div id="mm-tabcloseleft">当前页左侧全部关闭</div>
		<div class="menu-sep"></div>
		<div id="mm-exit">退出</div>
	</div>

</body>
</html>
黄宝康
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
EasyUi框架
weixin_66939060的博客
05-05 597
一、概述 1.1Easyui是什么？ EasyUI全称是Jquery-EasyUI,它是基于Jquery的一个UI插件库，封装了许多实用的控件和功能，并且是完美支持HTML5网页的框架。提供的控件包括数据表格，树形表格，菜单，进度条，选项卡，日期组合框，调节器，对话框等等。 EasyUI的目标就是帮助Web开发者更轻松的打造出功能丰富并且美观的UI界面 Easyui开发前端页面的好处： 丰富的Jquery插件库 使用简单，可以快读开发出原型界面 ...
EasyUI框架
zhongliwen1981的专栏
08-21 1万+
一、概述 1.1 EasyUI是什么？ EasyUI全称是Jquery-EasyUI,它是基于Jquery的一个UI插件库，封装了许多实用的控件和功能，并且是完美支持HTML5网页的框架。提供的控件包括数据表格，树形表格，菜单，进度条，选项卡，日期组合框，调节器，对话框等等。 EasyUI的目标就是帮助Web开发者更轻松的打造出功能丰富并且美观的UI界面。开发者不需要编写复杂的JavaScript...
EasyUI前端框架
weixin_45290168的博客
09-20 452
1.常用的前端框架 EasyUI框架，Jquery框架，Vue框架 2.EasyUI的介绍 介绍 EasyUI是一个前端开发的框架，其将常用的页面开发使用的组件进行了封装，前端开发人员只需将EasyUI的资源导入项目后使用即可，快速提升开发效率。 使用 ①　导入EasyUI的资源 ②　查阅API文档使用EasyUI的组件完成页面开发 学习: ① EasyUI提供的组件及其使用方式(API) ② EasyUI的布局 3.EasyUI的常用组件 资源的介绍： ①　将从官网上下载的EasyUI的资源压缩包解压
分享一个基于easyui前端框架开发的后台管理系统模板
最新发布
沐雨橙风ιε的博客
01-18 2139
这是对本系统的一些简单的功能介绍。前面已经对这个系统做了一些简单的介绍，接下来介绍一下博主经过多次实践产出的一部分公共的Java代码，可以直接使用。
EasyUI框架介绍
weixin_46178977的博客
03-25 1488
#UI框架 1、介绍 1.EasyUI是前端框架 2.前端框架 即封装大量css和js 3.使用前端框架 即给标签class属性。 4.EasyUI中需要注意的地方 a、data-options属性定义EasyUI属性的。 b、如果EasyUI提供的属性和html标签属性相同，可以把这个属性不写在data-options中 c、每一个效果使用纯标签方式结合js方式{每一个效果使用纯标签方...
使用easyui前端框架构建一个crud应用（看完这篇就够了）
沐雨橙风ιε的博客
11-09 1641
easyui是博主最喜欢的前端框架，因为它提供了多种主题和圆润好看的各种组件。这篇文章将会详细地介绍easyui前端框架的使用，通过创建一个crud应用来帮助大家快速掌握easyui的使用。
js高级jQuery框架easyUI框架
weixin_43636291的博客
03-01 418
js高级与easyUI框架 一、JavaScript高级 1.ajax请求 ajax：局部刷新技术 使用场景：分页数据的刷新，二级联动，验证用户名是否重复，地图局部刷新 核心对象： JavaScript 对象 XMLHttpRequest 原生js:ajax使用： 1.一个事件监听：onreadystatechange onreadystatechange存储函数（或函数名），每当 readyS...
EasyUI(前端框架)
热门推荐
wyy的博客
07-10 1万+
第一节 EasyUI的介绍和常用组件 [1]EasyUI的介绍 介绍: EasyUI是一个前端开发的框架，其将常用的页面开发使用的组件进行了 封装，前端开发人员只需将EasyUI的资源导入项目后使用即可，快速 提升开发效率。 使用： ① 导入EasyUI的资源 ② 查阅API文档使用EasyUI的组件完成页面开发 注意： 使用EasyUI，其实就是在使用别人已经封装好的代码来完成自己的页面开发。 所以必须按照EasyUI的文档说明来使用。所以我们学习EasyUI，其实就是在 学习如何按
easyui框架前后端交互_基于EasyUIdatagrid的Web前后端数据交换的实现
weixin_39952190的博客
12-20 135
基于EasyUIdatagrid的Web前后端数据交换的实现谷洪彬【期刊名称】《电脑编程技巧与维护》【年(卷),期】2017(000)021【摘要】很多Web应用系统需要数据显示、添加、更新和删除功能,早期的实现是前端用HTML/CSS表格展示,后端用程序语言直接操作后台数据表,这种实现方案是比较简单直接,但是实现效率不高,美观程度和用户友好性也不好.为了解决这个问题,很多前端框架应运而生,jQu...
easyui的框架
09-10
总的来说，EasyUI 是一款强大的前端开发工具，它通过提供一系列封装好的组件，降低了 web 开发的门槛，提高了开发效率。使用 EasyUI，开发者可以快速构建出功能完备且具有良好用户体验的 web 应用。结合后台数据，...
EasyUI前端框架下载
12-07
在描述中提到的“easyUI框架下载”，暗示我们将讨论如何获取和使用 EasyUI。 首先，你需要从官方网站或者其他可靠的资源下载 EasyUI 压缩包。文件名为“EasyUI”，通常包含以下几个核心部分： 1. **CSS 文件**：...
SSM+easyui框架实现运动会报名系统
12-14
【SSM+EasyUI框架实现运动会报名系统】项目是一个典型的Web应用程序，主要采用了Spring、SpringMVC、MyBatis和EasyUI四大技术栈。本文将详细介绍这些技术以及它们在项目中的应用。 首先，Spring框架是Java领域的一...
jquery-easyui.zip_easyui框架_html 框架_jquery-easyui
09-21
在EasyUI框架中，jQuery扮演着桥梁的角色，使得开发者能更轻松地控制页面元素，并利用EasyUI提供的组件进行交互设计。 在文件列表中，“1漂亮的jquery easyui后台框架”可能是一个示例项目，展示如何使用EasyUI创建...
ASP.NET C#系统源码 Easyui通用权限框架.zip
08-14
【标题】"ASP.NET C#系统源码 Easyui通用权限框架.zip" 提供了一个基于ASP.NET和C#语言开发的，使用EasyUI前端框架构建的通用权限管理系统。这个框架是为了解决企业级应用中复杂多变的权限控制问题而设计的，允许...
Easyui comobox 下拉框必填校验
huangbaokang的博客
11-14 7899
前台html 代码：<select id="compere_id" name="compere_id" class="easyui-combobox" style="width:80%" required="true" validType="selectValueRequired['#compere_id']" data-options="editable:false,p
Easyui 搭建后台管理界面
huangbaokang的博客
10-13 4813
Easyui是目前后台管理界面使用比较流行的框架。 以下是我个人初学Easyui api后搭建的后台管理界面。框架使用jquery-easyui-1.5.3首页main.jsp代码，主要使用easyui-layout布局，和一个tabs支持的导航工具menu。main.jsp页面：<%@ page language="java" contentType="text/html; charset=UT
easyui修改回显使用form("load",row)
huangbaokang的博客
02-13 4773
在项目中修改涉及到业务数据的回显，easyui提供了一种简单的方法，这个也是我看其他项目源码了解到的，记录下博客。 页面按钮为一个easyui-linkbutton &lt;a href="javascript:openRoleModifyDialog()" class="easyui-linkbutton" iconCls="icon-edit" plain="true"&gt;修改&lt;/a...
easyui datagrid将表头的checkbox不显示（隐藏）
huangbaokang的博客
08-22 4373
<script type="text/javascript"> $(function(){ $("#dg").datagrid({ url:"../json/content.json", //url:"../student.php", striped:true, width:400
easyui框架写一个删除功能
07-08
要在EasyUI框架中实现删除功能，你可以使用DataGrid组件提供的工具栏按钮和行操作按钮。以下是一个示例代码： ```html <!DOCTYPE html> 文件资源管理系统 ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

黄宝康

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值