基于thinkphp的后台管理系统模板快速搭建
当我们在搭建网站的时候,后端开发人员在编写后台的管理系统的时候,往往会因为缺少一个合适的后台管理系统的模板,而必须去重新编写一个,这几天由于工作上的安排,需要去研究一下thinkcmf的后台管理系统,于是发现那个模式是相当不错,感觉基本每个后台管理系统都可以套用,我把它的主题框架划分了4个大块,三级菜单栏、内容iframe、标签栏、顶栏,如下图:

是不是觉得挺可以的?是不是有种所有后台管理系统都可以套用的赶脚勒?由于整个后台过于庞大,但我们又只是要其这样的主体UI框架,其他的都不要,于是我把它重新复制粘贴了一下,把我们需要的这个UI的实现给提取出来了,
查看效果:http://www.live086.cn/Text/(空间2015/09/23会停用,所以可以下载面的源码,直接放在本地服务器(wampserver)就可以运行)
获取源码:http://pan.baidu.com/s/1gdEqUYJ 密码:c951
这个UI比较特别的地方在,我们在选择三级菜单栏时,右侧的内容iframe会即时的更换,所选择的菜单项也会以标签的形式出现在标签栏上,可以随意切换,关闭,同时也可以点击
刷新当前的内容iframe,整个操作起来舒服简单方便,其代码主要从几个方面来实现这些功能:
openapp(url, appid, appname, selectObj)
这是一个核心的函数,就是打开与菜单栏或是标签栏相对应的iframe,url是iframe的路径,thinkphp用U方法生成,appid是iframe的唯一标识,必传,在切换标签栏的时候和iframe隐藏与否有很重要的作用,否则会出现点击菜单栏没有效果的,具体可以下载源码去看,appname则是标签显示名称,selectObj是触发对象
$current_iframe[0].contentWindow.location.reload();
而刷新功能则是使用到iframe的属性contentWindow,相当于获得iframe的window对象,于是可以达到刷新的作用,对于框架之间互相调用函数和变量,可前往看这篇博客http://www.cnblogs.com/wuxiaobin/p/4812732.html
至于三级菜单怎么实现?关闭标签的实现?其他细节功能可以查看源码去看!
基于thinkphp的后台管理系统模板快速搭建的更多相关文章
- SpringBoot + Vue + ElementUI 实现后台管理系统模板 -- 后端篇(一): 搭建基本环境、整合 Swagger、MyBatisPlus、JSR303 以及国际化操作
相关 (1) 相关博文地址: SpringBoot + Vue + ElementUI 实现后台管理系统模板 -- 前端篇(一):搭建基本环境:https://www.cnblogs.com/l-y- ...
- vue+element-ui JYAdmin后台管理系统模板-集成方案【项目搭建篇2】
项目搭建时间:2020-06-29 本章节:讲述基于vue/cli, 项目的基础搭建. 本主题讲述了: 1.跨域配置 2.axios请求封装 3.eslint配置 4.环境dev,test,pro(开 ...
- 3YAdmin-专注通用权限控制与表单的后台管理系统模板
3YAdmin基于React+Antd构建.GitHub搜索React+Antd+Admin出来的结果没有上百也有几十个,为什么还要写这个东西呢? 一个后台管理系统的核心我认为应该是权限控制,表单以及 ...
- Bootstrap 轻量级后台管理系统模板--ACE使用介绍
在上一篇基于Bootstrap介绍了一个免费的后台管理模板Charisma UI. 参见链接: 基于Jquery.Bootstrap的后台管理免费UI框架推荐--Charisma UI 今天继续分享一 ...
- SpringBoot + Vue + ElementUI 实现后台管理系统模板 -- 后端篇(五): 数据表设计、使用 jwt、redis、sms 工具类完善注册登录逻辑
(1) 相关博文地址: SpringBoot + Vue + ElementUI 实现后台管理系统模板 -- 前端篇(一):搭建基本环境:https://www.cnblogs.com/l-y-h/p ...
- vue+element-ui后台管理系统模板
vue+element-ui后台管理系统模板 前端:基于vue2.0+或3.0+加上element-ui组件框架 后端:springboot+mybatis-plus写接口 通过Axios调用接口完成 ...
- Admin Panel – 非常漂亮的后台管理系统模板
网站或者应用系统的管理后台的设计虽然不像前台界面那样要求设计精美,但是也需要有清晰的管理模块划分,下面分享的这个后台管理模板的设计非常漂亮,特别是导航部分,头部还有未读的短消息和提醒的条数显示.赶紧下 ...
- easyui+ztree 后台管理系统模板
用easyui+ztree做了个后台管理系统模板,效果图: 下载地址: csdn:http://download.csdn.net/detail/jackpay/6744505 github:http ...
- vue3项目后台管理系统模板
Vue3.0 发布第一个版本至今有一段时间了,到现在一直在更新优化,在性能方面,对比 Vue2.x ,性能的提升比较明显,打包后体积更小 来看下 Vue3.x 新增了哪些功能和特性. Performa ...
随机推荐
- centos7安装配置jdk
① java -version 可以查看系统自带的openjdk版本信息 ② rpm -qa | grep java 查看系统自带的Java文件 ③ 卸载文件(noarch文件可以不用删除) -- ...
- 移动端开发调试工具神器--Weinre使用方法
前端开发调试必备: DOM操作断点调试: debugger断点调试: native方法hook(个人暂时还没有试过,不知效果如何): 远程映射本地测试: Weinre移动调试(详细介绍): 像Dom断 ...
- springboot+thymeleaf+pageHelper带条件分页查询
html层 <div> <a class="num"><b th:text="'共 '+ ${result.resultMap['pages ...
- 2个监听器+ dialog + replysubject + extends
import 'package:flutter/material.dart'; import 'package:rxdart/rxdart.dart'; import 'package:flutter ...
- kubernets 概念
理解 Kubernetes 对象 各种资源对象的理解和定义 Kubernetes 中 Pod 的选举过程
- Parhaps you are running on a JRE rather than a JDK?
maven项目启动时报错 解决方案: 第一步:在启动项目上右击 第二步:修改JRE为JDK,双击划线部分 第三步:如果没有配置JDK,进行以下操作 第四步:从本地添加JDK 第五步:应用JDK 选择好 ...
- CenOS 6.4下安装中文输入法
1.使用root登录 输入:yum install "@Chinese Support" 2.回到桌面设置添加输入法 参考链接:http://www.linuxidc.com/Li ...
- CentOS下使用tcpdump网络抓包
tcpdump是Linux下的截获分析网络数据包的工具,对优化系统性能有很大参考价值. 安装 tcpdump不是默认安装的,在CentOS下安装: yum install tcpdump 在Ubunt ...
- 浏览器解析JavaScript的原理
JavaScript的特点一般都知道的就是解释执行,逐行执行,就是从上到下依次执行. JavaScript的执行之前,其实还是有一些操作的,只是没有表现出来 JavaScript的执行过程: 1.语法 ...
- shell编程(七)之字符串处理
字符串切片 ${var:offset:number} 取字符串的最右侧几个字符: ${var: -length} 注意: 冒号后必须有一个空白字符 #!/bin/bash var="chen ...