我们公司使用的前后端框架也是H-ui.admin v3.0的源码修改的，开始我不知道如何使用hui.admin这个前端框架，不过好在这个h-ui.admin前端框架非常的容易上手，开发后台页面非常的快，也非常的好看。
hui-admin前端框架的官方网站是：http://www.h-ui.net/H-ui.admin.shtml，目前开发到了v3.0版本。
之前我写过hui.admin的一篇文章，但是并没有写如何在自己的javaweb或者php项目中使用hui-admin框架，真的很抱歉，所以今天我将简单的介绍一下如何使用h-ui.admin这个前端框架。
首先我们要去hui-admin的官方网站去下载H-ui.admin v3.0框架的源码，解压缩之后，我们看到下面有很多文件以及3个文件夹，如图。
---lib文件夹是框架资源文件，里面有很多js框架资源，包括最重要的jquery框架和Hui-iconfont图标框架。
---static文件夹是hui-admin框架文件，包括这个框架所有的css和js以及images图片相关的文件都在里面，非常的重要。
---temp文件夹是图片文件资源相关的文件。
还有下面的许多html文件，实际上就是这个框架一个个的小功能，如何使用呢？首先将这3个文件复制到我们自己的项目中，然后在我们自己的html页面head头部中引入css和js相关的文件，代码如下。
<link rel="stylesheet" type="text/css" href="static/h-ui/css/H-ui.min.css" /> <link rel="stylesheet" type="text/css" href="static/h-ui.admin/css/H-ui.admin.css" /> <link rel="stylesheet" type="text/css" href="lib/Hui-iconfont/1.0.8/iconfont.css" /> <link rel="stylesheet" type="text/css" href="static/h-ui.admin/skin/default/skin.css" id="skin" /> <link rel="stylesheet" type="text/css" href="static/h-ui.admin/css/style.css" /> <script type="text/javascript" src="lib/jquery/1.9.1/jquery.min.js" ></script>
引入这些文件之后，我们就可以在相关的html中找到我们想要的功能，把代码复制到我们自己的页面中就ok了，很简单吧！如果你是java或者php程序员，就可以将这个框架的死数据写出动态的数据就ok了。
我本人还将这个框架进行了一些小小的优化，之前我们的hui-admin框架默认的效果是这样的，感觉不是太好看，鼠标放在左侧菜单上是白色的背景，如图。
优化之后我添加了顶部导航栏菜单，并且将左侧菜单改成了白色的背景，当鼠标移动过去的时候是浅绿色的，这样是因为如果项目很大的话，就可以做更多的功能，如图。
我是如何优化hui-admin这个框架的呢，主要是修改这个框架的index.html这个页面，首先看我如何添加导航栏菜单，我先注释掉了index.html页面中class="nav navbar-nav"这一段代码，因为我觉得“+新增”这个功能很碍眼，然后再新增自己的导航代码，如图。
在<head>标签内新增顶部导航菜单的css样式和js点击事件代码，当鼠标点击到那个按钮那个按钮就显示白色半透明效果，代码如下。
<style type="text/css">
/*首页导航菜单css样式*/
.container-fluid{float: left;height: 44px;}
.navbar .topmenu{
float: left;
margin-left:70px;
height: 44px;
}
.navbar .topmenu div{
float: left;
height: 44px;
}
.navbar .topmenu div a{
display:block;
padding: 0 8px;
float: left;
text-decoration: none;
height: 44px;
color: #fff;
text-align: center;
line-height:44px;
}
.navbar .topmenu div a:hover{
background-color:rgba(255,255,255,0.5);
filter: progid:DXImageTransform.Microsoft.gradient(startcolorstr=#7FFFFFFF,endcolorstr=#7FFFFFFF);
}
</style>
//js鼠标点击事件
<script type="text/javascript">
$(function(){
//默认选择第一个顶部导航并设置半透明背景效果，filter为低版本浏览器兼容
$(".topmenu div a:first").css("background-color","rgba(255,255,255,0.5)");
$(".topmenu div a:first").css("filter","progid:DXImageTransform.Microsoft.gradient(startcolorstr=#7FFFFFFF,endcolorstr=#7FFFFFFF)");
$(".topmenu div a").each(function(){
$(this).click(function(){
$(".topmenu div a").css("background-color","");
$(".topmenu div a").css("filter","");
$(this).css("background-color","rgba(255,255,255,0.5)");
$(this).css("filter","progid:DXImageTransform.Microsoft.gradient(startcolorstr=#7FFFFFFF,endcolorstr=#7FFFFFFF)");
});
});
});
</script>那么如何修改左侧菜单的背景和hover鼠标移动事件呢？很简单，将static/h-ui.admin/css/目录下的H-ui.admin.css这个文件“/*左侧菜单*/”注释下面的代码替换成以下的代码就ok了，也就是第49行，我都弄好了，你可以直接替换使用。
.Hui-aside{background-color:#efeef0}
.Hui-aside .menu_dropdown dl{ margin-bottom:0;background-color:#efeef0}
.Hui-aside .menu_dropdown dt{display:block;line-height:35px;padding-left:15px;cursor:pointer;position:relative;border-bottom: 1px solid #e5e5e5;font-weight:normal;background-color:#efeef0}
.Hui-aside .menu_dropdown dt .menu_dropdown-arrow{ position:absolute;overflow: hidden; top:0; right:15px;transition-duration:0.3s ;transition-property:all}
.Hui-aside .menu_dropdown dd{ display:none;background-color:white}
.Hui-aside .menu_dropdown dt.selected .menu_dropdown-arrow{transform: rotate(180deg)}
.Hui-aside .menu_dropdown dd.selected{display:block; margin-left:0px}
.Hui-aside .menu_dropdown ul{padding:0px}
.Hui-aside .menu_dropdown li{line-height:35px;overflow:hidden;zoom:1}
.Hui-aside .menu_dropdown li a{padding-left:15px; display:block;font-weight: bold; margin:0}
.Hui-aside .menu_dropdown li a i{ font-weight: normal}
.Hui-aside .menu_dropdown dd ul{padding:1px 1px}
.Hui-aside .menu_dropdown dd li{line-height:32px}
.Hui-aside .menu_dropdown dd li a{line-height:32px;padding-left:26px; border-bottom:none; font-weight:normal;background-color:white}
.Hui-aside .menu_dropdown dd li a:hover{background-color:#f5fafe}
.Hui-aside .menu_dropdown li a:hover{text-decoration:none}
.Hui-aside .menu_dropdown li.current a,.menu_dropdown li.current a:hover{background-color:rgba(255,255,255,0.2)}通过以上的h-ui.admin优化代码，然后你再把顶部导航与左侧菜单一 一对应，做成联动效果，就变成了和我一样的功能，如图演示。
这个做得有点粗糙，以后将使用h-ui.admin的一些细节也贴出来，请见谅。