easyui页内跳转

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
                });
            }
        };

为标签添加事件

 <script type="text/javascript">
		$(function(){
			$('.wu-side-tree a').bind("click",function(){
				var title = $(this).text();
				var url = $(this).attr('data-link');
				var iconCls = $(this).attr('data-icon');
				var iframe = $(this).attr('iframe')==1?true:false;
				addTab(title,url,iconCls,iframe);
			});	
		})

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>
    				
    				<!-- 此处的url可以是控制器映射地址也可以是实际url -->
    				<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');
  });
});

第四种(直接加载适合做首页)

<div title="首页" data-options="href:'',closable:false,iconCls:'icon-tip',cls:'pd3'">
				<iframe align="center" width="950" height="170" src="demo.html" frameborder="no" border="0" marginwidth="0" marginheight="0" scrolling="no"></iframe>
			</div>

第五种(不适合局部页面跳转,整个跳转,也可传到控制器)

function dosearch(value,name){
			 /* alert(value+":"+name); */
			 /* alert($("ss").serachbox('getValue')); */ 
			 $(location).attr('href','test/welcome?value=${value}&name=${name}');
			 /* alert(${value}); */
		 };


 

猜你喜欢

转载自blog.csdn.net/sinat_37064286/article/details/83514053