jQuery easyUI

最新推荐文章于 2024-09-18 09:00:21 发布

其实我不高

最新推荐文章于 2024-09-18 09:00:21 发布

阅读量111

点赞数

分类专栏：瞎几把写的

本文链接：https://blog.csdn.net/qq_43238210/article/details/82842796

版权

瞎几把写的专栏收录该内容

16 篇文章 0 订阅

订阅专栏

ui框架
可以去官网下载easyUI的API和程序库
easyui=jquery+html4（用来做后台的管理界面）
bootstrap=jquery+html5
案例：
1、通过layout布局
2、通过tree加载菜单
3、通过菜单去打开不同的tab页

布局
layout
在下载的程序库里 jquery-easyui-1.5.1\demo\layout\full.html 找到full.html模板复制body的内容（包含body），导入EasyUI的CSS和Javascript文件到您的页面。

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/jquery-easyui-1.5.1/themes/default/easyui.css">   
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/jquery-easyui-1.5.1/themes/icon.css">   
<script type="text/javascript" src="${pageContext.request.contextPath }/jquery-easyui-1.5.1/jquery.min.js"></script>   
<script type="text/javascript" src="${pageContext.request.contextPath }/jquery-easyui-1.5.1/jquery.easyui.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath }/js/index.js"></script>   
 
<title>主页</title>
</head>
<body class="easyui-layout">
<input type="hidden" id="ctx" value="${pageContext.request.contextPath }">
	<div data-options="region:'north',border:false" style="height:60px;background:#B3DFDA;padding:10px">north region</div>
	<!-- 树形菜单开始 -->
	<div data-options="region:'west',split:true,title:'West'" style="width:150px;padding:10px;">
		树形菜单
		<ul id="menuTerr"></ul> 
	</div>
	<!-- 树形菜单结束 -->
	<div data-options="region:'east',split:true,collapsed:true,title:'East'" style="width:100px;padding:10px;">east region</div>
	<div data-options="region:'south',border:false" style="height:50px;background:#A9FACD;padding:10px;">south region</div>
	<!-- 添加页面开始 -->
	<div data-options="region:'center',title:'Center'">
		<div id="tabs" class="easyui-tabs" style="width:100%;height:100%;">   
	    <div title="Tab1" style="padding:20px;display:none;">首页</div>   
		</div>
	</div>
	<!-- 添加页面结束 -->
</body>
</html>

tree、tabs
创建一个实体类（实现get、set方法和toString方法）

    private String id;
	private String text;
	//描述父子节点，用于递归子节点
	private List<TreeNode> children=new ArrayList<>();
	//树形菜单节点，除了id和展示文本，可能还伴有页面跳转和图片展示等等，都放到属性的map集合中
	private Map<String , Object> attributes=new HashMap<>();

实现tree和tabs

$(function() {
	var ctx=$("#ctx").val();
//	树形菜单
	$('#menuTerr').tree({    
	    url:ctx+'/menuAction.action?methodName=menuTreeList',//去数据库查询的url
	    	onClick: function(node){
                //如果选项卡打开了就选中打开的选项卡，没打开就添加一个选项卡
	    		if($('#tabs').tabs('exists',node.text)){
	    			$('#tabs').tabs('select',node.text)
	    		}else{
	    			//添加选项卡
		    		$('#tabs').tabs('add',{   
		    		    title:node.text,//你要打开的页面    
		    		    //页面的内容    src为你打开的页面的url，node.attributes.menuURL数据库查询出来的url
		    		    content:'<iframe scrolling="no" frameborder="0" src="'+node.attributes.menuURL+'" width="99%" height="99%"></iframe>',    
		    		    closable:true,    
		    		});
	    		}
	    	}
	}); 
})