easyui选项卡切换

最新推荐文章于 2022-06-30 17:09:33 发布

weixin_30919235

最新推荐文章于 2022-06-30 17:09:33 发布

阅读量109

点赞数

原文链接：http://www.cnblogs.com/wangfd/p/8858590.html

版权

这里主要介绍当对应的面板已经存在时，不能新增，否则就添加新的面板

body内容

<body class="easyui-layout">
    <div data-options="region:'north',title:'North Title',split:true" style="height:90px;"></div> 
    <div data-options="region:'west',title:'导航菜单栏',split:true" style="width:180px;">
        <div id="aa" class="easyui-accordion" style="width:300px;height:300px;"> 
　　　　　　<div title="基础数据录入">
        　　　　<!-- list-style: none去左边的点；text-decoration: none：去超链接下划线,title用来区分后继定位这里的超链接 -->
               <ul style="list-style: none;padding: 0px;margin:0px;">
                   <li style="padding: 6px;"><a href="${proPath}/supplier/supplierlist.action" title="供应商管理"
                        style="text-decoration: none;display: block;font-weight:bold;">供应商管理</a>
                   </li>
                   <li style="padding: 6px;"><a href="${proPath}/base/goURL/goods/goodslist.action" title="商品管理"
                        style="text-decoration: none;display: block;font-weight:bold;" >商品管理</a>
                   </li>
               </ul>
           </div>
        </div>
    </div>
    <div data-options="region:'center'" style="border:0">
           <div id="tt" class="easyui-tabs" data-options="fit:true" style="width:500px;height:250px;">   
            <div title="系统简介" style="padding:20px;">   
                XXX...   
            </div>             
        </div>  
    </div>
</body>

js:

<script type="text/javascript">
          $(function() {
            $("a[title]").click(function() {
                var title = this.title;
                var text = this.href;
                alert(title);
                //如果对应的面板已经存在，就选择，否则就添加新的面板
                if($('#tt').tabs("exists",title)){
                    $('#tt').tabs("select",title);
                }else{
                    $('#tt').tabs('add',{
                        title:title,
                        selected: true,
                        closable:true,
                        //href:xxx.jsp,
                        //可以加载内容填充到选项卡，页面有Js时，也可加载
                        content:"<iframe src='"+text+"' title='"+this.title+"' height='100%' width='100%' frameborder='0px' ></iframe>"

                        //...
                    });
                }
                
                return false;
                
            });
        });
      
      </script>

转载于:https://www.cnblogs.com/wangfd/p/8858590.html

weixin_30919235

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
easyui选项卡切换

这里主要介绍当对应的面板已经存在时，不能新增，否则就添加新的面板body内容<body class="easyui-layout"> <div data-options="region:'north',title:'North Title',split:true" style="height:90px;"></div> ...
复制链接

扫一扫