荆轲刺秦王
对于很多项目,尤其是小程序的后台,我们都可以使用 layui 作为整个框架的后台模版
当然了,本文主要介绍的还是 layui 的免费版的小功能。
先大概说一下需求,就是在使用 layui 作为后台的时候,左侧的菜单栏结构类似于这样:
在选中了某个模块的时候,当前选中的模块名要加上选中的样式,其实这个样式也是 layui 提供好的,就是 layui-this
本文主要解决的问题是,利用 js 添加样式:
先看一下模版文件的 html 部分:
<ul class="layui-nav layui-nav-tree" lay-filter="test">
<li class="layui-nav-item layui-nav-itemed">
<a class="" href="javascript:;">课程管理</a>
<dl class="layui-nav-child">
<dd><a href="{:url('course/index')}">课程列表</a></dd>
<dd><a href="{:url('course_room/index')}">微课堂列表</a></dd>
<dd><a href="{:url('course_case/index')}">课堂案例列表</a></dd>
<dd><a href="{:url('course_member/index')}">报名记录</a></dd>
<dd><a href="{:url('course_order/index')}">课堂订单列表</a></dd>
</dl>
</li>
</ul>
很正常,很普通的 html 这个只需要将自己项目的改一下就可以了
<a href="/{:request()->module()}/{:request()->controller()}/{:request()->action()}.html" style="display: none" id="local"></a>
然后重点来看一下 js :
<script type="text/javascript" src="__STATIC__/admin/layui/layui.js"></script>
{block name="script"}{/block}
<script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
<script>
//JavaScript代码区域
layui.use('element', function(){
var element = layui.element;
});
jQuery(document).ready(function($){
var local = $('#local').attr('href').toLowerCase();
console.log(local);
$('.layui-nav-child a').each(function(){
var href = $(this).attr('href');
var hrefs = href.replace('_','');
//console.log(hrefs);
if(local == hrefs){
$(this).parent().addClass('layui-this');
}
});
});
</script>
简单说一下这个思路,首先在 html 中写一个隐藏的 a 标签,这个标签的地址为 当前模块/当前控制器/当前方法名
然后再利用 js 进行比较,如果相同 就加上 layui-this 的样式,当然了,这其中需要注意的是:地址栏里的地址,要去除一下类似于 _ (下划线)这种特殊符号,因为在 TP5 中如果控制器使用驼峰命名法的时候,会导致地址栏里的地址有下划线,然后再转一下字母大小写。最后再进行比较。