文档章节

EasyUI学习笔记4:展现内容_ tabs插件

ooad
 ooad
发布于 2015/03/24 16:17
字数 1240
阅读 296
收藏 3
点赞 0
评论 0

一、引言

笔记3已经在页面布局的左侧加入了导航菜单,本节将给菜单添加事件,点击节点后打开一个网页。首先新建一个新的页面customer.html用来管理“客户”。代码和笔记1的about.html几乎相同:

<html>
    <head>
	<meta charset="UTF-8">
	<title>easyui学习笔记</title>
	<link id="easyuiTheme" rel="stylesheet" type="text/css" href="jslib/easyui1.3.5/themes/default/easyui.css"/>
	<link rel="stylesheet" type="text/css" href="jslib/easyui1.3.5/themes/icon.css"/>
	<script type="text/javascript" src="jslib/easyui1.3.5/jquery.min.js"></script>
	<script type="text/javascript" src="jslib/easyui1.3.5/jquery.easyui.min.js"></script>
	<script type="text/javascript" src="jslib/easyui1.3.5/locale/easyui-lang-zh_CN.js" charset="utf-8"></script>
    </head>
    <body>
        这是客户管理页面!
    </body>
</html>

那custmer.html如何打开呢?一般来说,系统框架的主内容区(即Layout的“center”区域)会引入另一个独立的 Web 页面来实现系统的功能。

所以方案是:利用easyui的tabs插件创建tab页,每一个标签页里使用 iframe 标签来引入子页面。

二、动态添加tab页

在笔记2中,我们已经在center区域创建了easyui-tabs插件,并命名为“tabs”即:

//此处省略代码,见笔记2
<div id="mainPanle" data-options="region:'center'">
   <div id="tabs" class="easyui-tabs" data-options="fit:true, border: false" >
//此处省略代码,见笔记2

http://www.jeasyui.net/ 查看easyui的api,我们可以找到动态创建tab标签页的参考代码。编写代码如下:

// 添加一个新的标签页面板(tab panel)
$('#tabs').tabs('add',{
    title:'客户',
    content:'<iframe style="width:100%;height:98%;" scrolling="auto" frameborder="0" src="customer.html"></iframe>',
    closable:true,
    icon:
});

同样注意,#tabs必须与网页中元素id=”tabs”相同,否则就无法关联了。

可以看出,动态添加一个tab有三个关键参数:标题title,内容content,是否可关闭closable,tab图标icon。

考虑到,系统有非常多功能,即该段代码会被频繁使用。我们可以将代码进行简单封装,写成一个独立的函数openTab,参数title和url,来实现该功能。代码如下:

/*在右边center区域打开菜单,新增tab*/
function openTab(title, url) {
	//判断是否已存在
	if ($("#tabs").tabs('exists', title)) {  
		$('#tabs').tabs('select', title);
	} else {
		//新增tab
		$('#tabs').tabs('add', {
			title : title,
			closable : true,
			content : createTabContent(url)
		});
	}
}

代码content调用了createTabContent(url)函数创建一个iframe显示页面内容。因此,编写该函数:

/* 生成tab内容 */
function createTabContent(url){
	return '<iframe style="width:100%;height:98%;" scrolling="auto" frameborder="0" src="' + url + '"></iframe>';
}

哈哈!现在终于看起来有点像在写程序了。

代码中exists和select都是tab插件的方法,你可以从easyui中API中发现它们,这两个方法都需要title作为参数。截图出来给大家参考,可见多看官方api和教程多重要。

代码中带有注释,剩下的相信你应该一目了然。

三、给树形菜单加上事件

接下来就是要给树形菜单加上事件,让它调用openTab方法。修改笔记3的js代码如下:

/*树形菜单点击处理*/
$("#tree").tree({
	url : 'treeData.json',
	lines : true,
	onClick : function (node) {
		if (node.attributes) {
			openTab(node.text, node.attributes.url);
		}
	}
});

照例进行解释:请恕我偷懒,直接copy了api中的一段:

很多事件的回调函数需要 'node' 参数,它包括下列属性:

id:绑定到节点的标识值。

text:要显示的文本。

iconCls:用来显示图标的 css class。

checked:节点是否被选中。

state:节点状态,'open' 或 'closed'。

attributes:绑定到节点的自定义属性。

target:目标的 DOM 对象。

