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

悠悠 2022-05-12 17:18 219阅读 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地址页面