当前位置：移动技术网 > IT编程>网页制作>CSS > EasyUI主页面布局：左侧菜单tree、tabs选项卡、tabs右键菜单详解

EasyUI主页面布局：左侧菜单tree、tabs选项卡、tabs右键菜单详解

2017年12月18日 | 移动技术网IT编程 | 我要评论

1.页面布局

北(north)部

西(west)部：tree的ul标签

中(center)部：左侧菜单点击加载页面的位置

tab-tools：tabs右键点击菜单事件的menu

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>  
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "https://www.w3.org/TR/html4/loose.dtd">  
<html>  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  
<%@ include file = "head.jsp" %>  
<script type="text/javascript" src="<%=request.getContextPath()%>/js/main.js"></script>  
<title>首页面</title>  
</head>  
<body>  
    <p class="easyui-layout" data-options="fit:true">  
        <p data-options="region:'north',collapsible:false,hideCollapsedContent:false" data-id="head" style="height:45px;overflow:hidden">  
          
        </p>  
        <!-- 左侧菜单 -->  
        <p data-id="leftmenu" style="width:190px;overflow:auto;" data-options="region:'west',split:false,collapsible:false,style:{textAlign:'left'}">  
            <ul id="menutree"></ul>  
        </p>  
        <p data-options="region:'center',split:true"><!--  -->  
            <p id="mainTabs" class="easyui-tabs" data-options="toolPosition:'right',fit:true,border:false">  
                <p title="主页">默认一个主页面tab</p>  
            </p>  
        </p>  
    </p>  
  
    <!-- 以下为tabs右击事件 -->  
    <p id="tab-tools" class="easyui-menu" style="width:100px;">  
        <p id="1" data-options="iconCls:'icon-arrow_refresh'">刷新</p>  
        <p class="menu-sep"></p>  
        <p id="2" data-options="iconCls:'icon-cross'">关闭当前标签</p>  
        <p id="3" data-options="iconCls:'icon-cross'">关闭非当前标签</p>  
        <p class="menu-sep"></p>  
        <p id="4" data-options="iconCls:'icon-cross'">关闭左侧标签</p>  
        <p id="5" data-options="iconCls:'icon-cross'">关闭右侧标签</p>  
        <p class="menu-sep"></p>  
        <p id="6" iconCls="icon-cancel">关闭所有标签</p><!-- 也可这样设置图标 -->  
    </p>      
</body>  
</html>

2.左侧菜单tree 2.1json数据

自定义tree图标自定义onSelect事件的跳转页面

[{
	"id":1,
	"text":"My Documents",
	"iconCls":"icon-page",   "这是注释(注意逗号)":"自定义tree图标",
	"children":[{
		"id":11,
		"text":"Photos",
		"iconCls":"icon-page", "这是注释(注意逗号)":"自定义tree图标",
		"children":[{
			"id":111,
			"text":"Friend",
			"iconCls":"icon-page",
			"page":"newWin.jsp",  "这是注释(注意逗号)":"自定义点击的目标页面"
		},{
			"id":112,
			"text":"Wife",
			"page":"grid.jsp",  "这是注释(注意逗号)":"自定义点击的目标页面"
		},{
			"id":113,
			"text":"Company"
		}]
	},{
		"id":12,
		"text":"Program Files",
		"iconCls":"icon-page", 
		"state":"closed",
		"children":[{
			"id":121,
			"text":"Intel"
		},{
			"id":122,
			"text":"Java",
			"attributes":{
				"p1":"Custom Attribute1",
				"p2":"Custom Attribute2"
			}
		},{
			"id":123,
			"text":"Microsoft Office"
		},{
			"id":124,
			"text":"Games",
			"checked":true
		}]
	},{
		"id":13,
		"text":""
	},{
		"id":14,
		"text":"about.html"
	},{
		"id":15,
		"text":"welcome.html"
	}]
}]

2.2js渲染+onSelect事件

	/** 左侧menu菜单 * */
	renderLeftMenu();
	function renderLeftMenu() {
		$("#menutree").tree({
			url : "json/treedata.json",
			rootWidth : "184",
			kidWidth : "180",
			height : "auto",
			onSelect : function(node) {
				var isLeaf = $(this).tree('isLeaf',node.target);//只可选择tree子节点
				if(isLeaf){
					openLeftWin(node);//打开新的tabs
				}
			}
		});
	}

3.新增tabs 3.1tabs新增

