首页 新闻 搜索 专区 学院

网页的便签效果是怎么实现的?点击navbar tabcontrol 出现网页。可见效果图

0
悬赏园豆:100 [已解决问题] 解决于 2013-11-26 10:12

我点击左边的相信的功能 右边出现功能菜单。功能菜单想浏览器的便签一样

KainJC的主页 KainJC | 初学一级 | 园豆:60
提问于:2013-11-22 15:52
< >
分享
最佳答案
0

像这样的效果么?

收获园豆:60
only-time | 初学一级 |园豆:4 | 2013-11-22 21:13

嗯 对 就是这种效果。你可以把这个页面和相应的 后台代码给我发一份吗?我纠结了好久了,老是实现不了。我的邮箱  kainjie@sina.com。谢谢你了

KainJC | 园豆:60 (初学一级) | 2013-11-25 13:30

@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方面的。
only-time | 园豆:4 (初学一级) | 2013-11-26 01:13
其他回答(2)
0

方法有很多种

1 每一个tab可以做成一个用户控件,MVC下是PartialView,单击时调用指定页面即可

 2 也可以是一个页面,调用方法与1 一样

3  还可以是一个DIV 动态生成,或者提前生成后先隐藏,单击时显示。

4  还有很多种LZ慢慢研究吧..........

收获园豆:20
Zery | 园豆:6139 (大侠五级) | 2013-11-22 16:14

在研究中,但是方法写不出来啊

支持(0) 反对(0) KainJC | 园豆:60 (初学一级) | 2013-11-25 13:31

@KainJC: 

这不是一个简单的功能,先确定好思路,然后一步步的实现,相信自己可以做到的。

支持(0) 反对(0) Zery | 园豆:6139 (大侠五级) | 2013-11-25 13:47
0

楼主,这里看吧,这个其实EasyUI的效果... http://www.jeasyui.com/themebuilder/index.php

收获园豆:20
南宫萧尘 | 园豆:187 (初学一级) | 2013-11-25 17:31
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册