王小白how 2019-05-06 15:33 采纳率: 0%
浏览 555

使用easyui布局的 怎么可以点击按钮 在center打开界面 不发生跳转

使用easyui布局的 怎么可以点击按钮 在center打开界面 不发生跳转

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>   
    <title>老师信息管理中心</title>
    <%
            //权限验证
            if(session.getAttribute("currentUser")==null){
                System.out.println("滚");
                response.sendRedirect("index.jsp");
                return;
            }
    %>
        <link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href=".easyui/themes/icon.css">
    <script type="text/javascript" src="easyui/jquery-1.8.0.min.js"></script>
    <script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="easyui/locale/easyui-lang-zh_CN.js"></script>
    <script type="text/javascript">
    $(function(){
        // 数据
        var treeData=[{
            text:"信息管理",
            children:[{
                text:"学生发布广场",
                attributes:{
                    url:"studentPlace.jsp"
                }
            },{
                text:"老师发布广场",
                attributes:{
                    url:"teacherPlace.jsp"
                }
            },{
                text:"个人信息",
                attributes:{
                    url:"mysession.jsp"
                }
            },{
                text:"我发布的信息",
                attributes:{
                    url:"Myself.jsp"
                }
            },{
                text:"网站信息",
                attributes:{
                    url:"webInstruction.jsp"
                }
            },{
                text:"违规用户信息",
                attributes:{
                    url:"manInfoManager2.jsp"
                }
            },{
                text:"我的沟通",
                attributes:{
                    url:"say.jsp"
                }
            },{
                text:"我的订单",
                attributes:{
                    url:""
                }
            }]
        }];

        // 实例化树菜单
        $("#tree").tree({
            data:treeData,
            lines:true,
            onClick:function(node){
                if(node.attributes){
                    openTab(node.text,node.attributes.url);
                }
            }
        });

        // 新增Tab
        function openTab(text,url){
            if($("#tabs").tabs('exists',text)){
                $("#tabs").tabs('select',text);
            }else{
                var content="<iframe frameborder='0' scrolling='auto' style='width:100%;height:100%' src="+url+"></iframe>";
                $("#tabs").tabs('add',{
                    title:text,
                    closable:true,
                    content:content
                });
            }
        }
    });
    </script>
  </head>
  <body class="easyui-layout">
  <div region="north" style="height:120px; background-color:#E0EDEF">
        <img  src="image/3.jpg">
        <input type="button" value="学生发布广场" onclick="javascrtpt:window.location.href='studentPlace.jsp'" target="main">
        当前用户:&nbsp;<font color="red" >${currentUser.userName }</font>
        <a href="studentPlace.jsp" target="center"> 学生发布广场</a>
  </div>
    <div region="center" style="height:1000px;" name="main" title="欢迎使用">
            <div class="easyui-tabs"  border="false"  id="tabs">
            <div title="首页">
            <div align="center" style="padding-top: 100px;"name="main"><font color="red" size="10">欢迎使用</font></div>
            </div>
            </div>
    </div>
    <div region="west" style="width:150px;" title="导航菜单"  split="true">
    <ul id="tree"></ul>
    </div>
        <div region="south" style="height:25px;" align="center">版权所有<a href="http://www.baidu.com">www.baidu.com</a></div>
  </body>
</html>
  • 写回答

1条回答 默认 最新

  • 杰哥力挽狂澜 2024-05-14 10:09
    关注

    在使用 jQuery EasyUI 框架构建的页面中,如果你想在点击按钮时在中央区域(center region)打开一个新的界面,而不是发生页面跳转,你需要使用 JavaScript 来动态地管理 tabs。看起来你已经在页面中集成了 tabs 和 tree 的功能,这是非常好的。下面我会给出如何在不发生跳转的情况下,通过按钮点击打开新的 tab 页面的方法。
    修改按钮的 HTML:移除或修改按钮的 onclick 属性,因为我们不再需要通过直接跳转方式加载页面。
    将这一行:
    <input type="button" value="学生发布广场" />
    改成:
    <input type="button" value="学生发布广场" />
    全部代码你可以看看

    <title>老师信息管理中心</title>
    评论

报告相同问题?