在线时间:8:00-16:00
迪恩网络APP
随时随地掌握行业动态
扫描二维码
关注迪恩网络微信公众号
开源软件名称:AdminLTE With Iframe开源软件地址:https://gitee.com/weituotian/AdminLTE-With-Iframe开源软件介绍:Introduction(简介)AdminLTE with iframe -- Based on AdminLTE framework. It integrated with iframes with is popular in china admin systems. (基于AdminLTE框架,并且集成了iframe的tab页面,是一款适合中国国情的后台主题UI框架) Preview on github: https://weituotian.github.io/AdminLTE-With-Iframe/pages/index_iframe.html Preview on oschina: http://weituotian.oschina.io/adminlte-with-iframe/pages/index_iframe.html Table of Contents(目录)
1. branch(分支)更新分支为master 2. reference(参考)(iframe功能的js和页面css都是参考superui得出来的) 3. Installation(安装)修改可以使用grunt构建工具
4. 目录结构
5. Documentation(文档)may be you should customize the system by reading the codes!(请阅读源码进行修改) 5-1. 整合到您的项目
5-2. iframe框架介绍一些集成了iframe后新增的功能,和修改方法。请确认执行完上面文档的安装部分。可随时开启issue. 5-2-1. 选项卡右键菜单,双击刷新
5-2-2. 一些配置在 index_iframe.html 中: //设置根目录,//比如本演示中的地址是http://weituotian.oschina.io/adminlte-with-iframe/pages/index_iframe.html#//上一级就是http://weituotian.oschina.io/adminlte-with-iframe/pages//当前实际的开发中一般用不到//比如你的首页用到index_iframe.html这个模版,访问地址为http://localhost/,就不用设置了//如果你部署在http://localhost/xxx, xxx是你部署的路径,那么就按以下代码设置一下根目录App.setbasePath("../");//设置图片路径,相对于根目录//这个框架带有一些图片(加载进度条等),你可以放置在其它地方//但要如下设置,//比如在本项目中,引用的图片放在了根目录下,dist/img/中App.setGlobalImgPath("dist/img/"); 5-2-3. 左侧菜单生成如下操作,可参考 index_iframe.html, sidebarMenu.js var menus = [ { id: "9000", text: "header", icon: "", isHeader: true }, { id: "9002", text: "Forms", icon: "fa fa-edit", children: [ { id: "90021", text: "advanced", url: "forms/advanced_iframe.html", targetType: "iframe-tab", icon: "fa fa-circle-o" }, { id: "90022", text: "general", url: "forms/general_iframe.html", targetType: "iframe-tab", icon: "fa fa-circle-o" }, { id: "90024", text: "百度", url: "https://www.baidu.com", targetType: "iframe-tab", icon: "fa fa-circle-o", urlType: 'abosulte' } ] } ]; $('.sidebar-menu').sidebarMenu({data: menus}); 5-2-4. tab的操作所有的操作都可以在index_iframe.html中实现。index_iframe.html作为一个父页面承载了许多iframe。以下介绍的函数可以主页面使用, 在iframe子页面,也可以通过 5-2-4-1. 增加新tab动态增加菜单,你可以从后台读取菜单,用以下的json格式封装。同时还可以自己额外增加菜单 //欢迎页的菜单。 addTabs({ id: '10008', title: '欢迎页', close: false, url: 'welcome_iframe.html', urlType: "relative" });
5-2-4-2. 获得当前激活的tab的idvar pageId = getActivePageId(); 最常用吧,一般这个就够了, 在子iframe页面用 5-2-4-3. 获得当前激活的tab的idvar pageId = getPageId(element); element一般是tab栏的a超链接元素,jq对象和普通的dom都可以 5-2-4-4. 根据pageId获得当前选项卡的标题var title = findTabTitle(pageId); 5-2-4-5. 根据pageId获得当前iframevar $iframe = findIframeById(pageId); 这个iframe是一个jq对象 5-2-4-6. 根据pageId获得当前panelvar $panel=findTabPanel(pageId) 这个panel是一个div,装有iframe,jq对象 5-2-4-7. 关闭tabcloseTabByPageId(pageId); pageId是你创建tab时候的id. 只要知道你要操作的pageId,也可以在一个子iframe页面关闭另外一个子iframe页面。 5-2-4-8. 刷新tabrefreshTabById(pageId) 只要知道pageId,就可以刷新任何tab 5-2-4-9. 未完待续6. Browser Support(浏览器支持)
7. LicenseAdminLTE is an open source project by Almsaeed Studio that is licensed under MIT. Almsaeed Studio reserves the right to change the license of future releases. (开源免费) 8. Todo List
9. 相关示例项目
|
2022-08-15
2022-08-17
2023-10-27
2022-09-23
2022-08-13
请发表评论