• templates/gentelella/base.tpl

  1.        <!DOCTYPE html>
  2.        <html lang="en">
  3.          <!-- Smarty lib -->
  4.            <!-- 这里就调用了 templates/smarty/config/tplconf.json   -->
  5.          <?php require('tpl/SmartySetup.php'); ?>
  6.          <!-- /Smarty lib -->
  8.          <!-- head -->
  9.          <head>
  10.            <!-- 这里就只有一句     <title>{$tplconf["appName"]}</title>  -->
  11.          <?php $smarty->display('tpl/head.tpl'); ?>
  12.          </head>
  13.          <!-- /head -->
  15.          <body class="nav-md">
  16.            <div class="container body">
  17.              <div class="main_container">
  19.                <!-- left content -->
  20.                 <!-- 调用导航栏模板 -->
  21.                <?php $smarty->display('tpl/nav.tpl'); ?>
  22.                <!-- /left content -->
  24.                <!-- right content -->
  25.                 // 这是是中间的功能显示，index, network, about, 等等。
  26.                <?php $smarty->display('tpl/********'); ?>
  27.                <!-- /right content -->
  29.                <!-- footer content -->
  30.                <?php $smarty->display('tpl/foot.tpl'); ?>
  31.                <!-- /footer content -->
  33.              </div>
  34.            </div>
  36.          <!-- JavaScript -->
  37.          <?php $smarty->display('tpl/tail.tpl'); ?>
  38.          <!-- /JavaScript -->
  40.          </body>
  41.        </html>

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

  1.     // 这个文件的解析是在 templates/smarty/preprocess/SmartySetup.php 里面被调用然后解析
  2.           // NOTE: Smarty has a capital 'S'
  3.           require_once('smarty/Smarty.class.php');
  4.           $smarty = new Smarty();
  5.           // $smarty->debugging = true;
  7.           // template configures
  8.           $tplconf = json_decode(file_get_contents("config/tplconf.json"), true);
  9.           $smarty->assign('tplconf', $tplconf);
  11.           // system configures
  12.           $sysconf = json_decode(file_get_contents("config/sysconf.json"), true);
  13.           $smarty->assign('sysconf', $sysconf);
  15.           // custom configures
  16.           $cusconf = json_decode(file_get_contents("config/cusconf.json"), true);
  17.           $smarty->assign('cusconf', $cusconf);
  19.           include "tpl/tplFuncs.php";

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

  1.       $level = 1;
  2.       $active = "Home";
  3.       $currentPage = end(explode('/', $_SERVER['PHP_SELF']));
  4.              // end 返回的值里面数组的最后一个值
  5.              // explode 是以前面一个字符串作为分隔符将后面的字符串进行分割
  6.              //  PHP_SELF 是当前页面的链接
  7.              // 所以这个是返回当前页面的 php 文件
  8.       /**
  9.        * @jsonData: nav data as JSON data format
  10.        * @level: indent level
  11.        * @active: Classify for php file
  12.        * @currentPage: current php file
  13.        */
  14.       Function recursiveNav($jsonData, $level, $active, $currentPage)
  15.       {  // ret 变量存储了所有的 导航栏的文字的显示以及链接
  16.           $ret = "";    // 循环 nav 索引内的所有对应的子索引
  17.           foreach( $jsonData as $key => $value ) {
  18.               if( isset( $value['subitem'] ) ) {
  19.                   // 判断 子索引对应的内容中有没有 subitem
  20.                   // with the drop-down options
  21.                   // 缩进的控制
  22.                   $ret .= fillBlank($level);
  23.                   $ret .=  '<li';
  24.                   if ($key == $active) $ret .= ' class="active"';
  25.                   $ret .= '><a><i class="fa fa-'.$value["icon"].'"></i> '.$key.' <span class="fa fa-chevron-down"></span></a    >'."\n";
  27.                   // code indent  增加缩进
  28.                   $ret .= fillBlank($level+1);
  29.                   $ret .= '<ul class="nav child_menu">'."\n";                         
  31.                   // recursive callback  子目录
  32.                   $ret .= recursiveNav($value['subitem'], $level+2, $active, $currentPage);
  33.                              // 缩进
  34.                   $ret .= fillBlank($level+1);
  35.                   $ret .= '</ul>'."\n";
  36.                               // 缩进
  37.                   $ret .= fillBlank($level);
  38.                   $ret .= '</li>'."\n";                                               
  40.               } else {
  41.                   // 如果不存在，调用 fillBlank 函数，其实这个函数就是根据你的 level 决定ret的缩进
  42.                   $ret .= fillBlank($level);
  43.                   $ret .= '<li';
  44.                     // 如果对应有 link 索引， 并且 link 索引对应的值存在 那么添加链接
  45.                   if ($currentPage == $value['link'])
  46.                         $ret .= ' class="current-page"';
  47.                   $ret .= '><a href="'.$value['link'].'"><i class="fa fa-'.$value['icon'].'"></i>'.$key.'</a></li>'."\n";
  49.               }
  50.           }                                                                           
  52.           return $ret;
  53.       }
  54.       // 他把对应的 nav 索引下的数据作为第一个参数，级别为1， active 为home,  当前的页面的php文件
  55.       $smarty->assign("recursiveNav", recursiveNav($tplconf['nav'], $level, $active, $currentPage));

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

  1.      <div class="col-md-3 left_col">
  2.        <div class="left_col scroll-view">
  3.          <div class="navbar nav_title" style="border: 0;" align="center">
  4.            <a href="index.php"><img src="images/webadmin.png" class="img-rounded"></a>
  5.          </div>                                                                      
  7.          <div class="clearfix"></div>
  8.          <br />                                                                      
  10.          <!-- sidebar menu -->
  11.          <div id="sidebar-menu" class="main_menu_side hidden-print main_menu">
  12.            <div class="menu_section">
  13.              <ul class="nav side-menu">
  14.                {$recursiveNav}  <!-- 模板变量  -->
  15.              </ul>
  16.            </div>
  17.          </div>
  18.          <!-- /sidebar menu -->
  19.        </div>
  20.      </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. mysql 下 计算 两点 经纬度 之间的距离

    公式如下,单位米: 第一点经纬度:lng1 lat1 第二点经纬度:lng2 lat2 round(6378.138*2*asin(sqrt(pow(sin( (lat1*pi()/180-lat2* ...

  2. 【云计算】Docker 镜像如何设置语言环境？bash: warning: setlocale: LC_ALL: cannot change locale (en_US)

    解决方案: # set default language environment RUN locale-gen en_US.UTF- \ && dpkg-reconfigure loc ...

  3. C#基础视频教程3.1 常见控件类型和使用方法

    可以从左侧的工具箱中找到常见的控件(你要在Form1这种窗体上)   为了方便你也可以把工具箱整个拖过去,这样从上到下控件都给你排好了   对于按钮来说,最常见的就是他的背景颜色,文字,字体,还有是否 ...

  4. cocos2d-x 音乐与音效

    1.背景音乐 要使用一个音乐,首先要预加载这个音乐,预加载的方法如下 SimpleAudioEngine::sharedEngine()->preloadBackgroundMusic( CCF ...

  5. flowplayer视频播放插件[转]

    最近项目中需要添加播放视频的功能,视频文件是flv格式的.在网上找了一些jQuery视频播放插件,还是觉得“flowplayer”要好一些.特将使用方法记录一下. flowplayer也有html5版 ...

  6. ThreadPoolExecutor中策略的选择与工作队列的选择（java线程池）

    工作原理 1.线程池刚创建时,里面没有一个线程.任务队列是作为参数传进来的.不过,就算队列里面有任务,线程池也不会马上执行它们. 2.当调用 execute() 方法添加一个任务时,线程池会做如下判断 ...

  7. Oracle url编码与解码

      Oracle url编码与解码 CreateTime--2018年3月30日17:26:36 Author:Marydon 一.url编码 实现方式:utl_url.escape() 说明:utl ...

  8. POJ 2112 Optimal Milking（最大流）

    题目链接:http://poj.org/problem?id=2112 Description FJ has moved his K (1 <= K <= 30) milking mach ...

  9. 关于为什么要在项目中使用FTP文件服务器

    传统的上传一般做法是http上传,后台接收文件流,然后写入到服务器本地硬盘的某个位置. 如果我们想把文件单独存放在别的服务器上,那就可以借助ftp服务器了. 上传的流程则变为,http上传,后台接收文 ...

  10. 转:sock_ev——linux平台socket事件框架(socket API的封装) .

    把linux平台提供的有关socket操作的API进行封装是有必要的:基于stream操作的流程与基于dgram操作的流程略有不同,分别放在两个类中,但两者又有很多相似的操作,因此写一个基类,让其继承 ...