2018正版葡京赌侠诗简单后台管理模版

by admin on 2019年2月11日

  原文地址:从简后台管理模版
  以前给客户开发一个简便的后台管理体系,本来准备套用AdminLTE的,但客户嫌弃太臃肿,而且又须要有多tab页面切换,于是从自己代码库中找到好久前就写过的保管后台,根据要求重写。那是依据jQuery,加上自个儿编排基础样式,从零搭建起来的框架,在那几个轻量级模版的功底上举行付出vue项目。现在顺便将以此模版搭建成我的前端demo的治本系列,而那篇小说就讲述下什么样落实简单的后台管理种类。

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

2018正版葡京赌侠诗 1

类型架构

  基于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>Html Component</a>
          <ul style="height: 0px;">
            <li><a data-type="tab" title="Alert" href="./pages/alert.html"> Alert</a> </li>
            <li><a data-type="tab" title="Page" href="./pages/page.html"> Page</a> </li>
            <li><a data-type="tab" title="Panel" href="./pages/panel.html"> Panel</a> </li>
          </ul>
        </li>
        <li>
          <a title="My Blog" href="/"><i class="icon-bookmark"></i>My Blog</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"> Alert</a> </li>
        <!-- 外部链接跳转 -->
        <li><a title="My Blog" href="/"><i class="icon-bookmark"></i>My Blog</a></li>
    </ul>

总结

  这么些模版还有许多地点需求宏观,可以在此基础上改动添加相应效用,也得以在此基础上利用vue,react落成内容页的成效。
具体细节请查看代码:https://github.com/edwardzhong/manage-demo

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图