关于页面之间局部显示的几种方式

最新推荐文章于 2023-02-24 13:48:55 发布

shuaibi.1

最新推荐文章于 2023-02-24 13:48:55 发布

阅读量526

点赞数

分类专栏：杂记

本文链接：https://blog.csdn.net/sinat_37064286/article/details/83340995

版权

杂记专栏收录该内容

22 篇文章 0 订阅

订阅专栏

第一种：这里使用到了easyui+ssm

<body class="easyui-layout">
    <div data-options="region:'west',title:'列表',split:true" style="width:200px;">
         <a href="javascript:openTab('首页','test/welcome','icon-writeblog')" class="easyui-linkbutton" data-options="plain:true,iconCls:'icon-writeblog'" style="width: 150px">首页</a>
    </div>
    <div data-options="region:'center',title:''" style="padding:5px;background:#eee;">
    	<div id="tabs" class="easyui-tabs" style="height:250px;">
		    <div title="最新发布十篇" style="padding:20px;display:none;">
		        最新发布十篇
		    </div>
		</div>
    </div>
 <script>
        /**
         * 打开新选项卡
         * @param text 标题
         * @param url   路径
         * @param icon  图标
         */
        function openTab(text,url,icon) {
            //判断当前选项卡是否存在
            if($('#tabs').tabs('exists',text)){
                //如果存在 显示
                $("#tabs").tabs("select",text);
            }else{
                //如果不存在 则新建一个
                $("#tabs").tabs('add',{
                    title:text,
                    closable:true,      //是否允许选项卡摺叠。
                    iconCls:icon,    //显示图标
                    content:"<iframe frameborder=0 scrolling='auto' style='width:100%;height:100%' src='"+url+"'></iframe>"
                    
                    //url 远程加载所打开的url
                })
            }
        }
</script>
</body>

此种方式是以linkbutton跳转到JavaScript并传递url(为控制器映射地址) 然后在选项卡中显示控制器返回的url地址页面