我们结合该代码、treedata .json和api中解释中我们可以了解本节js代码的逻辑:

菜单加上了单击事件onClick:treedata.json中有个自定义属性url,如果该节点有绑定该属性,当点击菜单节点时,则调用openTab函数,把节点的text的值赋值参数title,把自定义属性url值赋给参数url,从而创建tab页。然后再调用createTabContent加载url网页(customer.html)内容。

需要注意的是,上节创建的treedata.json中url值还是空的,我们需要将客户这个节点的url值改为:

//此处省略代码,见笔记3
{
      "id":2,
      "text":"客户",
      "attributes":{
            "url":"customer.html"
       }
}
//此处省略代码,见笔记3

运行tomcat,在浏览器中输入localhost:8080/easyui/index.html。界面如下:

如果该页面已经打开,点击菜单则不会重复打开,而是激活该tab页。

最后附上index.html中的完整js代码:

//省略html代码参考笔记3
<script type="text/javascript">
  $(function () {
    /*树形菜单点击处理*/
    $("#tree").tree({
	url : 'treeData.json',
	lines : true,
	onClick : function (node) {
	    if (node.attributes) {
		openTab(node.text, node.attributes.url);
	    }
	}
});
    /*在右边center区域打开菜单,新增tab*/
    function openTab(title, url) {
    //判断是否已存在
      if ($("#tabs").tabs('exists', title)) {  
         $('#tabs').tabs('select', title);
      } else {
	//新增tab
	$('#tabs').tabs('add', {
	    title : title,
	    closable : true,
	    content : createTabContent(url)
	});
      }
    }
	
    /* 生成tab内容 */
    function createTabContent(url){
        return '<iframe style="width:100%;height:98%;" scrolling="auto" frameborder="0" src="' + url + '"></iframe>';
    }
});
</script>
//省略html代码参考笔记3


© 著作权归作者所有

共有 人打赏支持
ooad
粉丝 93
博文 24
码字总数 17510
作品 0
广州
jquery easyui tab加载内容的几种方法

两者特点: href方式加载数据的特点: 被加载的页面只有body元素内部的内容才会被加载,也就是jQuery的ajax请求的只是html片段。 加载远程url时有遮罩效果,也就是“等待中……”效果,用户体...

文文1
2015/03/26
0
0
EasyUI基础入门之Parser(解析器)

前言 JQuery EasyUI提供的组件包括功能强大的DataGrid,TreeGrid、面板、下拉组合等。用户可以组合使用这些组件,也可以单独使用其中一个。(使用的形式是以插件的方式提供的) EasyUI体系结构 ...

LCore
2014/07/11
0
9
jQuery EasyUI使用教程之创建标签页

<jQuery EasyUI最新版下载> 本教程将展示如何使用easyui创建一个标签组件。标签可以动态地添加或删除多个面板,你可以使用标签在同一个页面上显示不同的实体。 标签一次只能显示一个面板,每...

Miss_Hello_World
2015/11/18
0
0
Jquery easyui中tabs新建标签设置href会提交两次请求

Jquery easyui 1.2.4中tabs新建标签设置href会提交两次请求,这个问题应该说是个挺严重的bug,换用1.2.3版本就没有这个问题。猜想easyui是修改了panel的加载机制或缓存机制吧,总之在options...

乌鸦FB
2012/03/27
0
0
jQuery EasyUI快速入门实战教程(一)-入门

1、jQuery EasyUI概述 jQuery EasyUI是一组基于jQuery的UI插件集合体,而jQuery EasyUI的目标就是帮助web开发者更轻松的打造出功能丰富并且美观的UI界面。开发者不需要编写复杂的javascript,...

神码小风
06/28
0
0
Easyui的datagrid结合hibernate实现数据分页

最近在学习easyui的使用,在学到datagrid的时候遇到了一些问题,终于抽点时间整理了一下,分享出来,请各位前辈高手多多指教! 1、先来看看效果,二话不说,上图直观! 2、easyui的datagrid的...

岁月无痕
2013/04/17
0
3
jQuery EasyUI使用教程之创建可折叠面板

<jQuery EasyUI最新版下载> 在本教程中,你将学习到有关于easyui折叠面板的知识。折叠面板包含了一系列的面板,其中所有的面板标题都是可见的,但只有一个面板的主体内容在某个时间是可见的。...

