最新消息:关注【太平洋学习网】微信公众号,可以获取全套资料,【全套Java基础27天】【JavaEE就业视频4个月】【Android就业视频4个月】

H-ui.admin v3.0前后端框架的使用与优化

JS/CSS admin 浏览 评论

我们公司使用的前后端框架也是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框架默认的效果是这样的,感觉不是太好看,鼠标放在左侧菜单上是白色的背景,如图。

QQͼƬ20170204142345.png

优化之后我添加了顶部导航栏菜单,并且将左侧菜单改成了白色的背景,当鼠标移动过去的时候是浅绿色的,这样是因为如果项目很大的话,就可以做更多的功能,如图。


我是如何优化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的一些细节也贴出来,请见谅。

来源网站:太平洋学习网,转载请注明出处:http://www.tpyyes.com/a/js_css/2017/0204/hui-admin.html

    与本文相关的文章

    发表我的评论
    取消评论

    表情

    您的回复是我们的动力!

    • 昵称 (必填)

    网友最新评论