easyui的layout学习

目的:设置layout布局,并且能随意更改center指向的页面。
效果图:

layout效果图

代码:

<%@ page language="java" contentType="text/html;charset=UTF-8" pageEncoding="UTF-8"%>
<%String path = request.getContextPath();%>
<%String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";%>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <base href="<%=basePath %>">
    <title>layout</title>
    <!--
    <link rel="stylesheet" type="text/css" href="jquery-easyui-1.4.3/themes/default/easyui.css">
    --> 
    <link rel="stylesheet" type="text/css" href="jquery-easyui-1.4.3/themes/bootstrap/easyui.css">
     
    <link rel="stylesheet" type="text/css" href="jquery-easyui-1.4.3/themes/icon.css">
    <script type="text/javascript" src="jquery-easyui-1.4.3/jquery.min.js"></script>
    <script type="text/javascript" src="jquery-easyui-1.4.3/jquery.easyui.min.js"></script>
</head>
<script>
$(function(){
    
});
function loadCenter(url){
    var center = $("body").layout('panel','center');//获取center的panel
    center.panel('refresh',url);//更新panel的href
}
function getIdValue(id){
    console.log($("#"+id).val());
}
</script>
<body class="easyui-layout">
    <div data-options="region:'north'" style="height:50px">logo</div>
    <div data-options="region:'west'" title="菜单" style="width:150px;">
        <a href="javascript:void(0)" onclick="loadCenter('test1.html')">加载页面1</a><br><br>
        <a href="javascript:void(0)" onclick="loadCenter('test2.html')">加载页面2</a><br><br>
        <a href="javascript:void(0)" onclick="getIdValue('id1')">获取id1</a><br><br>
        <a href="javascript:void(0)" onclick="getIdValue('id2')">获取id2</a><br><br>
    </div>
    <div data-options="region:'east'" style="width:100px;"></div>
    <div id="centerDiv" data-options="region:'center'"></div>
</body>
</html>

重点:
获取center并且更新其href。
var center = $("body").layout('panel','center');//获取center的panel
center.panel('refresh',url);//更新panel的href
源码下载

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 134,837评论 18 139
  • 《ijs》速成开发手册3.0 官方用户交流:iApp开发交流(1) 239547050iApp开发交流(2) 10...
    叶染柒丶阅读 5,277评论 0 7
  • 请参看我github中的wiki,不定期更新。https://github.com/ivonzhang/Front...
    zhangivon阅读 7,169评论 2 19
  • 近期项目中可能会用到framework的封装,所以抽时间学习了一下。网上有许多关于这方面的文章,这里介绍下我自己的...
    天明天阅读 1,089评论 2 0
  • 一座神庙 即使荒芜 也仍是祭坛 即使坍塌 也仍是神灵 曾经,我就像信神一样 信你 如今,你已不是你 但丝毫不影响 ...
    天堂里的鱼阅读 190评论 0 2