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

是不是觉得挺可以的?是不是有种所有后台管理系统都可以套用的赶脚勒?由于整个后台过于庞大,但我们又只是要其这样的主体UI框架,其他的都不要,于是我把它重新复制粘贴了一下,把我们需要的这个UI的实现给提取出来了,

查看效果:http://www.live086.cn/Text/(空间2015/09/23会停用,所以可以下载面的源码,直接放在本地服务器(wampserver)就可以运行)

获取源码:http://pan.baidu.com/s/1gdEqUYJ  密码:c951

这个嘛,http://t.cn/RUbL4rP

这个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的后台管理系统模板快速搭建的更多相关文章

  1. SpringBoot + Vue + ElementUI 实现后台管理系统模板 -- 后端篇(一): 搭建基本环境、整合 Swagger、MyBatisPlus、JSR303 以及国际化操作

    相关 (1) 相关博文地址: SpringBoot + Vue + ElementUI 实现后台管理系统模板 -- 前端篇(一):搭建基本环境:https://www.cnblogs.com/l-y- ...

  2. vue+element-ui JYAdmin后台管理系统模板-集成方案【项目搭建篇2】

    项目搭建时间:2020-06-29 本章节:讲述基于vue/cli, 项目的基础搭建. 本主题讲述了: 1.跨域配置 2.axios请求封装 3.eslint配置 4.环境dev,test,pro(开 ...

  3. 3YAdmin-专注通用权限控制与表单的后台管理系统模板

    3YAdmin基于React+Antd构建.GitHub搜索React+Antd+Admin出来的结果没有上百也有几十个,为什么还要写这个东西呢? 一个后台管理系统的核心我认为应该是权限控制,表单以及 ...

  4. Bootstrap 轻量级后台管理系统模板--ACE使用介绍

    在上一篇基于Bootstrap介绍了一个免费的后台管理模板Charisma UI. 参见链接: 基于Jquery.Bootstrap的后台管理免费UI框架推荐--Charisma UI 今天继续分享一 ...

  5. SpringBoot + Vue + ElementUI 实现后台管理系统模板 -- 后端篇(五): 数据表设计、使用 jwt、redis、sms 工具类完善注册登录逻辑

    (1) 相关博文地址: SpringBoot + Vue + ElementUI 实现后台管理系统模板 -- 前端篇(一):搭建基本环境:https://www.cnblogs.com/l-y-h/p ...

  6. vue+element-ui后台管理系统模板

    vue+element-ui后台管理系统模板 前端:基于vue2.0+或3.0+加上element-ui组件框架 后端:springboot+mybatis-plus写接口 通过Axios调用接口完成 ...

  7. Admin Panel – 非常漂亮的后台管理系统模板

    网站或者应用系统的管理后台的设计虽然不像前台界面那样要求设计精美,但是也需要有清晰的管理模块划分,下面分享的这个后台管理模板的设计非常漂亮,特别是导航部分,头部还有未读的短消息和提醒的条数显示.赶紧下 ...

  8. easyui+ztree 后台管理系统模板

    用easyui+ztree做了个后台管理系统模板,效果图: 下载地址: csdn:http://download.csdn.net/detail/jackpay/6744505 github:http ...

  9. vue3项目后台管理系统模板

    Vue3.0 发布第一个版本至今有一段时间了,到现在一直在更新优化,在性能方面,对比 Vue2.x ,性能的提升比较明显,打包后体积更小 来看下 Vue3.x 新增了哪些功能和特性. Performa ...

随机推荐

  1. es2018(es9)前瞻

    命名捕获 语法 : ?<name> 一:举个栗子 我们要把从2018-05-20取出年月日 1:普通方法 let str = '2018-05-20'; let reg1 = /(\d{4 ...

  2. Unity入门一,什么是GameObject,MonoBehaviour

    Unity入门一,什么是GameObject,MonoBehaviour GameObject和Component Unity是一个Component-Based的引擎,所有物体都是GameObjec ...

  3. php 把数组保存为标准的数组格式,存储到文件中

    <?php $file='./test.php'; $array=array('color'=> array('blue','red','green'),'size'=> array ...

  4. shell实现rpm -e 一键卸载所有相关包以及依赖

    原理也比较简单, 刚好用到就稍微写了一下, 做个笔记 #!/bin/bash #************************************************************ ...

  5. 页面适配的小栗子 - github

    我模拟了一个QQ音乐的radiostation页面,用了媒体查询以及流式布局,页面大部分内容是js根据json生成的,使用了less来编写css样式表. 下面是仓库地址,感兴趣的小伙伴可以打开看看,将 ...

  6. c语言#define用法

    01 作用域 预编译作用域限本文全局,如: a.c中定义:#define TEST 1 b.c中定义:#define TEST 2 两者编译不交叉,互不影响. 若需#define TEST作用于a.c ...

  7. vs2013突然打不开项目,项目全部不兼容

    转载:https://forum.cocos.com/t/vs2013/40931 转载:https://jingyan.baidu.com/article/cdddd41c7c6b5353cb00e ...

  8. windows微信双开

    下面的代码写到xxx.bat文件中 @echo off start /d "D:\software\WeChat\" WeChat.exe start /d "D:\so ...

  9. C# 将对应的xml文档赋值给指定模型(对象)

    public static IList<T> XmlToEntityList<T>(string xml) where T : new()        {           ...

  10. buaacoding_2018算法期末上机G题.地铁建设题解

    // 标注:本文旨在为博主确立一种题解的基本范式,以避免博主的题解流于AC代码的粘贴.此基本范式为:完整而简洁明了的思路及其推导说明,力图触及问题的本质并衍生对同类问题的思路分析,使得题解具有泛用性, ...