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
更新分支为master
(iframe功能的js和页面css都是参考superui得出来的)
修改可以使用grunt构建工具
may be you should customize the system by reading the codes! (请阅读源码进行修改)
plugins
, dist
目录到您的项目中介绍一些集成了iframe后新增的功能,和修改方法。 请确认执行完上面文档的安装部分。 可随时开启issue.
context.attach
初始化json菜单,并且可以参考其获取特定tab当前url的代码$tabs.on("dblclick",
绑定了双击事件。可注释取消这个功能在 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/");
如下操作,可参考 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});
所有的操作都可以在index_iframe.html中实现。index_iframe.html作为一个父页面承载了许多iframe。以下介绍的函数可以主页面使用, 在iframe子页面,也可以通过top.xxx
来调用父页面的函数。
以下函数可以打开chrome控制台进行测试操作。
动态增加菜单,你可以从后台读取菜单,用以下的json格式封装。同时还可以自己额外增加菜单
//欢迎页的菜单。
addTabs({
id: '10008',
title: '欢迎页',
close: false,
url: 'welcome_iframe.html',
urlType: "relative"
});
http://localhost/index.html
,想打开index.html同级目录UI下的页面,就给url:UI/welcome.html;urlType:relative
var pageId = getActivePageId();
最常用吧,一般这个就够了, 在子iframe页面用top.getActivePageId()
获取,以下的函数类同。
有了pageId,我们可以调用其它函数操作page。
var pageId = getPageId(element);
element一般是tab栏的a超链接元素,jq对象和普通的dom都可以
var title = findTabTitle(pageId);
var $iframe = findIframeById(pageId);
这个iframe是一个jq对象
var $panel=findTabPanel(pageId)
这个panel是一个div,装有iframe,jq对象
closeTabByPageId(pageId);
pageId是你创建tab时候的id. 只要知道你要操作的pageId,也可以在一个子iframe页面关闭另外一个子iframe页面。
refreshTabById(pageId)
只要知道pageId,就可以刷新任何tab
AdminLTE 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.
(开源免费)
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。
1. 开源生态
2. 协作、人、软件
3. 评估模型