陕煤项目如何套用比令数据的模式进行主页面的套用完成

考虑陕煤项目到要使用比令数据的部分功能，所以给大家说明一下，如何套用陕煤的项目到比令数据项目进行页面的套用

比令数据之前是在子页面上使用

<%@ include file="../../common/head.jsp"%>
<%@ include file="../../common/left_menu.jsp"%>

分别将系统管理页面的头部head.jsp和left_menu导入到子页面上，
这里的子页面只得是每个页面的功能页面，比如这些：
比令数据

这些模式如果改用到陕煤的项目下，就应该这样套用。

到git目录shccig / web-html下面 取出 admin/page/admin.html

admin.html就是我们的系统管理模板
page_1.html就是子页面
现在我们需要在子页面上将admin.html系统模板套用过来，就需要把admin.html分成两段 分别引入到子页面上，如下面图：

具体到代码为：

head.jsp

<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="renderer" content="webkit">
    <link rel="shortcut icon" href="/common/image/favicon.ico" type="image/x-icon" />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>首页</title>


</head>
<body>
<div class="user_header row">
    <div class="col-xs-12 du_title_logo du_title_admin">

        <img src="../../common/image/logo/login_admin.png" alt="logo">
        <ul class="setTopnav">
         <!--加载顶部导航区域-->
        </ul>
    </div>

</div>
<div class="user_cention">
    <div class="user_cention_left">
            <ul class="ziji_ul">
                <!--加载左侧导航区域-->
            </ul>
    </div>
    <div class="user_cention_right">

footer.jsp

 <!--加载子页面区域-->
    </div>
    <dd class="clear_b"></dd>
</div>



<h5 class="header_user text-right">
    <span class="index_login_span">
        欢迎：admin | <span class="cu_dd">退出</span>
    </span>
</h5>

<div class="shouqi" title="点击收起">
   <<
</div>

</body>
</html>

<!--框架js-->
<script src="../../assets/yepnope/yepnope.min.js"></script>
<script type="text/javascript" src="../../assets/jquery/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="../../assets/bootstrap/js/bootstrap.min.js"></script>
<!--执行内部绑定-->
<script type="text/javascript" src="../../common/js/admin_ajax.js"></script>

<script>


    var getJsonnav={
        "indexPage":"../../admin/page/page_4.html",
        "navName":[
            {
                "topNav" : "党群",
                "leftNav": [
                    ["栏目1","../../admin/page/page_1.html","../../admin/image/admin/ico/jggl.png","page_1"],
                    ["栏目2","../../admin/page/page_2.html","../../admin/image/admin/ico/jggl.png","page_2"]
                ]
            },
            {
                "topNav" : "工会",
                "leftNav": [
                    ["栏目1","../../admin/page/page_1.html","../../admin/image/admin/ico/jggl.png","page_1"],
                    ["栏目2","../../admin/page/page_2.html","../../admin/image/admin/ico/jggl.png","page_2"]
                ]
            },
            {
                "topNav" : "纪委",
                "leftNav": [
                    ["栏目1","../../admin/page/page_1.html","../../admin/image/admin/ico/jggl.png","page_1"],
                    ["栏目2","../../admin/page/page_2.html","../../admin/image/admin/ico/jggl.png","page_2"]
                ]
            },
            {
                "topNav" : "管理",
                "leftNav": [
                    ["机构管理","../../admin/page/page_2.html","../../admin/image/admin/ico/jggl.png","page_2"],
                    ["用户管理","../../admin/page/page_1.html","../../admin/image/admin/ico/yhgl.png","page_1"],
                    ["角色管理","../../admin/page/page_3.html","../../admin/image/admin/ico/jsgl.png","page_3"],
                    ["资源管理","../../admin/page/page_4.html","../../admin/image/admin/ico/zygl.png","page_4"],
                    ["日志管理","../../admin/page/page_5.html","../../admin/image/admin/ico/rzgl.png","page_5"],
                    ["数据字典","../../admin/page/page_6.html","../../admin/image/admin/ico/sjzd.png","page_6"]
                ]
            }

        ]
    }


    /*如果使用ajax加载完上面的json所执行的回调函数*/
    getUrl();

</script>

然后在page_1.jsp上面这样引入


<%@ include file="../../common/head.jsp"%>

<div class="tableBody">
  ...子页面内容略
</div>

<%@ include file="../../common/footer.jsp"%>
<script>
 ...js内容略
</script>

    共有 0 条评论

    Top
    ×