H-ui.admin v3.0

程序员的的福音
H-ui.admin是用H-ui前端框架开发的轻量级网站后台模版
采用源生html语言,完全免费,简单灵活,兼容性好
让您快速搭建中小型网站后台

在线体验H-ui.Admin_v3.0 下载H-ui.Admin v3.0

在线体验H-ui.Admin.page_v3.0 下载H-ui.Admin.page v3.0

两个版本有何区别?H-ui.Admin_v3.0是默认版本,iframe结构布局,多选项卡效果。
H-ui.Admin.page_v3.0是单页面,没有用到iframe,左侧菜单点击刷新页面,每次只能打开一个页面。相比iframe更简单,更方便操作。

如果下载缓慢,请加入群,在群共享中下载。如果对IE低版本有严格要求,请慎重选择,本后台框架不对IE8以下浏览器做严格兼容。

人手有限,有很多不完善,敬请谅解,您的鼓励是我们最大的动力!
不断升级,力求完善 更新日志

官方QQ群:群5:272458620(满)群4:437118488 群3:149378151 群2:185134955群1:178241871(满)

更新日志

v3.0版更新日志
  1. 【升级】 H-ui 2.2到3.0
  2. 【升级】 layer 2.1到2.4
  3. 【升级】 Hightcharts 4.1.7到5.0.9
  4. 【优化】 js错误,插件体积
  5. 【优化】 表单页面栅格效果
  6. 【更新】 使用jquery.validate表单验证插件替代validform插件
  7. 【更新】 去掉H-ui.admin.js中getskincookie方法中的getCookie,改为jquery.cookies 的$.cookie
  8. 【增加】 右键菜单(关闭全部|关闭当前窗口)。
v2.5版更新日志
  1. 重新整合优化static下的H-ui静态资源(css、js、images),去除多余的图片,将H-ui和H-ui.admin完全分离。
v2.4版更新日志
  1. 优化表单栅格布局;
  2. 使用jquery.validation做表单验证;
  3. 对移动端做了些适当优化;
  4. 2.4 版不能覆盖2.3.x版,因为改动很大:导航、栅格、验证等都做了改动。所以2.3和2.4会作为两个版本分开维护。
v2.3版更新日志
  1. 采用 layer-v1.9.3;
  2. 集成ztree、百度编辑器、图表插件;
  3. 优化datatables 样式;
  4. 点击左侧,增加刷新功能(解决打开table 表格宽度不正常);
  5. 新增5种皮肤(共6种,默认黑色);
  6. 优化目录结构
  7. 增加Hui框架专用图标库,Hui-iconfont
v2.2版更新日志
  1. 更新IE下兼容性问题

常见问题

关于H-ui.admin iframe在移动端iphone手机上无法滚动的解决方案

再H-ui.admin.css文件中增加这两行css代码就可解决

.show_iframe{ position:absolute; top:0; right:0; left:0; bottom:0}
@media (max-width: 767px) {
	.show_iframe{-webkit-overflow-scrolling: touch;overflow-y: scroll}
}
关于日期插件My97 DatePicker与Think php模版标签冲突的解决方法

原因:Thinkphp默认的模版标签为:{},而DatePicker插件的标签也为{}。

解决方法一:修改模版标签config配置文件

  1. 'TMPL_L_DELIM' => '{', // 模板引擎普通标签开始标记
  2. 'TMPL_R_DELIM' => '}', // 模板引擎普通标签结束标记

方法二:将原先直接写在<input 标签上的属性写法,改成通过js函数实现。

时间:<input type="text" name="start_time" id="countTimestart" onfocus="selecttime(1)" value="{$start_time}" size="17" class="date" readonly> - <input type="text" name="end_time" id="countTimeend" onfocus="selecttime(2)" value="{$end_time}" size="17"  class="date" readonly>
function selecttime(flag){
    if(flag==1){
        var endTime = $("#countTimeend").val();
        if(endTime != ""){
            WdatePicker({dateFmt:'yyyy-MM-dd HH:mm',maxDate:endTime})}else{
            WdatePicker({dateFmt:'yyyy-MM-dd HH:mm'})}
    }else{
        var startTime = $("#countTimestart").val();
        if(startTime != ""){
            WdatePicker({dateFmt:'yyyy-MM-dd HH:mm',minDate:startTime})}else{
            WdatePicker({dateFmt:'yyyy-MM-dd HH:mm'})}
    }
 }
弹出层提交后如何刷新父级iframe窗口?
window.parent.location.reload(); 注意:刷新的时候就会自动关闭掉弹层了,所以不需要加关闭弹层代码。如果加了关闭代码请将window.parent.location.reload();放在关闭代码的前面,因为一但关闭了弹层,window.parent获取的对象就不对了。
如何关闭弹出窗口?

layer是一个很不错的第三方弹窗插件,作者贤心,是个大牛,在这不多说介绍。

