模板简介
模板使用简要说明
主题配色及保存
顶部导航对应侧边栏菜单切换
侧边栏菜单的JS初始化
点击侧边栏刷新
iframe版本右侧内容区域404问题
关于非iframe版本菜单高亮
iframe版本子页面内新建TAB
iframe中操作当前Tabs
iframe页面内的loading
多标签页(Multitabs)插件说明
关于multitabs的一些调整
调整左侧的宽度
webuploader使用时候的问题
关于模板的默认主题或者配色
关于模板的字体图标问题
关于版权和商业用途
模板中固有的插件
光年模板的loading和消息(v3)
rangeSlider滑块(v3)
bootstrap-datepicker日期(v3)
bootstrap-datepicker日期(v4)
bootstrap-datetimepicker日期时间(v3)
bootstrap-datetimepicker日期时间(v4)
perfect-scrollbar滚动条
Chart.js图表
bootstrap-colorpicker颜色选择
jquery-confirm对话框
jquery.tagsinput标签
bootstrap-notify消息(v4)
chosen.jquery关联选择
jquery.bootstrap.wizard向导
clockpicker时间选择(v4)
bootstrap-maxlength长度验证(v4)
bootstrap-select下拉选择(v4)
fullcalendar日程(v4)
bootstrap-table表格插件
插件项目包含插件
Date Range Picker时间段选择
material风格时间选择器
dropzone上传
uploadify上传
webuploader上传
H5图片上传
cropper图片裁剪
ckeditor富文本编辑器
editor.md编辑器
summernote富文本编辑器
tinymce富文本编辑器
ueditor富文本编辑器
wangeditor富文本编辑器
bootstrap-validate表单验证
jquery-validate表单验证
bootstrap-select下拉选择
bootstrap-selectN联动
bootstrap-lyear-select下拉
select2下拉
bootstrap-multiselect下拉多选
lyear-dropdowntree下拉树状
ZTree树形菜单
treeview树状插件
jstree树状结构
imgVer拼图滑块
sliderVerification滑块验证
bootstrap3-dialog模态框
layer弹窗
jquery.auto.complete自动填充
fixedheadertable固定表头
fontIconPicker图标选择
fullcalendar日程
jQuery Raty评分
lyear.loading加载
Bootstrap MaxLength长度验证
jquery.toolbar弹出式工具栏
jquery.bootstrap-touchspin输入框微调
插件项目包含示例
表单布局示例
聊天页面示例
logo处使用文字
模态框中使用Tab选项卡
模态框最大化
顶部消息示例
搜索布局
搜索布局2
搜索布局3
侧滑边栏区域
选择示例
选择示例2
选择示例3
代码演示切换
留言列表布局
数据统计布局
产品价格布局
搜索框
用户头像篇
动画篇
其他篇
另一种侧边栏菜单
关于非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