• templates/gentelella/base.tpl

       <!DOCTYPE html>

       <html lang="en">

         <!-- Smarty lib -->

           <!-- 这里就调用了 templates/smarty/config/tplconf.json   -->

         <?php require('tpl/SmartySetup.php'); ?>

         <!-- /Smarty lib -->

         <!-- head -->

         <head>

           <!-- 这里就只有一句     <title>{$tplconf["appName"]}</title>  -->

         <?php $smarty->display('tpl/head.tpl'); ?>

         </head>

         <!-- /head -->

         <body class="nav-md">

           <div class="container body">

             <div class="main_container">

               <!-- left content -->

                <!-- 调用导航栏模板 -->

               <?php $smarty->display('tpl/nav.tpl'); ?>

               <!-- /left content -->

               <!-- right content -->

                // 这是是中间的功能显示，index, network, about, 等等。

               <?php $smarty->display('tpl/********'); ?>

               <!-- /right content -->

               <!-- footer content -->

               <?php $smarty->display('tpl/foot.tpl'); ?>

               <!-- /footer content -->

             </div>

           </div>

         <!-- JavaScript -->

         <?php $smarty->display('tpl/tail.tpl'); ?>

         <!-- /JavaScript -->

         </body>

       </html>

  • EmWebAdmin 的导航栏的配置文件是 templates/smarty/config/tplconf.json 文件

    // 这个文件的解析是在 templates/smarty/preprocess/SmartySetup.php 里面被调用然后解析

          // NOTE: Smarty has a capital 'S'

          require_once('smarty/Smarty.class.php');

          $smarty = new Smarty();

          // $smarty->debugging = true;

          // template configures

          $tplconf = json_decode(file_get_contents("config/tplconf.json"), true);

          $smarty->assign('tplconf', $tplconf);

          // system configures

          $sysconf = json_decode(file_get_contents("config/sysconf.json"), true);

          $smarty->assign('sysconf', $sysconf);

          // custom configures

          $cusconf = json_decode(file_get_contents("config/cusconf.json"), true);

          $smarty->assign('cusconf', $cusconf);

          include "tpl/tplFuncs.php";

  • 真正解析 的地方在 templates/smarty/preprocess/tplFuncs.php 里面

      $level = 1;

      $active = "Home";

      $currentPage = end(explode('/', $_SERVER['PHP_SELF']));

             // end 返回的值里面数组的最后一个值

             // explode 是以前面一个字符串作为分隔符将后面的字符串进行分割

             //  PHP_SELF 是当前页面的链接

             // 所以这个是返回当前页面的 php 文件

      /**

       * @jsonData: nav data as JSON data format

       * @level: indent level

       * @active: Classify for php file

       * @currentPage: current php file

       */

      Function recursiveNav($jsonData, $level, $active, $currentPage)

      {  // ret 变量存储了所有的 导航栏的文字的显示以及链接

          $ret = "";    // 循环 nav 索引内的所有对应的子索引

          foreach( $jsonData as $key => $value ) {

              if( isset( $value['subitem'] ) ) {

                  // 判断 子索引对应的内容中有没有 subitem

                  // with the drop-down options

                  // 缩进的控制

                  $ret .= fillBlank($level);

                  $ret .=  '<li';

                  if ($key == $active) $ret .= ' class="active"';

                  $ret .= '><a><i class="fa fa-'.$value["icon"].'"></i> '.$key.' <span class="fa fa-chevron-down"></span></a    >'."\n";

                  // code indent  增加缩进

                  $ret .= fillBlank($level+1);

                  $ret .= '<ul class="nav child_menu">'."\n";                         

                  // recursive callback  子目录

                  $ret .= recursiveNav($value['subitem'], $level+2, $active, $currentPage);

                             // 缩进

                  $ret .= fillBlank($level+1);

                  $ret .= '</ul>'."\n";

                              // 缩进

                  $ret .= fillBlank($level);

                  $ret .= '</li>'."\n";                                               

              } else {

                  // 如果不存在，调用 fillBlank 函数，其实这个函数就是根据你的 level 决定ret的缩进

                  $ret .= fillBlank($level);

                  $ret .= '<li';

                    // 如果对应有 link 索引， 并且 link 索引对应的值存在 那么添加链接

                  if ($currentPage == $value['link'])

                        $ret .= ' class="current-page"';

                  $ret .= '><a href="'.$value['link'].'"><i class="fa fa-'.$value['icon'].'"></i>'.$key.'</a></li>'."\n";

              }

          }                                                                           

          return $ret;

      }

      // 他把对应的 nav 索引下的数据作为第一个参数，级别为1， active 为home,  当前的页面的php文件

      $smarty->assign("recursiveNav", recursiveNav($tplconf['nav'], $level, $active, $currentPage));

  • 最终这个模板的实现是在 templates/gentelella/nav.tpl 内。

     <div class="col-md-3 left_col">

       <div class="left_col scroll-view">

         <div class="navbar nav_title" style="border: 0;" align="center">

           <a href="index.php"><img src="images/webadmin.png" class="img-rounded"></a>

         </div>                                                                      

         <div class="clearfix"></div>

         <br />                                                                      

         <!-- sidebar menu -->

         <div id="sidebar-menu" class="main_menu_side hidden-print main_menu">

           <div class="menu_section">

             <ul class="nav side-menu">

               {$recursiveNav}  <!-- 模板变量  -->

             </ul>

           </div>

         </div>

         <!-- /sidebar menu -->

       </div>

     </div>

