ui

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/js/easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/js/easyui/themes/icon.css">
<script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery-1.8.3.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath }/js/easyui/jquery.easyui.min.js"></script>
</head>
<body class="easyui-layout">
    <!-- data-options如果html元素是easyui组件,可以用data-options设置属性 -->
    <div region="north" style="height: 100px" title="xxx系统">北部区域</div>
    <div data-options="region:'west'" style="width: 150px" title="系统菜单">
        <!-- 展示折叠面板 -->
        <div class="easyui-accordion" data-options="fit:true">
            <div title="基本功能">
                <a id="btn" class="easyui-linkbutton" data-options="iconCls:'icon-save'">点击</a>
                <script type="text/javascript">
                    $("#btn").click(function(){
                        //判断
                        var r = $("#myTabs").tabs('exists','测试面板');
                        if(r){
                            //选中
                            $("#myTabs").tabs('select','测试面板');
                        }else{
                            //调用tabs组件方法。中部区域中tabs选项卡 添加新面板
                            $("#myTabs").tabs('add',{
                                title:'测试面板',
                                iconCls:'icon-add',
                                closable:true,
                                content:'<iframe src="../pages/base/area.jsp" frameborder="0" width="100%" height="100%"></iframe>'
                            });
                        }
                    })
                </script>
            </div>
            <div title="系统管理"></div>
        </div>
    </div>
    <div data-options="region:'center'">
        <!-- 展示选项卡面板 -->
        <div id="myTabs" class="easyui-tabs" data-options="fit:true">
            <div title="基本功能"></div>
        </div>
    </div>
<!--     <div data-options="region:'east'" style="width: 150px">东部区域</div> -->
    <div data-options="region:'south'" style="height: 50px">南部区域</div>
</body>
</html>

 

posted on 2017-08-09 00:23  0001  阅读(430)  评论(0编辑  收藏  举报