刷新小按钮需要8*8像素的小图标，只有16*16像素的导致图标不漂亮啊(ー`′ー)。

	/**打开新的tabs **/
	function openLeftWin(node) {
		var tabName = node.text;
		if($("#mainTabs").tabs("exists", tabName)) {// 如果已存在，选中
			$("#mainTabs").tabs("select", tabName);
		}else {
			$("#mainTabs").tabs("add", {
				title : tabName,
				selected : true,
				closable : true,
//				href : "newWin.jsp",//此处可动态跳转页面
				href : node.page,//此处可动态跳转页面,在加载的json、或者后台数据中组合添加属性即可
				tools : [ {  //加载刷新小按钮
					iconCls : "icon-page_refresh",//应该使用8*8像素图片,没有找到8*8
					handler : function() {
						var currentTab = $("#mainTabs").tabs('getSelected');
						refreshTab(currentTab);
					}
				} ]
			});
		}
	}

	/**
	 * 通用刷新tabs方法
	 * currentTab 刷新的tabs对象
	 */
	function refreshTab(currentTab) {
		var url = $(currentTab.panel('options')).attr('href');
		$('#tabs').tabs('update', {
			tab : currentTab,
			options : {
				href : url //重新获取目标页面
			}
		});
		currentTab.panel('refresh');//刷新
	}

3.2tabs右击事件

	/**
	 * 新增tabs右击事件
	 */
	$("#mainTabs").tabs({
        onContextMenu:function(e,title,index){
            e.preventDefault();
            $("#tab-tools").menu('show', {
                left : e.pageX,
                top : e.pageY
            });
        }
    });

3.3tabs右击菜单事件

点击事件的关闭方法参考其他博客文章。

	/**
	 * tabs右击菜单绑定事件
	 */
	$("#tab-tools").menu({
    onClick : function (node) {
      closeTab(this, node.id);
    }
  });
	
	/**
	 * 相关右击菜单的点击事件
	 * menu 此处没有用到,即当前选择的menu菜单
	 * id menu菜单的id标识，可用其他唯一标识代替
	 */
    function closeTab(menu, id){
    	var tab = $("#mainTabs").tabs('getSelected');//当前所选tab
    	var index = $("#mainTabs").tabs('getTabIndex',tab);//当前所选tab的下标位置
    	var tablist = $("#mainTabs").tabs('tabs');  //所有的tabs列表
        switch (id){
            case '1' ://刷新
            	RefreshTab(tab);
                break;
            case '2' ://关闭当前标签
                $("#mainTabs").tabs("close", index);
                break;
            case '3' ://关闭非当前标签
                for(var i=tablist.length-1;i>index;i--){
                    $("#mainTabs").tabs('close',i);
                }
                var num = index-1;
                for(var i=num;i>=0;i--){
                    $("#mainTabs").tabs('close',0);
                }
                break;
            case '4' ://关闭左侧
                var num = index-1;
                for(var i=num;i>=0;i--){
                    $("#mainTabs").tabs('close',0);
                }
                break;
            case '5' ://关闭右侧
                for(var i=tablist.length-1;i>index;i--){
                    $("#mainTabs").tabs('close',i);
                }
            	break;
            case '6'://关闭所有
                for(var i=tablist.length-1;i>=0;i--){
                    $("#mainTabs").tabs("close", i);
                }
            	break;
            default:
        }
    }

4.完整main.js

$(function() {
	var URL = {
			//获取数据url
	};

	/** 左侧menu菜单 * */
	renderLeftMenu();
	function renderLeftMenu() {
		$("#menutree").tree({
			url : "json/treedata.json",
			rootWidth : "184",
			kidWidth : "180",
			height : "auto",
			onSelect : function(node) {
				var isLeaf = $(this).tree('isLeaf',node.target);//只可选择tree子节点
				if(isLeaf){
					openLeftWin(node);//打开新的tabs
				}
			}
		});
	}

	/**打开新的tabs **/
	function openLeftWin(node) {
		var tabName = node.text;
		if($("#mainTabs").tabs("exists", tabName)) {// 如果已存在，选中
			$("#mainTabs").tabs("select", tabName);
		}else {
			$("#mainTabs").tabs("add", {
				title : tabName,
				selected : true,
				closable : true,
//				href : "newWin.jsp",//此处可动态跳转页面
				href : node.page,//此处可动态跳转页面,在加载的json、或者后台数据中组合添加属性即可
				tools : [ {  //加载刷新小按钮
					iconCls : "icon-page_refresh",//应该使用8*8像素图片,没有找到8*8
					handler : function() {
						var currentTab = $("#mainTabs").tabs('getSelected');
						refreshTab(currentTab);
					}
				} ]
			});
		}
	}

	/**
	 * 通用刷新tabs方法
	 * currentTab 刷新的tabs对象
	 */
	function refreshTab(currentTab) {
		var url = $(currentTab.panel('options')).attr('href');
		$('#tabs').tabs('update', {
			tab : currentTab,
			options : {
				href : url //重新获取目标页面
			}
		});
		currentTab.panel('refresh');//刷新
	}
	
	/**
	 * 新增tabs右击事件
	 */
	$("#mainTabs").tabs({
        onContextMenu:function(e,title,index){
            e.preventDefault();
            $("#tab-tools").menu('show', {
                left : e.pageX,
                top : e.pageY
            });
        }
    });
	/**
	 * tabs右击菜单绑定事件
	 */
	$("#tab-tools").menu({
        onClick : function (node) {
            closeTab(this, node.id);
        }
    });
	
	/**
	 * 相关右击菜单的点击事件
	 * menu 此处没有用到,即当前选择的menu菜单
	 * id menu菜单的id标识，可用其他唯一标识代替
	 */
    function closeTab(menu, id){
    	var tab = $("#mainTabs").tabs('getSelected');//当前所选tab
    	var index = $("#mainTabs").tabs('getTabIndex',tab);//当前所选tab的下标位置
    	var tablist = $("#mainTabs").tabs('tabs');  //所有的tabs列表
        switch (id){
            case '1' ://刷新
            	RefreshTab(tab);
                break;
            case '2' ://关闭当前标签
                $("#mainTabs").tabs("close", index);
                break;
            case '3' ://关闭非当前标签
                for(var i=tablist.length-1;i>index;i--){
                    $("#mainTabs").tabs('close',i);
                }
                var num = index-1;
                for(var i=num;i>=0;i--){
                    $("#mainTabs").tabs('close',0);
                }
                break;
            case '4' ://关闭左侧
                var num = index-1;
                for(var i=num;i>=0;i--){
                    $("#mainTabs").tabs('close',0);
                }
                break;
            case '5' ://关闭右侧
                for(var i=tablist.length-1;i>index;i--){
                    $("#mainTabs").tabs('close',i);
                }
            	break;
            case '6'://关闭所有
                for(var i=tablist.length-1;i>=0;i--){
                    $("#mainTabs").tabs("close", i);
                }
            	break;
            default:
        }
    }
});

5.总结

可能遇到的问题与解决方法、注意点： tabs新增的页面无法加载js/css文件：把引入文件的方法放到内即可。tree只可选择子节点：

var isLeaf = $(this).tree('isLeaf',node.target);//如果为子节点返回true，否则为false。

json添加注释：直接用key：value代替即可。修改tree默认图标：此处直接在json数据中添加iconCls属性获取；其他方法请自行搜索。加载tree：如果需要从后台获取数据，数据格式必须与官网demo一致。此处直接使用了官网demo的json数据。tabs右键事件：onContentMenutabs刷新按钮：tools 源码位置（github）：

您可能感兴趣的文章:

如对本文有疑问，点击进行留言回复！！

使用css样式，制作表格（小程序）

效果图：wxml:<view class="table-wrap"><view class="... [阅读全文]
清除新版Google Chrome浏览器中表单控件（input，button...）默认的黑色边框

今天在chrome浏览器上测试项目时，突然发现所有的表单控件都被加上了一个奇怪的黑色边框，翻了半天css文件后，... [阅读全文]
4.3 人脸融合应用程序的设计

文章目录4.3 人脸融合应用程序的设计4.3 人脸融合应用程序的设计ManyMasks软件打开之后,将展现一个实... [阅读全文]
LeetCode解析------155.最小栈-设计

题目：设计一个支持 push ，pop ，top 操作，并能在常数时间内检索到最小元素的栈。push(x) ——... [阅读全文]
4.复杂选择器、权重计算、css基础属性

CSS权重!importantInfinity行间样式1000id100class/属性/伪类10标签/伪元素1... [阅读全文]
荐 20200714——git/mac配置/项目运行步骤/一些报错

分布式：GIT工作模式下，每个开发者（安装了git客户端）的电脑就等同于传统SVN服务器svn工作模式：co... [阅读全文]
antd 菜单组件使用时报错：Cannot read property ‘isRootMenu‘ of undefined

项目中使用了antd ui框架，在使用Menu组件得SubMenu组件时报出以下错误：Uncaught Type... [阅读全文]
CSS|div的style=“background-image: url(img/a.bmp)图片显示不出来

div的style="background-image: url(img/a.bmp)图片显示不出来首先我的di... [阅读全文]
硬件仪表盘账号建立指导（一） --WHQL认证测试结果提交账号（一）

WHQL提交账户建立指南建立Microsoft 帐户如果你有hotmail，outlook，OneDriver，... [阅读全文]
cookie的规范Cookie的不可跨域名性或Cookie与域名的关系

前些天在开发中遇到了关于浏览器cookie的一些小细节问题。例如：我创建的一个小购物车的web项目。用ngi... [阅读全文]

网友评论


验证码：

EasyUI主页面布局：左侧菜单tree、tabs选项卡、tabs右键菜单详解

2017年12月18日 | 移动技术网IT编程 | 我要评论

您可能感兴趣的文章:

相关文章:

网友评论