1. 程式人生 > >easyui頁內跳轉

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