简洁后台管理模版

原文地址:简洁后台管理模版
之前给客户开发一个简单的后台管理系统,本来准备套用AdminLTE的,但客户嫌弃太臃肿,而且又需要有多tab页面切换,于是从我代码库中找到好久前就写过的管理后台,根据需求重写。这是基于jQuery,加上自己编写基础样式,从零搭建起来的框架,在这个轻量级模版的基础上进行开发vue项目。现在顺便将这个模版搭建成我的前端demo的管理系统,而这篇文章就讲述下如何实现简单的后台管理系统。

效果请看:manage-demo:http://jeffzhong.space/sites/manage-demo/

项目架构

基于gulp自动化工具,使用less预编译,使用swig模版引擎编译html。

基础样式base.css,字体库raleway,图标库fontello,js基础库jQuery。

同时使用webpack为vue.js配置好开发环境,在src文件夹里面可以直接开发vue项目,里面有简单的vue样例。当然想用react的也可以更改为react库。

文件目录

  • dist 文件生成目录
  • src 源文件目录,里面为vue项目的文件
  • img 图片文件夹
  • lib 类库文件夹
  • less less文件
  • pages 页面文件夹
  • index.html 首页(母板页)
  • gulpfile.js
  • webpack.config.js
  • package.json

而我们现在要做的就是最外层的框架页,也就是母板页,为了使其更加轻便,同时适应更多类型的项目,只使用了最基础的jquery来实现功能。

基础样式库

每个前端开发者做过大量项目后,基本都会有自己的样式库吧。我的base-css是参考了部分bootstrap和pure的样式库,精简了很多组件,非常的轻量级。详细代码请看https://github.com/edwardzhong/base-csss,less预编译,gulp自动化,可以自由选择所需要的组件后再打包,经过这样定制打包后的样式体积就更加的小了。该样式库主要包括如下组件:

  • normalize:html5标签修复
  • grid:响应式网格
  • alert
  • button
  • breadcrumb
  • dialog
  • form
  • menu
  • pager
  • pagination
  • panel
  • tab
  • table

有了基础样式之后,我们搭建系统就方便很多了。

实现母板页

后台管理系统最重要的就是母板页(index.html),我们一步步来实现它。

布局

基本就是左右布局:左边导航部分固定宽度,右边内容部分宽度自适应。实现这个布局有很多种方式,这里不详叙,从实现动画和自适应方面考虑,我采用的是绝对定位的方式。左边的导航栏隐藏显示动画是通过设置margin-left和transition属性实现的。

    /*左边导航栏*/
    .menu-wrap {
        position: absolute;
        transition: margin-left .3s ease-in-out;
        top: 50px;
        left: 0;
        width: 200px;
        height: calc(100% - 50px);
        overflow-y: scroll;
    }
    /*右边内容部分*/
    .main {
        height: calc(100% - 50px);
        overflow: hidden;
        margin-left: 200px;
        transition: margin-left .3s ease-in-out;
    }

导航栏

导航栏就是使用ul列表布局,如果要实现多级的子菜单就在相应li下再嵌套一个ul列表即可,然后添加样式,添加css3动画等。布局示例请看如下的代码:

    <ul id="menuList" class="side-menu">
        <li class="children">
          <a data-type="tab" title="Html Component" href="javascript:;"><i class="icon-doc-text"></i><span>Html Component</span></a>
          <ul style="height: 0px;">
            <li><a data-type="tab" title="Alert" href="./pages/alert.html"><span> Alert</span></a> </li>
            <li><a data-type="tab" title="Page" href="./pages/page.html"><span> Page</span></a> </li>
            <li><a data-type="tab" title="Panel" href="./pages/panel.html"><span> Panel</span></a> </li>
          </ul>
        </li>
        <li>
          <a title="My Blog" href="/"><i class="icon-bookmark"></i><span>My Blog</span></a>
        </li>
    </ul>

实现多tab内容面

很多后台管理模版都是通过模版引擎编译页面内容,这样生成的每个页面都会包含导航栏和内容块,这样的好处就是编写比较简单。但是点击导航栏里的链接就回重新加载整个页面,在网速不佳的情况,就会看到整个页面在跳动。

