easyui的选项卡使用:
1.导入需要的css和js
<head>
<link rel="stylesheet" type="text/css" href="css/default/easyui.css">
<link rel="stylesheet" type="text/css" href="js/jquery/jquery-easyui-1.2.1/themes/icon.css">
<script type="text/javascript" src="js/jquery/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/jquery/jquery-easyui-1.2.1/jquery.easyui.min.js"></script>
</head>
2.页面是有一个button按钮和三个选项卡,点击按钮然后添加一个选项卡,这个选项卡的内容是从另一个页面通过url获取到的,代码如下:
<body>
<button id='addTabs' onclick='addTestTab1();'>add</button>
<div id='tt1' class="easyui-tabs" style="height: 250px;width: 500px">
<div title='tab1' style="padding: 20px;display: none" >
tab1
</div>
<div title='tab2' style="overflow: auto;display: none;padding: 20px" closable='true'>
tab2
</div>
<div title='tab3' icon="icon-reload" closable='true' style="padding: 20px;display: none">
tab3
</div>
</div>
</body>
button按钮时间代码如下:
<script type="text/javascript">
function addTestTab(){
$("#tt").tabs('add',{
title:'保存',
content:'测试内容',
closable:true,
icon:'icon-save',
href:'http://localhost:8082/TestEasyUi/tab1.jsp'
});
}
</script>
</script>
ta1.jsp的代码和上面的代码一样,可以直接coppy过去
我用的是eclispe创建的web项目,所以启动服务器,输入路径,结果如下:
- 大小: 24.5 KB
- 大小: 34 KB
分享到：
相关推荐
Easyui tabs 标题居左，文字竖着
Easyui tabs Title居左侧，并且文字竖着显示
手把手教你制作easyUI工作站，主要学习tabs方法:http://blog.csdn.net/libin_1/article/details/50931955
给大家介绍了jquery easyui刷新当前tabs的方法，本文涉及到param参数的属性知识点，本文通过实例给大家介绍的非常详细，具有参考借鉴价值，感兴趣的朋友一起看看吧
非常好看的易用的easyui tabs 右键插件，自己两行代码就搞定
tabs代码如下： 代码如下: ”tabs” class=”easyui-tabs”> ”tabs1″> tabs1 </div> ”tabs2″> tabs2 </div> </div> 如果id=”tabs”的div未设置宽度和高度，easyUI默认的宽度和高度是auto，这样在google浏览器下...
NULL 博文链接：https://xiaofengtoo.iteye.com/blog/1263362
解决使用tab布局过程中页面多次加载的问题 如果在使用easyui过程中,你使用了easyui 的tab布局,在tab布局的内容上使用的不是content,而是iframe,那么你的页面有可能多次加载了,这篇文章帮你解决问题
easyui 菜单 添加 tabs 前台框架
主要介绍了jQuery EasyUI Layout实现tabs标签的实例的相关资料,希望通过本文能帮助到大家实现这样的功能，需要的朋友可以参考下
easyui选项卡模仿浏览器的右键关闭功能。 easyui选项卡模仿浏览器的右键关闭功能。
关闭easyui的tabs释放iframe的内存，
扩展EasyUI tabs 组件,加载tab页时添加遮罩,是页面加载时更加美观,内涵示例.
本文给大家介绍jquery easyui布局之动态添加tabs标签页，实现思路是这样的通过调用add方法就可以轻松实现，本文分步骤给大家详细介绍，需要的朋友一起学习吧
使用easyui创建tabs组件和动态添加 使用easyUI创建一个自动播放的tabs 使用easyUI创建XP风格左侧面板 DataGrid 使用easyUI转换HTML table到datagrid 使用easyUI给datagrid添加pagination 使用easyUI添加...
1、 对选项卡面板区域 div 设置 class=”easyui-tabs” 2、 对选项卡面板区域添加多个 div，每个 div 就是一个选项卡（每个面板一定设置 title） 3、 设置面板 fit 为 true ，自适应父容器大小 4、 设置选项卡 ...
我最近也使用了一下jquery easyui里tabs，但是发现一个问题：如果你把tabs的div开始设置为display:none，然后写个function change(){$(“#tabs”).css(“display”,”block”)}来让tabs显示，当执行change()时，...
Tabs 标签页/选项卡 ...记住把 ‘easyui-tabs’ 类添加到标记，每个tab panel 经由子标记被创建，其用法与Panel一样。 代码如下: ”tt” class=”easyui-tabs” xss=removed> <div title=”Tab1″ style=”padd
利用EasyUi和C#实现手风琴式菜单、tabs和datagrid的完整代码，MVC模式，带数据库，所有的数据均为jQuery异步动态加载，易于扩充和维护。