EmWebAdmin 导航栏分析的更多相关文章

  1. android 自己定义状态栏和导航栏分析与实现

    效果 android 4.4之后,系统是支持自己定义状态栏和导航栏的.举个最典型的样例就是bilibiliclient了(iOS版本号和android版本号能用两套全然不一样符合各自系统的设计ui,良 ...

  2. Bootstrap导航栏navbar源码分析

    1.本文目地:分析bootstrap导航栏及其响应式的实现方式,提升自身css水平 先贴一个bootstrap的导航栏模板 http://v3.bootcss.com/examples/navbar- ...

  3. 原生JS实现全屏切换以及导航栏滑动隐藏及显示——重构前

    思路分析: 向后滚动鼠标滚轮,页面向下全屏切换:向前滚动滚轮,页面向上全屏切换.切换过程为动画效果. 第一屏时,导航栏固定在页面顶部,切换到第二屏时,导航条向左滑动隐藏.切换回第一屏时,导航栏向右滑动 ...

  4. 使用vue给导航栏添加链接

    如下面的导航栏,使用vue技术给该导航栏增加链接: js代码为: navigation:function(){ new Vue({ el: '#navUl', data: { menuData:{ ' ...

  5. 解析导航栏的url--selnium，beautifulsoup实战

    前段时间做ui自动化测试的时候,导航栏菜单始终有点问题,最后只好直接获取到url,然后直接使用driver.get(url)进入页面: 包括做压测的时候,比如我要找出所有报表菜单的url,这样不可能手 ...

  6. ViewPager+GridView实现首页导航栏布局分页效果

    如图是效果图用ViewPager+GridView实现首页导航栏布局分页效果来实现的效果 Demo下载地址:http://download.csdn.net/detail/qq_29774291/96 ...

  7. iOS解决隐藏导航栏后，打开照片选择器后导航栏不显示的问题以及更换导航栏背景色

    问题描述: 遇到一种情况,在一个控制器上(隐藏了导航栏),打开照片选择器 UIImagePickerController后,照片选择器头部一片空白,且上滑相册时,信息会有错乱效果. 原因分析: 通过查 ...

  8. android布局学习-使用FrameLayout和LinearLayout制作QQ空间底部导航栏

    [声明:本博客通过学习“J灬叶小超 ”博客而写,链接:http://www.cnblogs.com/yc-755909659/p/4288260.html] --------------------- ...

  9. 在mui中遇到的内容覆盖导航栏的问题

    一.问题描述: 公司项目中为了让内容以页面的形式显示,并要格式化页面内容,采用了百度的UEditor编辑器来显示内容,但是遇到了一个问题就是当下拉页面到一定距离之后,页面上方的导航栏会被内容遮盖. 二 ...

随机推荐

  1. mongodb pymongo.errors.CursorNotFound: Cursor not found, cursor id: 82792803897

    默认 mongo server维护连接的时间窗口是十分钟 默认 单次从 server获取数据是101条或者 大于1M小于16M的数据 所以默认情况下,如果10分钟内未能处理完数据,则抛出该异常. 解决 ...

  2. 小课堂week16 编程范式巡礼第一季 三大基石

    编程范式巡礼第一季 三大基石 最近迷上了一些哲史类书籍,回望过去.放眼未来,往往沉浸在其思维之美中无法自拔.计算机编程是一门非常年轻的学科,沉淀不足也是年轻的一个侧面,在编程领域,有足够思想深度的作品 ...

  3. php 上传视频的代码，

    <html> <head> <meta http-equiv="Content-Type" content="text/html; char ...

  4. SSIS实践入门2：批量包的调度和SQLServer代理作业配置

    趁着上一篇文章的余温,我们继续研究一下SSIS中多个包如何调度,难道需要一个包一个包的配置调度程序吗?显然不是的,接下来我们就说一说在SSIS应用中如何批量的调度所有的作业,本文只讲述一个基本的逻辑过 ...

  5. 北京SAP-AGS CoE support consultant intern 面试总结

    7月4号去大连SAP面试.通过的话直接去北京SAP參加实习(有幸已通过). SAP一直是我理想的公司,大二的时候曾试图參加SAP大连vt项目,当时下了非常大决心,假设通过了就先留在大连,可惜英语群面就 ...

  6. 对hadoop 执行mapreduce时发生异常Illegal partition for的解决过程

    来自:http://blog.csdn.net/hezuoxiang/article/details/6878026 写了个mapreduce的JAVA程序,自定义了个partition class ...

  7. 手动脱UPX 壳实战

    作者:Fly2015 Windows平台的加壳软件还是比較多的,因此有非常多人对于PC软件的脱壳乐此不彼,本人菜鸟一枚,也学习一下PC的脱壳.要对软件进行脱壳.首先第一步就是 查壳.然后才是 脱壳. ...

  8. Python list删除元素

    pop()方法 pop(n) 从list删除元素Paul同学刚来几天又要转走了,那么我们怎么把Paul 从现有的list中删除呢?如果Paul同学排在最后一个,我们可以用list的pop()方法删除: ...

  9. ant design pro （八）构建和发布

    一.概述 原文地址:https://pro.ant.design/docs/deploy-cn 二.详细 2.1.构建 当项目开发完毕,只需要运行一行命令就可以打包你的应用: npm run buil ...

  10. javascript 作用域 通俗解释

    首先将作用域比喻为一座大楼: 第一层表示当前执行作用域.大楼顶层表示全局作用域. (1)js首先会在当前楼层进行查找变量,如果没有找到,就做电梯往上一层(二层)楼查找. (2)若还是没有找到继续往上查 ...