另一种方式是使用frameset或iframe,嵌套页面。这样内容页和母版页是分离的,分别加载的。这样会体验比较好,编写的代码也是隔离的。但也是隔离了作用域,所以要专门处理框架内外层通信的问题,同时编写也会稍麻烦。

我这里选用的是iframe方案,因为使用多iframe实现母板页多tab显示比较方便。这样左边导航栏点击后就会创建新的iframe并填入链接,然后再将该iframe插入内容块。同时tab栏也对应插入一一对应的tab标签,这样点击tab标签就隐藏显示对应iframe块。请看如下的html代码结构:

    <div id="main" class="main">
      <nav class="nav">
        <!-- tab标签 -->
        <ul id="nav" class="menu-tabs">
            <li><a>...</a><li>
            <li><a>...</a><li>
        </ul>
      </nav>
      <!-- 页面iframe -->
      <div class="page-con">
        <div class="page"><iframe src="..."></iframe></div>
        <div class="page"><iframe src="..."></iframe></div>
      </div>
    </div>

母板页的添加iframe和添加tab标签的代码

    //添加页面
    function appendPage(url){
      $('.page-con .page').removeClass('active');
      $('.page-con').append('<div class="page active"><iframe src="'+url+'" frameborder="0" width="100%" height="100%"></iframe></div>');
    }

    //添加tab
    function appendTab(txt){
      $nav.find('li').removeClass('active');
      $nav.append('<li data-txt="'+txt+'" class="active"><a href="javascript:;">'+txt+'<i class="close">×</i></a></li>');
      var w=setTabWidth();
      //移动到新增tab
      $navParent.animate({'scrollLeft':w+'px'},600);
    }

当然这中间有很多细节,比如添加,删除,选择,滚动页面,tab栏的选择关闭,tab栏内容超出页面宽度的处理,当前tab如何滚动到当前显示区等,具体实现可以查看github代码。

内容页

完成母板页之后,接下来就是添加内容页了。首先就是定义导航链接,添加了自定义属性data-type="tab"的链接就是要在右边内容iframe打开的页面,否则就是打开外部链接了。

内容页既可以是静态页面,也可以用vue,react构造页面,demo里面有部分页面使用了vue来实现逻辑功能。

    <ul id="menuList" class="side-menu">
        <!-- 要添加到iframe中的链接 -->
        <li><a data-type="tab" title="Alert" href="./pages/alert.html"><span> Alert</span></a> </li>
        <!-- 外部链接跳转 -->
        <li><a title="My Blog" href="/"><i class="icon-bookmark"></i><span>My Blog</span></a></li>
    </ul>

总结

这个模版还有很多地方需要完善,可以在此基础上修改添加相应功能,也可以在此基础上使用vue,react实现内容页的功能。 具体细节请查看代码:https://github.com/edwardzhong/manage-demo

时间: 2024-10-09 07:55:32

简洁后台管理模版的相关文章

推荐3套好用的后台管理模版,免费下载

非常好用的绿色后台管理模版,纯净版---免费下载 http://www.htmlmbdq.com/Template/Detail/1131 Olive Admin响应式后台管理模板---免费下载 http://www.htmlmbdq.com/Template/Detail/1134 浅色后台管理模版--免费下载 http://www.htmlmbdq.com/Template/Detail/1133 原文地址:https://www.cnblogs.com/sp1086/p/10647921.

后台管理模版(1)

1.后台界面框架主页面 <body class="easyui-layout"> <div data-options="region:'north',split:false,border:true" style="overflow: hidden; height: 80px; background-color: #d8e4fe;">     <div class="footer">欢迎xxx

后台管理UI

