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