网页的便签效果是怎么实现的？点击navbar tabcontrol 出现网页。可见效果图
0
我点击左边的相信的功能 右边出现功能菜单。功能菜单想浏览器的便签一样
最佳答案
0
像这样的效果么？
收获园豆：60
嗯 对 就是这种效果。你可以把这个页面和相应的 后台代码给我发一份吗？我纠结了好久了，老是实现不了。我的邮箱 kainjie@sina.com。谢谢你了
@KainJC:
<head runat="server">
<title>ddd</title>
<link href="../../Content/EasyUI/themes/default/easyui.css" rel="stylesheet" type="text/css" />
<link href="../../Content/EasyUI/themes/icon.css" rel="stylesheet" type="text/css" />
<script src="../../Scripts/jquery-1.4.1.js" type="text/javascript"></script>
<script src="../../Scripts/jquery.easyui.min.js" type="text/javascript"></script>
<link href="../../Content/EasyUI/themes/demo.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
$(function () {
$("#tab").tabs({});
AddMenuClick();});
function AddMenuClick() {
//添加左侧按钮的点击事件
$(".adds").live('click', function () {
if ($("#tab").tabs('exists', $(this).text())) {
//假如返回true，则已经存在点击过的标签，然后选中我们点击过的标签。
$("#tab").tabs('select', $(this).text());
}
//否则，创建新的标签。
else {
//调用的是下面添加中部标签的方法
addTab($(this).text(), true, $(this).attr("url"));
}
return false;
});
}
//添加中部标签，具体可查看tabs的add方法。
function addTab(title, closable, url) {
$("#tab").tabs('add', {
//点击后，创建的标签内容
title:title,
//标签下面的具体内容
content: "sas",
//按钮图案样式
iconCls: 'icon-reload',
//是否有关闭标签的功能
closable: closable
})
}
//
</script>
</head>
<body class="easyui-layout">
<!------------ 这是头部--------------------------->
<div data-options="region:'north',border:false" style="height:60px;background:#B3DFDA;padding:10px">
电商后台系统<br />
<input type="button" value="安全退出" id="btnquit" />
</div>
<!------------ 左边菜单--------------------------->
<div data-options="region:'west',split:true,title:'菜单导航'" style="width:150px;">
<div id="tt" class="easyui-accordion" fit="true" style="width: 168px;" >
<div title="系统管理" data-options="iconCls:'icon-ok'" style="overflow:auto;padding:10px;">
<p><a href="#" url="/userinfo/DataGrid" class="adds" >用户管理</a></p>
<p><a href="#" url="/Role/DataGrid" class="adds">角色管理</a></p>
<p> <a href="#" url="/actionGroup/DataGrid" class="adds">权限管理</a></p>
</div>
<div title="角色管理" data-options="iconCls:'icon-ok'" style="padding:10px">
<a href="#" class="adds">查看角色列表</a>--</div>
</div>
你可以运行试试，因为我是根据数据库动态生成的，所以修改了一下，另外你要查看下easyui的帮助文档，关于tabs和datagrid方面的。
其他回答(2)
0
方法有很多种
1 每一个tab可以做成一个用户控件，MVC下是PartialView,单击时调用指定页面即可
2 也可以是一个页面，调用方法与1 一样
3 还可以是一个DIV 动态生成，或者提前生成后先隐藏，单击时显示。
4 还有很多种LZ慢慢研究吧..........
收获园豆：20
在研究中，但是方法写不出来啊
@KainJC:
这不是一个简单的功能，先确定好思路，然后一步步的实现，相信自己可以做到的。
0
楼主,这里看吧,这个其实EasyUI的效果... http://www.jeasyui.com/themebuilder/index.php
收获园豆：20
