布局

  基本就是左右布局:左边导航部分定位宽度,右边内容有宽自适应。实现者布局有死多种法,这里不详叙,从落实动画以及自适应方面考虑,我使用的是绝定位的方。左边的导航栏隐藏显示动画是透过设置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;
    }

如果你是同寒商厦之老板娘,什么样的职工是你无限想念要之?

  • 主动为企业宣传
  • 再接再厉为公司之前进出谋划策
  • 实践力强,确实用店铺战略落地
  • 发觉问题积极/全力地解决
  • 同商家共同进退

清单还可以好丰富,如果要一言以蔽之,大家是勿是还是怀念使敬业度高的员工?

落实母板页

  后台管理网最要之饶是母板页(index.html),我们一步步来兑现其。

切实的状态怎样为?

但是,看了一些研告诉,形势也非是那乐观。且看来自Steelcase联合Ipsos调研发布的平等客有关全球职场敬业度调研报告的多寡:

The study found that more than one-third of workers in 17 of the
world’s most important economies are disengaged.
切磋发现,在世界上最要的17单经济体的雇员中,有最少3分的1底人口当劳作达是不够投入的。

China’s level of engaged workers is concerning. While the number of
disengaged employees is lower than the global average, the largest
group of employees is in the middle, neither strongly engaged or
disengaged.
中原的职工工作投入度是担忧的,虽然尽不投入的职工占比低于整个调研之平均水平,但绝大部分的员工的投入度(敬业度,本文不谨言慎行地管简单歌词等跟)一般,极其投入和极端不投入的员工占比较都颇有些(聚类分析呈中间深少峰略)。

现实数目显现下图:

employee engagement-worldwide.png

employee engagement-China.png

内容页

  完成母板页后,接下去便添加内容页了。首先就是概念导航链接,添加了起定义属性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>

提出问题之而,我们吧发矣诸多的可行性

  • 一个真真而引发人之店铺愿景
    不无的商号的移动,本质上该是圈企业愿景展开的。企业之装有人数哪管这个愿景描绘出来,并为拥有的员工相信并为底一起尽力?
  • 关怀员工的求
    主禧一代(84~00?)正于成为职场的主力军,他们出那个颇具时代特征的职场需求,与那个工业时代之劳动力有着鲜明的差距。发现并满足这些需求将凡不可避免的自由化。
    总禧一代的职场需求(参考)
    1.再次富有支持性/包容性的行事环境;
    2.针对团结之办事又起掌控力;
    3.想做对社会更有意义的转业;
    4.相思实现个人的对象;
    5….
  • 行事场地的统筹
    工作占据了每个人工作日的大举精力,而这大部分的时以还当办公场地度过,如何将办公室场地设计得舒服/便于与团沟通是一个百般最主要之课题。试想如果一个办公场所为具备人且想趁早逃离的话,谈何工作投入为?
  • 据此绩效反馈代替绩效评估
    现行做事之表征为咱们死为难用原始的指标去权衡一个人数之做事见。时时采取行动确保员工的靶子及企业的靶子保持以同方向的机要则益的崛起。越来越多的优秀企业放弃了绩效评估而转用绩效反馈,实施这同政策的要会于中层管理,团队leader身上。
  • 构建学习型组织
    太理想之员工的好首要的一个特点是这些员工渴望且会不断地上学成长。因此,要抓住保留这些人口,企业须不断不断地提供就学及升华之火候跟挑战。

还有复多之趋势在被众多精彩的庄探索在,本文就对有些势拓展简述,因为其实各个一个大方向都值得再另于一首文章讲述,后续的章会针对少数方向又展开深入探讨。

职能请圈:manage-demo:http://jeffzhong.space/sites/manage-demo/

这就是说,如何增强职工的敬业度呢?

属下去好爱就提出此题材,那么答案是勿是为死直接?

查岗

于工业时代,判断一个职工工作是否投入大简单,看他于无在岗位,看他的作业数量。然而此逻辑在现就远行不通了。员工就是为于那边,但若未曾big
brother的thought police帮你监督员工脑袋里的动。

文件目录

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

  而我辈今天只要举行的便是太外层的框架页,也就是母板页,为了要其进一步方便,同时服更多种类的色,只使了无限基础之jquery来落实力量。

那,我们是勿是可以提出如下问题

  • 安为员工再接再厉为商家宣传?
  • 哪些给员工愿意以铺子办事?
  • 怎样被职工愿意付出额外的极力?

类型架构

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

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

  同时以webpack为vue.js配置好开发环境,在src文件夹里面可以一直支出vue项目,里面有简短的vue样例。当然想就此react的呢得以变动为react库。

员工投入度不高,那以何以?

每当工业时代,我们尽关怀的凡安让生装置发挥极其可怜的产能,在此知识经济时代,我们的关注点是勿是移到了人数的产能上?员工的敬业度不愈是不是吧就算影响了店家之面世?是,而且导致的产物比工业时代可能而严重得多。

员工敬业度低→问题迟迟无法缓解→项目拖延→企业竞争力降低→?

  原文地址:简洁后台管理模版
  之前被客户开发一个粗略的后台管理网,本来准备套用AdminLTE的,但客户嫌弃太臃肿,而且还要要出多tab页面切换,于是起本人代码库中找到好久前就是描写过的军事管制后台,根据需求重写。这是基于jQuery,加上自己编辑基础样式,从零搭建起来的框架,在这个轻量级模版的功底及进展开vue项目。现在顺便用之模版搭建成我的前端demo的军事管制网,而立即首文章就是讲述生怎么实现简单的后台管理体系。

通往监理方向去追究的言辞,很可能是一律长条未归路。我们不妨回过头看看员工敬业度是啊

怡安翰威特看员工敬业度反映职工对商店投入的小聪明、感情与许的水平,最终呈现呢以下三种植表现方式:
1.乐于宣传:员工仍地朝同事/客户盛赞自己所于的组织;
2.乐意留下:员工强烈希望留于集体里逻辑推理,对团队发出显归属感;
3.大力付出:员工付出额外的鼎力并致力为那些会造成经营成功的工作。

总结

  这个模版还有为数不少地方要健全,可以当此基础及改补充加相应功能,也可以是基础及使用vue,react实现内容页的力量。
具体细节要查看代码:https://github.com/edwardzhong/manage-demo

基本功样式库

  每个前端开发者开过大量种类后,基本都见面发生和好之体制库吧。我的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

发生矣根基样式之后,我们搭建系统就便于广大了。

逻辑推理 1

导航栏

  导航栏就是用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代码。

发表评论

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

网站地图xml地图