模板简介
模板使用简要说明
主题配色及保存
顶部导航对应侧边栏菜单切换
侧边栏菜单的JS初始化
点击侧边栏刷新
iframe版本右侧内容区域404问题
关于非iframe版本菜单高亮
iframe版本子页面内新建TAB
iframe中操作当前Tabs
iframe页面内的loading
多标签页(Multitabs)插件说明
关于multitabs的一些调整
调整左侧的宽度
webuploader使用时候的问题
关于模板的默认主题或者配色
关于模板的字体图标问题
关于版权和商业用途
模板中固有的插件
1
光年模板的loading和消息(v3)
2
rangeSlider滑块(v3)
3
bootstrap-datepicker日期(v3)
4
bootstrap-datepicker日期(v4)
5
bootstrap-datetimepicker日期时间(v3)
6
bootstrap-datetimepicker日期时间(v4)
7
perfect-scrollbar滚动条
8
Chart.js图表
9
bootstrap-colorpicker颜色选择
10
jquery-confirm对话框
11
jquery.tagsinput标签
12
bootstrap-notify消息(v4)
13
chosen.jquery关联选择
14
jquery.bootstrap.wizard向导
15
clockpicker时间选择(v4)
16
bootstrap-maxlength长度验证(v4)
17
bootstrap-select下拉选择(v4)
18
fullcalendar日程(v4)
19
bootstrap-table表格插件
插件项目包含插件
1
Date Range Picker时间段选择
2
material风格时间选择器
3
dropzone上传
4
uploadify上传
5
webuploader上传
6
H5图片上传
7
cropper图片裁剪
8
ckeditor富文本编辑器
9
editor.md编辑器
10
summernote富文本编辑器
11
tinymce富文本编辑器
12
ueditor富文本编辑器
13
wangeditor富文本编辑器
14
bootstrap-validate表单验证
15
jquery-validate表单验证
16
bootstrap-select下拉选择
17
bootstrap-selectN联动
18
bootstrap-lyear-select下拉
19
select2下拉
20
bootstrap-multiselect下拉多选
21
lyear-dropdowntree下拉树状
22
ZTree树形菜单
23
treeview树状插件
24
jstree树状结构
25
imgVer拼图滑块
26
sliderVerification滑块验证
27
bootstrap3-dialog模态框
28
layer弹窗
29
jquery.auto.complete自动填充
30
fixedheadertable固定表头
31
fontIconPicker图标选择
32
fullcalendar日程
33
jQuery Raty评分
34
lyear.loading加载
35
Bootstrap MaxLength长度验证
36
jquery.toolbar弹出式工具栏
37
jquery.bootstrap-touchspin输入框微调
插件项目包含示例
1
表单布局示例
2
聊天页面示例
3
logo处使用文字
4
模态框中使用Tab选项卡
5
模态框最大化
6
顶部消息示例
7
搜索布局
8
搜索布局2
9
搜索布局3
10
侧滑边栏区域
11
选择示例
12
选择示例2
13
选择示例3
14
代码演示切换
15
留言列表布局
16
数据统计布局
17
产品价格布局
18
搜索框
19
用户头像篇
20
动画篇
21
其他篇
22
另一种侧边栏菜单
关于非iframe版本菜单高亮 - 光年模板说明文档 - 笔下光年
网站首页
关于非iframe版本菜单高亮
一般后台的左侧菜单,都是通用的,在这种情况下,切换到新的页面,菜单的高亮,1、可以采用后端程序处理。2、采用js处理。js匹配url地址的解决方式相对而言还有一些延迟。 这里给出的是原生php的输出菜单的方案,其他采用php框架或者一些模板引擎可采用类似的处理方式。 当然如果你是php开发,你也可以参考我的thinkphp的项目来操作。 ```php // 菜单的树状结构数组 $sidebar = [ "1" => [ "id" => 1, "pid" => 0, "name" => "mdi mdi-home", "title" => "后台首页", "url" => "/admin/config/home.html" ], "2" => [ "id" => 2, #主键值 "pid" => 0, #父ID "name" => "mdi mdi-menu", #icon图标名称 "title" => "系统管理", #菜单名称 "url" => '', "children" => [ "5" => [ "id" => 5, "pid" => 2, "name" => "", "title" => "网站设置", "url" => "/admin/config/one.html" ], "6" => [ "id" => 6, "pid" => 2, "name" => "", "title" => "二级菜单", "url" => '', "children" => [ "20" => [ "id" => 20, "pid" => 6, "name" => "", "title" => "三级菜单", "url" => "/admin/config/two.html" ], "21" => [ "id" => 21, "pid" => 6, "name" => "", "title" => "三级菜单", "url" => "/admin/config/three.html" ] ] ] ] ], "10" => [ "id" => 10, "pid" => 0, "name" => "mdi mdi-account", "title" => "用户管理", "url" => "/admin/config/four.html" ] ]; // 当前位置的树状结构数组(相当于前台网站的面包屑) $location = [ [ "id" => 2, "pid" => 0, "name" => "mdi mdi-home", "title" => "系统管理", "url" => "", 'children' => [ [ "id" => 6, "pid" => 2, "name" => "", "title" => "二级菜单", "url" => '', "children" => [ [ "id" => 20, "pid" => 6, "name" => "", "title" => "三级菜单", "url" => "/admin/config/two.html" ] ] ] ] ] ]; echo createMenu($sidebar, 1, $location); /** * 这里单文件演示,只做一次性输出左侧菜单,如果实在view层页面中做菜单循环的操作类似 * @param array $data 菜单数组 * @param integer $isFrist 是否首次(主要是用于最外层的ul) * @param array $location 当前位置数组 * @param string $blockStyle 是否展开的样式 * @return string 菜单html字符串 */ function createMenu($data, $isFrist = 0, $location = [], $blockStyle = '') { $menuBody = $isFrist == 1 ? '<ul class="nav nav-drawer">' : '<ul class="nav nav-subnav" '.$blockStyle.'>'; foreach($data as $k => $v) { $iconDiv = empty($v['name']) ? '' : '<i class="'. $v['name'] .'"></i>'; $isOpen = $location && $location[0]['id'] == $v['id'] ? ($v['pid'] == 0 ? ' active open' : ' open') : ''; $selected = $location && $location[0]['id'] == $v['id'] ? ' active' : ''; $sdata = $location && isset($location[0]['children']) ? $location[0]['children'] : ''; $isBlock = $location && $location[0]['id'] == $v['id'] && $v['pid'] != 0 ? ' style="display:block"' : ''; $menuName = $v['pid'] == 0 ? '<span>'. $v['title'] .'</span>' : $v['title']; if (isset($v['children']) && count($v['children']) > 0) { $menuBody .= '<li class="nav-item nav-item-has-subnav '. $isOpen .'"><a href="#!">'. $iconDiv . $menuName .'</a>'; $menuBody .= createMenu($v['children'], 0, $sdata, $isBlock); } else { $menuBody .= '<li class="nav-item '.$selected.'"><a href="'. $v['url'] .'" class="multitabs">'. $iconDiv . $menuName; } $menuBody .= '</li>'; } return $menuBody .'</ul>'; } ```
上一篇:
iframe版本右侧内容区域404问题
下一篇:
iframe版本子页面内新建TAB
阅读设置
字体大小
小号 (14px)
标准 (16px)
大号 (18px)
超大 (20px)
特大 (24px)
阅读主题
默认
护眼模式
夜间模式
古卷模式
恢复默认
确定