简洁后台管理模版

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

效果请看: manage-demo:https://edwardzhong.github.io/sites/manage-demo/
managecss

项目架构

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

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

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

文件目录

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

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

基础样式库

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

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

有了基础样式以后,咱们搭建系统就方便不少了。react

实现母板页

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

布局

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

/*左边导航栏*/
.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打开的页面,不然就是打开外部连接了。每一个在iframe打开的a标签要配置title属性,由于我是经过title来区分页面是否已经打开过,tab中已经存在就再也不打开。

内容页既能够是静态页面,也能够用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

相关文章
相关标签/搜索