easyui中的tree&tabs&图标

本文展示了如何使用EasyUI库创建一个页面,该页面包含树形菜单和选项卡。当用户在树形菜单中双击节点时,如果节点没有子节点,系统会检查选项卡中是否已存在该节点的标题。如果不存在,则新增一个选项卡;如果存在,则选中该选项卡。整个过程利用了jQuery和EasyUI的动画效果,实现了交互式的后台管理系统界面。
摘要由CSDN通过智能技术生成

分享一下今天打的一部分代码:

今天用到了tree,tabs以及图标

效果图:
在这里插入图片描述
源代码:

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@include file="Conut/head.jsp" %>
<!DOCTYPE html>
<html>
		
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
	<script type="text/javascript">
	/* 页面载入函数 */
	$(function(){
		$('#mytree').tree({    
		    url:path+'/data/tree_data1.json',   //数据请求地址
		    animate:true,//展开和收回动画效果
		    onDblClick: function(node){//节点 == 对象
		    	//判断是否是子节点
		    	var nodes = $('#mytree').tree('getChildren',node.target);
		    	if(nodes.length == 0){//如果没有子节点
		    		//判断选项卡是否存在
		    		var f = $('#mytab').tabs('exists',node.text);
				    //不存在就新增一个选项卡
				    if(!f){
				    	$('#mytab').tabs('add',{    
				    	    title:node.text,//标题    
				    	    content:node.text, //内容   
				    	    closable:true,    //是否可以关闭
				    	      
				    	});
				    }else{//存在就让其选中
				    	 $('#mytab').tabs('select',node.text);
				    }	
		    	}
		    	
		    	
		    
			}
		});
	})
	</script>
</head>
<body class="easyui-layout">   
    <div data-options="region:'north',split:true" style="height:90px;text-align:center">
    <h1>书籍后台管理</h1>
    </div>   
    <div data-options="region:'south',title:'South Title',split:true" style="height:100px;">
       沉山工作室
    </div>   
    <div data-options="region:'west',title:'功能导航',split:true" style="width:200px;">
    <ul id="mytree" class="easyui-tree">   
     
	</ul> 
    </div>   
    <div data-options="region:'center'," style="padding:5px;background:#fff;">
    <div id="mytab" class="easyui-tabs" style="width:100%;height:100%;">   
    <div data-options="iconCls:'icon-bullet-home'" title="首页" style="padding:20px;display:none;">   
           
    </div>   
      
</div>
    </div>   
</body>
</html>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值