EasyUI_02_tree及tabs前端实现

最新推荐文章于 2024-06-02 18:25:47 发布

阿立不油腻

最新推荐文章于 2024-06-02 18:25:47 发布

阅读量58

点赞数 1

分类专栏： easyui 文章标签： easyui

本文链接：https://blog.csdn.net/qq_58530605/article/details/120232592

版权

easyui 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

一、tree

从js 里新建index.js

在index.js 输入js代码：
$(function(){
	$('#tt').tree({    
	    url:'tree_data1.json'   
	}); 
})
主界面调用
<ul id="tt"></ul>
效果：

二、tabs

需求：
   * 1.点击左侧熊市右侧Tab
   *        1.1给菜单添加点击事件
   *        1.2调用tabs选项卡打开对应的页面
   *            选项卡打开
   *            选项卡对应的页面展现
   * 2.不能打开重发的Tab
   *        拿到目前所有打开的Tabs选项卡，与将要打开的选项卡做对比（exists）
   *            存在true:不打开
   *            存在为False:打开
   * 3.对于已经存在的Tab选项，被点击的时候应该默认被选中
   * 4.点击菜单，能够访问对应的页面，而非文字内容

index.js代码：

$(function(){
	$('#stuMenu').tree({    
		url:'tree_data1.json',
	    onClick: function(node){
			//alert(node.text);  // 在用户点击的时候提示
	    	var exists=$('#stuTabs').tabs('exists',node.text);
	    	if(exists){
	    		$('#stuTabs').tabs('select',node.text);
	    	}else{
	    		$('#stuTabs').tabs('add',{    
	        	    title:node.text,    
	        	    content:'<iframe height="100%" width="100%"  src="'+node.attributes.url+'"></iframe>',    
	        	    closable:true,    
	        	    tools:[{    
	        	        iconCls:'icon-mini-refresh',    
	        	        handler:function(){    
	        	            alert('refresh');    
	        	        }    
	        	    }]    
	        	});
	    		
	    	}
	    
		}
	    
	}); 
	})

点击选项，打开对应的页面

主界面代码：

<%@ 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">

<!--Ctrl+Shift+R 找全路径  -->
<%-- ${pageContext.request.contextPath}  取项目名--%>
 
<title>书籍</title>
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/static/js/jquery-easyui-1.5.1/themes/default/easyui.css">   
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/static/js/jquery-easyui-1.5.1/themes/icon.css">   
<script type="text/javascript" src="${pageContext.request.contextPath }/static/js/jquery-easyui-1.5.1/jquery.min.js"></script>   
<script type="text/javascript" src="${pageContext.request.contextPath }/static/js/jquery-easyui-1.5.1/jquery.easyui.min.js"></script>  
<script type="text/javascript" src="${pageContext.request.contextPath }/static/js/index.js"></script> 
</head>
 
<body class="easyui-layout">   
    <div data-options="region:'north',title:'在线阅读',split:true" style="height:100px;"></div>   
    <div data-options="region:'south',title:'联系方式：10086',split:true" style="height:100px;"></div>   
<!--<div data-options="region:'east',iconCls:'icon-reload',title:'简介',split:true" style="width:100px;"></div>   
 -->    
    <div data-options="region:'west',title:'目录',split:true" style="width:200px;">
    
<!--     缺陷：①样式缺陷
 ②不好做数据的渲染，树形结构的动态显示
 -->
    <ul id="stuMenu"></ul> 
    
    </div>   
    <div data-options="region:'center',title:'正文'" style="padding:5px;background:#eee;">
    
    <div id="stuTabs" class="easyui-tabs" style="width:100%;height:100%;">   
    
</div>
    </div>   
</body>  
 
</html>

okk

阿立不油腻

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
EasyUI_02_tree及tabs前端实现

一、tree从js 里新建index.js在index.js 输入：$(function(){ $('#tt').tree({ url:'tree_data1.json' }); })主界面调用<ul id="tt"></ul>效果：二、tabs需求： * 1.点击左侧熊市右侧Tab * 1.1给菜单添加点击事件 * 1....
复制链接

扫一扫