easyui页内跳转

深藏阁楼爱情的钟 2022-05-15 14:34 566阅读 0赞

easyui-layout面板左侧面板点击---》中心面板添加的过程页面跳转的方式

点击触发JavaScript函数或者easyui $("\#tabs").xxx()；（这两个区别就是前者需要触发，后者自动加载）

<a href="javascript:openTab('写博客','writeBlog.jsp','icon-writeblog')" class="easyui-linkbutton" data-options="plain:true,iconCls:'icon-writeblog'" style="width: 150px;">写博客</a>
    
    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
                    });
                }
            };

为标签添加事件

easyui $("\#tabs").xxx()添加触发事件

$('#tree1').tree({
    		onClick: function(node){
    			//alert(node.text);  // 在用户点击的时候提示
    			var tabs=$("#tabs");
    			//获取选项卡的值
    			var tab=tabs.tabs("getTab",node.text);
    			
    			if(tab){
    				tabs.tabs("select",node.text);
    			}else{
    				tabs.tabs('add',{   
    				    title:node.text,   
    				    content:'Tab Body',   
    				    closable:true,  
    				    href:node.attributes.url,
    				    /* tools:[{   
    				        iconCls:'icon-mini-refresh',   
    				        handler:function(){   
    				            alert('refresh');   
    				        } 
    				    }]*/
    				});  
    			}
    		}
    	});

第二种（点击）

<ul id="tree1" class="easyui-tree">
        		<li>
        			<span>项目修改</span>
        			<ul>
        				
        				
        				<li data-options="attributes:{'url':'<%=basePath%>/jsp/welcome.jsp'}">添加</li>
        				<li data-options="attributes:{'url':'list'}">显示</li>
        			</ul>
        		</li>
        		
    </ul>
    
    
     $('#tree1').tree({
    		onClick: function(node){
    			//alert(node.text);  // 在用户点击的时候提示
    			var tabs=$("#tabs");
    			//获取选项卡的值
    			var tab=tabs.tabs("getTab",node.text);
    			
    			if(tab){
    				tabs.tabs("select",node.text);
    			}else{
    				tabs.tabs('add',{   
    				    title:node.text,   
    				    content:'Tab Body',   
    				    closable:true,  
    				    href:node.attributes.url,
    				    /* tools:[{   
    				        iconCls:'icon-mini-refresh',   
    				        handler:function(){   
    				            alert('refresh');   
    				        } 
    				    }]*/
    				});  
    			}
    		}
    	});

第三种（点击）

$(document).ready(function() {
            $("#btn1").click(function() {//页面跳转
                $(location).attr('href', 'login.jsp');
                location.href="test/welcome?value="+value+"&name="+name+">";
            });
            $("#btn2").click(function() {
                $(location).attr('href', 0000000'register.jsp');
            });
        });

第三种---方式二（点击）

$(document).ready(function)(){
        $("#btn").click(function(){
        $('#newDiv').load('new.html');
      });
    });

第四种（直接加载适合做首页）

第五种（不适合局部页面跳转，整个跳转，也可传到控制器）