layer弹窗有几种方式,不同的打开方式关闭是不一样的。但关闭的原理都一样,就是获得当前弹出层的索引,然后咔嚓掉(close)。

  1. 1、通过.open(),.alert(),.load(),.tips()方法打开的对话框,分别通过:
    var index = layer.open();
    var index = layer.alert();
    var index = layer.load();
    var index = layer.tips();这些方式获得索引,
    然后layer.close(index);就可关闭。
  2. 2、iframe页面关闭方法 var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
    parent.layer.close(index); //再执行关闭
顶部菜单如何以tab页签形式打开?
请通过<a data-href="放要打开的链接" data-title="弹出窗口标题" onClick="Hui_admin_tab(this)">……打开。
关于表格插件

H-ui.admin 的表格用的是datatables插件,具体的API请参考 Datatables中文网 。当然你也可以自行使用其他插件。

如果出现以上配置,一定是你修改了表格的列数。DataTables 的配置和表格的列数不一致,会出现上图的报错。解决方法:请将参数修改正确。

左侧菜单支持二级以上展开吗?菜单没有高亮效果?
  1. 目前还不支持,顶部一级,左侧二级,三级,这样合起来已经有三级的菜单了,我见过很多很复杂的后台管理,三级基本上已经够用了。所以当时做这个后台框架的时候想法很单纯,尽量简单源生,够用就行。
  2. 着急用的朋友智能自行DIY。希望大家能在基础上做完善,而不是依赖我一个人的力量;我只是抛了个砖,却一直没有引来玉。(桑心)
为什么2.3版本那么大?
2.2-版的时候,你们嫌弃demo不够多,插件不过多,2.3增加了你们想要的demo和插件,你们又嫌弃他大,你们到底想怎么样?聪明的开发者不会问这样的问题,他会在自己的项目中有选择性的使用,并在发布的时候去除不必要的插件,并做压缩处理。至少让自己看起来像个真正的程序员。
skin.css 404的问题?

最新的H-ui.admin.js已经解决了skin.css 404的问题。请下载最新的文件覆盖。

skin.css是H-ui.admin v2.3+ 的皮肤文件,通过js设置路径,默认是网站的根路径。
如果你的 skin 目录没有放到根目录下,请记着修改下 static/H-ui/js/H-ui.admin.js 倒数第三行代码的skin这个路径。否则皮肤skin.css会因为路径问题,加载不到。

如果您对换肤没有硬性的要求,可以选择一种皮肤,固定下来,将换肤功能去掉,上图的js代码注释掉;或者将主框架页面中 <link href="skin/default/skin.css" rel="stylesheet" type="text/css" id="skin" />的id去掉,这样还能减轻下代码量。

v2.2之前版本,打开table 表格宽度不正常
js/Hui.admin.js大概136行 找到 var showBox=iframe_box.find('.show_iframe:visible')
在后面增加一行代码:showBox.location.replace();
这段代码是本站的统计代码,请自行删除。
<script>
var _hmt = _hmt || [];
(function() {
	var hm = document.createElement("script");
	hm.src = "//hm.baidu.com/hm.js?080836300300be57b7f34f4b3e97d911";
	var s = document.getElementsByTagName("script")[0]; 
	s.parentNode.insertBefore(hm, s)})();
var _bdhmProtocol = (("https:" == document.location.protocol) ? " https://" : " http://");
document.write(unescape("%3Cscript src='" + _bdhmProtocol + "hm.baidu.com/h.js%3F080836300300be57b7f34f4b3e97d911' type='text/javascript'%3E%3C/script%3E"));
</script>
如何修改LOGO?
打开根目录下“logo.psd”——>修改——>保存为png格式——>替换images下的logo.png
如何修改皮肤?

v2.3 版本我们将皮肤样式做了彻底分离。
找到根目录skin文件夹,里面已经有6个皮肤了,然后复制出来任意一个皮肤文件夹,自定义文件夹名,在基础上修改成你想要的。

v2.2 之前版本:打开根目录下css/H-ui.admin.css文件,修改10——23行代码。

IE下不兼容的问题解决
早期下载2.0版本的用户普遍反映不兼容IE6/7/8,原因有两点点:
(1)引用了2.1.3版本的jquery,导致jquery兼容报错, PS:看来高版本的不一定是最好的 。解决方案:降低jquery版本,可下载1.11.1版本的jquery。
(2)html5的新标签在IE低版本下不识别,虽然页面中引用了<script type="text/javascript" src="http://libs.useso.com/js/html5shiv/3.7/html5shiv.min.js"></script>,貌似这个js有些问题,请搜索页面中的此句代码修改为本地js文件夹中的html5.js。<script type="text/javascript" src="js/html5.js"></script>

有很多公司选择H-ui.admin后台模版做管理系统