easyui选项卡页面
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了easyui选项卡页面相关的知识，希望对你有一定的参考价值。
一、设置超链接
选项卡页面是点击某个超链接后触发的，这里以树形菜单为例，点击任何一个菜单，将会产生一个新的选项卡页面。
树形菜单参考http://www.cnblogs.com/ywlaker/p/6042244.html
树形菜单需要配置一个点击事件
$(‘<div></div>‘).tree({ data : data[i].children, onClick : function(node) { tab(node); } }).appendTo("#" + data[i].id);
二、选项卡页面
完整代码
<html> <head> <title>easyui</title> <meta http-equiv="content-type" content="text/html;charset=UTF-8" /> <script type="text/javascript" src="easyui/jquery.min.js"></script> <script type="text/javascript" src="easyui/jquery.easyui.min.js"></script> <script type="text/javascript" src="easyui/locale/easyui-lang-zh_CN.js"></script> <link rel="stylesheet" href="easyui/themes/default/easyui.css" type="text/css"></link> <link rel="stylesheet" href="easyui/themes/icon.css" type="text/css"></link> <script type="text/javascript"> var data = [ { "id" : 1, "text" : "menu demo 1", "children" : [ { "id" : 11, "text" : "menu demo 1 1", "url" : "/menu/demo/1/1" }, { "id" : 12, "text" : "menu demo 1 2", "url" : "/menu/demo/1/2" } ] }, { "id" : 2, "text" : "menu demo 2", "children" : [ { "id" : 21, "text" : "menu demo 2 1", "url" : "/menu/demo/2/1", "children" : [ { "id" : 211, "text" : "menu demo 2 1 1", "url" : "/menu/demo/2/1/1" } ] } ] } ]; function show () { for (var i = 0; i < data.length; i ++) { //添加分类 $("#menu").accordion(‘add‘, { id : data[i].id, title : data[i].text, selected : false }); //在分类中添加目录 $(‘<div></div>‘).tree({ data : data[i].children, onClick : function(node) { tab(node); } }).appendTo("#" + data[i].id); } } function tab(node) { var tabs = $(‘#tabs‘); //如果选项卡已经打开 if (tabs.tabs(‘exists‘, node.text)) { tabs.tabs(‘select‘, node.text); return; } //如果节点的url为空，不打开新选项卡 if (node.url == null || node.url == ‘‘) return; //添加新选项卡 tabs.tabs(‘add‘, { id : node.id, title : node.text, href : node.url, closable : true }); } </script> </head> <body class="easyui-layout" onload="show();"> <div data-options="region:‘north‘,title:‘North Title‘,split:true" style="height:100px;"></div> <div data-options="region:‘south‘,title:‘South Title‘,split:true" style="height:100px;"></div> <div data-options="region:‘east‘,title:‘East‘,split:true" style="width:100px;"></div> <div data-options="region:‘west‘,title:‘West‘,split:true" style="width:200px;"> <div id="menu" data-options="fit:true,border:false" class="easyui-accordion"></div> </div> <div data-options="region:‘center‘,title:‘center title‘"> <div id="tabs" data-options="fit:true,border:false" class="easyui-tabs"> <div title="welcome">welcome</div> </div> </div> </div> </body> </html>
点击菜单，加载的选项卡页面如下图
三、iframe形式的选项卡页面
上面的选项卡内容是作为easyui.html整个页面的一部分而存在，如果太多，重名的问题解决起来就麻烦，iframe则将每个页面独立开，不会有重名问题。只需要修改以下代码，将“href”属性替换为“content”属性。
//添加新选项卡 tabs.tabs(‘add‘, { id : node.id, title : node.text, content : ‘<iframe src="in.html"></iframe>‘, closable : true });
in.html文件与easyui.html在一个目录，里面只有一句话“iframe page”。
运行效果如下
以上是关于easyui选项卡页面的主要内容，如果未能解决你的问题，请参考以下文章