easyui頁內跳轉
阿新 • • 發佈:2018-11-02
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}); */
};