Miss_Hello_World
2015/11/13
0
0
easyui 框架Layout插件

1:引入的css: <link rel="stylesheet" href="${rc.contextPath}/static/easyui/themes/custom/easyui.css"> <link rel="stylesheet" href="${rc.contextPath}/static/easyui/themes/icon.css......

赵作文
2015/11/16
0
0
用户界面框架jQuery EasyUI正式发布v1.4.4[附下载]

jQuery EasyUI致力于帮助web开发者更轻松的打造出功能丰富并且美观的UI界面。jQuery EasyUI提供了基于当下流行的jQuery core和HTML5的控件,助您打造适合当今网络的应用程序。 免费下载:jQu...

Miss_Hello_World
2015/11/09
0
0
python递归实现Easyui combotree树

原文链接:http://www.huangdc.com/43 自动化发布系统在选择文件时,使用jQuery EasyUI 创建页面 树形菜单(Tree) 及 后端python 递归实现Easyui combotree 树。这里主要分享2点: 1、linux 中...

dchuang
2014/11/19
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

Spring Boot 整合 MyBatis/通用Mapper/PageHelper分页插件

整合MyBatis 整合通用Mapper 1. POM依赖配置 <properties><mapper.starter.version>2.0.3-beta1</mapper.starter.version></properties><!-- 通用Mapper --><dependency><groupId>t......

OSC_fly
9分钟前
0
0
CentOS7 双网卡绑定

环境 操作系统 CentOS7.5,禁用 NetworkManager 服务 网卡 eth0 网卡 eth1 绑定网卡 bond0 网卡 eth0 配置 修改 /etc/sysconfig/network-scripts/ifcfg-eth0 TYPE=EthernetBOOTPROTO=noneD......

Colben
11分钟前
0
0
zk实战--rpc框架集群化

在看此篇内容时需要浏览下面内容 netty实战--手写rpc框架 前文功能简介以及功能扩充 利用netty来实现一个点对点的rpc调用。客户端和服务端都是靠手写地址进行socket同学的,无法1对多,也无法...

xpbob
27分钟前
10
0
springboot 发送邮件

获取授权码 添加配置 # 账号和密码spring.mail.username=aaa@qq.comspring.mail.password=bbb# 服务器地址spring.mail.host=smtp.qq.comspring.mail.properties.mail.smtp.ssl.en...

阿豪boy
28分钟前
0
0
如何使用GNU Ring?

文章名:如何使用GNU Ring? 作者:冰焰火灵X 1079092922@qq.com 文章许可:CC BY-SA 4.0 ##1. 安装 下载GNU Ring 点击左边选择你的系统版本(这里以 GNU/Linux 为例,我使用的是Mint 18.3)...

ICE冰焰火灵X
30分钟前
4
0
深入理解springMVC

什么是spring MVC Spring MVC属于SpringFrameWork的后续产品,已经融合在Spring Web Flow里面。Spring 框架提供了构建 Web 应用程序的全功能 MVC 模块。使用 Spring 可插入的 MVC 架构,从而...

Java填坑之路
36分钟前
1
0
《射雕英雄传》书摘

1. 我虽是个飘泊江湖的贫家女子,可不是低三下四、不知自爱之人。你如真心爱我,须当敬我重我。我此生决无别念,就是钢刀架颈,也决意跟定了你。将来……将来如有洞房花烛之日,自然……自能...

k91191
46分钟前
0
0
解决:modal中datePicker 选中时,会触发modal的hidden.bs.modal事件

最近项目中发现了一个bug,具体表现为选中模态框上datepicker组件上的日期时,会触发模态框的关闭事件,导致数据编辑无法正常进行。网上搜索了下,解决方法如下: $('.datepicker').on('hid...

Funcy1122
50分钟前
0
0
Redis分布式锁的正确实现方式

前言 分布式锁一般有三种实现方式: 1.数据库乐观锁 2.基于Redis的分布式锁; 3.基于Zookeeper的分布式锁。本篇博客将介绍第二种方式,基于Redis实现分布式锁。虽然网上已经有各种介绍Redis...

大海201506
今天
2
0
ClassNotFoundException: javax.el.ELManager

这个是因为tomcat7中的el-api2.2,有些版本太低,建议升级tomcat到8.0,利用el-api3.0就会解决这个问题。

无语年华
今天
1
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部