锐客网

  1. 首页 > 睿知 > it技术 > >

后台管理项目页面搭建模板

IT知识后台管理搭建

丈夫志四海，万里犹比邻。这篇文章主要讲述后台管理项目页面搭建模板相关的知识，希望能为你提供帮助。
资料准备



  • 资料下载地址为：??https://wws.lanzous.com/i9Q9Mgi22zi??
  • 创建一个普通的纯 html 项目引入 EasyUI 上面我给出了下载地址


后台管理项目页面搭建模板

文章图片
        < script  type="text/javascript"  src="https://www.songbingjia.com/android/jquery.easyui.min.js"> < /script>
        < script  type="text/javascript"  src="https://www.songbingjia.com/android/easyui-lang-zh_CN.js"> < /script>
< /head>
< body>

< /body>
< /html>
Layout布局
< !DOCTYPE  html>
< html  lang="en">
< head>
        < meta  charset="UTF-8">
        < title> IT6666权限管理系统< /title>
        < link  rel="stylesheet"  type="text/css"  href="https://www.songbingjia.com/android/uimaker/easyui.css">
        < link  rel="stylesheet"  type="text/css"  href="https://www.songbingjia.com/android/uimaker/icon.css">
        < script  type="text/javascript"  src="https://www.songbingjia.com/android/jquery.min.js"> < /script>
        < script  type="text/javascript"  src="https://www.songbingjia.com/android/jquery.easyui.min.js"> < /script>
        < script  type="text/javascript"  src="https://www.songbingjia.com/android/easyui-lang-zh_CN.js"> < /script>
        < style>
                * 
                        padding:  0;
                        margin:  0;
               
        < /style>
< /head>
< body  class="easyui-layout">
< div  data-options="region:north"  style="height:100px; background:  #ec4e00; padding:  20px  20px">
        < img  src="https://www.songbingjia.com/android/main_logo.png"/>
< /div>
< div  data-options="region:south"  style="height:50px; padding-top:  15px; border-bottom:  3px  solid  #ec4e00; ">
        < p  align="center"  font-size="14px"> Copyright  (c)  2020-2030  IT6666.Co.Ltd.  All  Rights  Reserved.< /p>
< /div>
< div  data-options="region:west,split:true"  style="width:300px; ">
        < div  id="aa"  class="easyui-accordion"  data-options="fit:true">
                < div  title="菜单"  data-options="iconCls:icon-save,selected:true"  style="overflow:auto; padding:10px; ">
                        < ul  id="tree"> < /ul>
                < /div>
                < div  title="Title2"  data-options="iconCls:icon-reload"  style="padding:10px; ">
                        content2
                < /div>
                < div  title="Title3">
                        content3
                < /div>
        < /div>
< /div>
< div  data-options="region:center"  style="padding:5px; background:#eee; ">
        < div  id="tabs">
        < /div>
< /div>

< script>
        $(function  () 
                $(#tree).tree(
                        url:  tree.json,
                        lines:  true,
                        onClick:  function  (node) 
                                //  在添加标签之前，做判断，判断这个标签是否存在
                                let  exists  =  $(#tabs).tabs(exists,  node.text);
                                if  (exists) 
                                        //  存在就选中
                                        $(#tabs).tabs(select,  node.text);
                                  else 
                                        //  不存在就添加
                                        $("#tabs").tabs("add", 
                                                title:  node.text,
                                                closable:  true,
                                                content:  `< iframe  src=https://www.songbingjia.com/android/$node.attributes.url width="100%"  height="100%"  frameborder="0"> < /iframe> `
                                        );
                               
                       
                );
                $(#tabs).tabs(
                        fit:  true
                );
        );
< /script>
< /body>
< /html>

动态添加标签页
...

< div  data-options="region:west,split:true"  style="width:300px; ">
        < div  id="aa"  class="easyui-accordion"  data-options="fit:true">
                < div  title="菜单"  data-options="iconCls:icon-save,selected:true"  style="overflow:auto; padding:10px; ">
                        < ul  id="tree"> < /ul>
                < /div>
                < div  title="Title2"  data-options="iconCls:icon-reload"  style="padding:10px; ">
                        content2
                < /div>
                < div  title="Title3">
                        content3
                < /div>
        < /div>
< /div>
< div  data-options="region:center"  style="padding:5px; background:#eee; ">
        < div  id="tabs">
        < /div>
< /div>

< script>
        $(function  () 
                $(#tree).tree(
                        url:  tree.json,
                        lines:  true,
                        onClick:  function  (node) 
                                //  在添加标签之前，做判断，判断这个标签是否存在
                                let  exists  =  $(#tabs).tabs(exists,  node.text);
                                if  (exists) 
                                        //  存在就选中
                                        $(#tabs).tabs(select,  node.text);
                                  else 
                                        //  不存在就添加
                                        $("#tabs").tabs("add", 
                                                title:  node.text,
                                                closable:  true,
                                                content:  `< iframe  src=https://www.songbingjia.com/android/$node.attributes.url width="100%"  height="100%"  frameborder="0"> < /iframe> `
                                        );
                               
                       
                );
                $(#tabs).tabs(
                        fit:  true
                );
        );
< /script>

...

Tabs页面引入【后台管理项目页面搭建模板】修改 index.html
...

< script>
        $(function  () 

    推荐阅读


    上一篇：低代码机器人是如何实现监控库存，并实时通知指定人，仓库管理不再慌乱

    下一篇：React-Redux的使用