后台管理UI 目录 一.EasyUI 二.DWZ JUI 三.HUI 四.BUI 五.Ace Admin 六.Metronic 七.H+ UI 八.Admin LTE 九.INSPINIA 十.LigerUI 十一.其它UI 十二.总结 最近要做一个企业的OA系统,以前一直使用EasyUI,一切都好,但感觉有点土了,想换成现在流行的Bootstrap为基础的后台UI风格,想满足的条件应该达到如下几个: 1.美观.大方.简洁 2.兼容IE8.不考虑兼容IE6/IE7,因为现在还有很多公司在使用Wi

后台管理UI的选择

后台管理UI的选择 目录 一.EasyUI 二.DWZ JUI 三.HUI 四.BUI 五.Ace Admin 六.Metronic 七.H+ UI 八.Admin LTE 九.INSPINIA 十.LigerUI 十一.FineUI 十二.其它UI 十三.总结 最近要做一个企业的OA系统,以前一直使用EasyUI,一切都好,但感觉有点土了,想换成现在流行的Bootstrap为基础的后台UI风格,想满足的条件应该达到如下几个: 1.美观.大方.简洁 2.兼容IE8.不考虑兼容IE6/IE7,因为

后台管理UI皮肤的选择

后台管理UI的选择 目录 一.EasyUI 二.DWZ JUI 三.HUI 四.BUI 五.Ace Admin 六.Metronic 七.H+ UI 八.Admin LTE 九.INSPINIA 十.LigerUI 十一.FineUI 十二.其它UI 十三.总结 最近要做一个企业的OA系统,以前一直使用EasyUI,一切都好,但感觉有点土了,想换成现在流行的Bootstrap为基础的后台UI风格,想满足的条件应该达到如下几个: 1.美观.大方.简洁 2.兼容IE8.不考虑兼容IE6/IE7,因为

后台管理UI模板

一.EasyUI easyui是一种基于jQuery的用户界面插件集合. easyui为创建现代化,互动,JavaScript应用程序,提供必要的功能. 使用easyui你不需要写很多代码,你只需要通过编写一些简单HTML标记,就可以定义用户界面. easyui是个完美支持HTML5网页的完整框架. easyui节省您网页开发的时间和规模. easyui很简单但功能强大的. 优点:轻量.功能强大.免费.兼容性好.帮助详细.使用的人多生态好 缺点:非响应式布局.某些系统看起来有点土(客户与老板的感

后台管理UI推荐

目录 一.EasyUI 二.DWZ JUI 三.HUI 四.BUI 五.Ace Admin 六.Metronic 七.H+ UI 八.其它UI 九.总结 最近要做一个企业的OA系统,以前一直使用EasyUI,一切都好,但感觉有点土了,想换成现在流行的Bootstrap为基础的后台UI风格,想满足的条件应该达到如下几个: 1.美观.大方.简洁 2.兼容IE8.不考虑兼容IE6/IE7,因为现在还有很多公司在使用Win7系统,系统内置了IE8 3.能通过选项卡打开多个页面,不想做单页,iframe也

一套后台管理html模版

最近自己需要一套后台管理的模版,然后去网上查找,模版的确很多,但是适合我的并不多.我需要的模版是不会很大,我能够控制代码,样式不要太古朴,最好有点CSS3的效果.最后终于找到一张主页,然后再根据这个主页来编辑其他的后台部分.第一眼看到这个样式,就非常满意.现在只做了四张页面,登录.首页.菜单管理和菜单添加页面. 浏览器兼容是尽量做到IE8以上可以使用,firefox.chrome浏览器等能完全兼容.由于IE8无法解析CSS3,所以有些地方会额外的制作CSS.下面的代码都不是完整的代码,完整代码可

推荐几款基于Bootstrap的响应式后台管理模板

1.Admin LTE 该模版开源免费. AdminLTE - 是一个完全响应式管理模板.基于Bootstrap3的框架.高度可定制的,易于使用.支持很多的屏幕分辨率适合从小型移动设备到大型台式机. 下载地址:https://www.almsaeedstudio.com/ 注:比较推荐使用这款模版,本人正在改造这款模版的首页供自己使用. 添加tabs标签,添加右键弹窗等. 2.Ace - Responsive Admin Template 该模版为收费模版. Ace 是一个轻量.功能丰富.HTM