EmWebAdmin 导航栏分析
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 导航栏分析的更多相关文章
- android 自己定义状态栏和导航栏分析与实现
效果 android 4.4之后,系统是支持自己定义状态栏和导航栏的.举个最典型的样例就是bilibiliclient了(iOS版本号和android版本号能用两套全然不一样符合各自系统的设计ui,良 ...
- Bootstrap导航栏navbar源码分析
1.本文目地:分析bootstrap导航栏及其响应式的实现方式,提升自身css水平 先贴一个bootstrap的导航栏模板 http://v3.bootcss.com/examples/navbar- ...
- 原生JS实现全屏切换以及导航栏滑动隐藏及显示——重构前
思路分析: 向后滚动鼠标滚轮,页面向下全屏切换:向前滚动滚轮,页面向上全屏切换.切换过程为动画效果. 第一屏时,导航栏固定在页面顶部,切换到第二屏时,导航条向左滑动隐藏.切换回第一屏时,导航栏向右滑动 ...
- 使用vue给导航栏添加链接
如下面的导航栏,使用vue技术给该导航栏增加链接: js代码为: navigation:function(){ new Vue({ el: '#navUl', data: { menuData:{ ' ...
- 解析导航栏的url--selnium，beautifulsoup实战
前段时间做ui自动化测试的时候,导航栏菜单始终有点问题,最后只好直接获取到url,然后直接使用driver.get(url)进入页面: 包括做压测的时候,比如我要找出所有报表菜单的url,这样不可能手 ...
- ViewPager+GridView实现首页导航栏布局分页效果
如图是效果图用ViewPager+GridView实现首页导航栏布局分页效果来实现的效果 Demo下载地址:http://download.csdn.net/detail/qq_29774291/96 ...
- iOS解决隐藏导航栏后，打开照片选择器后导航栏不显示的问题以及更换导航栏背景色
问题描述: 遇到一种情况,在一个控制器上(隐藏了导航栏),打开照片选择器 UIImagePickerController后,照片选择器头部一片空白,且上滑相册时,信息会有错乱效果. 原因分析: 通过查 ...
- android布局学习-使用FrameLayout和LinearLayout制作QQ空间底部导航栏
[声明:本博客通过学习“J灬叶小超 ”博客而写,链接:http://www.cnblogs.com/yc-755909659/p/4288260.html] --------------------- ...
- 在mui中遇到的内容覆盖导航栏的问题
一.问题描述: 公司项目中为了让内容以页面的形式显示,并要格式化页面内容,采用了百度的UEditor编辑器来显示内容,但是遇到了一个问题就是当下拉页面到一定距离之后,页面上方的导航栏会被内容遮盖. 二 ...
随机推荐
- 【ichartjs】用ichartjs替代Excel做直方图
在 http://www.cnblogs.com/xiandedanteng/p/8717506.html 一文中,最后是用Excel作图,现在用ichartjs替代之. 效果如下: 文件下载: ht ...
- SCP远程拷贝命令
利用scp指令可以在linux机器间传递文件,个人使用几次感觉效率还是较高的,比SFTP+本地做媒介要高得多. 1.本地拷贝到远程. 这种方式的命令模式是scp local_file remote_u ...
- Python 3 解析 html
资料:https://docs.python.org/3/library/html.parser.html python 自带了一个类,叫 HTMLParser. 我们用的时候需要自己定义一个类,继承 ...
- 使用Jmeter对应用程序进行测试
JMeter是Apache组织的开放源代码项目,它是功能和性能测试的工具,100%的用java实现,最新的版本是1.9.1,大家可以到 http://jakarta.apache.org/jmeter ...
- 【转】非教育网中IPv4网络访问IPv6资源
1. 背景知识 随着个人电脑.移动终端.乃至物联网的不断发展,有很大的IP地址需求.由于IPv4协议设计时没有料到日后网络会如此发达,IPv4网络中的IP数量相对今天的需求来说,显得捉襟见肘.加上IP ...
- Java版 数字金额大写转换
需求:读入一个浮点数值,将其转化为中文金额的大写形式.如123.45,转化为:壹佰贰拾叁元肆角伍分. 以下是各种情况要完善: 1. 当金额为整数,只表示整数部分,省略小数部分,并添加“整”字.如123 ...
- ant design pro （十三）advanced 错误处理
一.概述 原文地址:https://pro.ant.design/docs/error-cn 二.详细 2.1.页面级报错 2.1.1.应用场景 路由直接引导到报错页面,比如你输入的网址没有匹配到任何 ...
- TypeScript 面向对象基础知识
孙广东 2016.4.5 JavaScript如今到处都是.web.server(通过NodeJS).移动应用(通过各种框架).全部这些,TypeScript都能够使用,而且能够为JavaScrip ...
- 【Oracle】新建用户，删除用户，授权
一.创建用户 oracle内部有两个建好的用户:system和sys.用户可直接登录到system用户以创建其他用户,因为system具有创建别 的用户的 权限. 在安装oracle时,用户或系统管理 ...
- 31、Arrays数组排序（续）——自定义排序
自定义的类要按照一定的方式进行排序,比如一个Person类要按照年龄进行从小到大排序,比如一个Student类要按照成绩进行由高到低排序. 这里我们采用两种方式,一种是使用Comparable接口:让 ...