Tabs选项卡
前言
今天为大家分享的知识点是easyui中的tabs选项卡,想了解的小伙伴们可以看我下面的具体操作!
案例演示
没错,还是按照以往的套路来操作,和之前Tree简介中获取数据一样,基本上获取数据有以下这两种方式:
最终想要实现的效果:
1、当点击书籍管理下的新增时、右边的区域展示一个新增的选项卡,点击下面的未上架、已上架、已下架也是一样!
2、当再次点击书籍管理下的新增时,切换到新增页面的具体内容!
3、当点击书籍管理的时候,不展示书籍管理这个选项卡!
4、右击关闭三种不同类型选项卡的操作!
Tree(树)数据使用的表格:
1、在jsp页面静态获取
1、首先找到jquery.easyui-1.5.1的文件夹
2、再找到该文件夹中的demo夹
3、再找到demo文件夹中的tabs文件
4、然后打开basic.html文件,复制代码:
复制下的代码:
<div class="easyui-tabs" style="width:700px;height:250px">
<div title="About" style="padding:10px">
<p style="font-size:14px">jQuery EasyUI framework helps you build your web pages easily.</p>
<ul>
<li>easyui is a collection of user-interface plugin based on jQuery.</li>
<li>easyui provides essential functionality for building modem, interactive, javascript applications.</li>
<li>using easyui you don't need to write many javascript code, you usually defines user-interface by writing some HTML markup.</li>
<li>complete framework for HTML5 web page.</li>
<li>easyui save your time and scales while developing your products.</li>
<li>easyui is very easy but powerful.</li>
</ul>
</div>
<div title="My Documents" style="padding:10px">
<ul class="easyui-tree" data-options="url:'tree_data1.json',method:'get',animate:true"></ul>
</div>
<div title="Help" data-options="iconCls:'icon-help',closable:true" style="padding:10px">
This is the help content.
</div>
</div>
运行结果:
2、使用js动态地加载出数据
首先了解一下js学习文档的方法以及一些事件:
这个是新开一个New Tab的选项卡窗口:
$('#tt').tabs('add',{
title:'New Tab',
content:'Tab Body',
closable:true,
tools:[{
iconCls:'icon-mini-refresh',
handler:function(){
alert('refresh');
}
}]
});
当该选项卡被选择时将会触发’onSel