由于开发项目必须要在IE8上支持，选择LayUI前端UI框架，Layui兼容除IE6/7以外的全部浏览器，并且多数结构支持响应式。
LayUI使用
需要引入layui的js和css文件，引入方式如下：
<!-- layoutui -->
<link rel="stylesheet" href="<%=realPath%>/layui/css/layui.css" media="all">
<script src="<%=realPath%>/layui/layui.js"></script>
LayUI导航栏的使用
注意点:假如引入layui.js而不是layui.all.js时需要在<script></script>标签中引入
layui.use('element', function(){
var element = layui.element();
});
代码，类似于加载layui模块的元素才能正常使用导航栏。
1.在<script></script>标签中定义导航栏的结构如下：
var checkManageTree = [
{
name: "产品",
alias:"产品",
href:"",
state:{
selected:isCurrent("产品",false)
}
},
{
name: "供方",
alias:"供方",
href:"",
state:{
selected:isCurrent("供方",false)
}
}];
2.定义添加导航的导航栏的div如下：
<!-- 左侧导航 -->
<div id="left" class="site-text" lay-filter="left-div">
</div>
3.通过id获取div标签初始化导航栏视图，getHtml()方法负责根据代码动态生成导航栏视图
$('#left').html(getHtml(checkManageTree));
4.getHtml()方法的实现，通过动态创建导航栏可以减少重复代码，只需要定义json的格式的导航栏即可
/**
* 获取html字符串
* @param {Object} data
*/
function getHtml(data) {
var ulHtml = '<ul class="layui-nav layui-nav-tree" id="leftMenuUl">';
for (var i = 0; i < data.length; i++) {
if (data[i].spread !== undefined &&data[i].spread) {
ulHtml += '<li class="layui-nav-item layui-nav-itemed">';
} else {
if(data[i].state.selected !== undefined && data[i].state.selected){
ulHtml += '<li class="layui-nav-item layui-this">';
}else{
ulHtml += '<li class="layui-nav-item">';
}
}
if (data[i].children !== undefined && data[i].children !== null && data[i].children.length > 0) {
ulHtml += '<a href="javascript:;">';
if (data[i].icon !== undefined && data[i].icon !== '') {
if (data[i].icon.indexOf('fa-') !== -1) {
ulHtml += '<i class="fa ' + data[i].icon + '" aria-hidden="true" data-icon="' + data[i].icon + '"></i>';
} else {
ulHtml += '<i class="layui-icon" data-icon="' + data[i].icon + '">' + data[i].icon + '</i>';
}
}
ulHtml += '<cite>' + data[i].name + '</cite>'
/* ulHtml +='<span class="layui-nav-more"></span>' */
ulHtml += '</a>';
ulHtml += '<dl class="layui-nav-child">'
for (var j = 0; j < data[i].children.length; j++) {
if(data[i].children[j].state.selected){
ulHtml += '<dd title="' + data[i].children[j].name +'"'+'class="layui-this"' +'>';
}else{
ulHtml += '<dd title="' + data[i].children[j].name + '">';
}
/* ulHtml += '<a href="javascript:;" data-url="' + data[i].children[j].href + '">'; */
ulHtml += '<a href="'+data[i].children[j].href+'">';
if (data[i].children[j].icon !== undefined && data[i].children[j].icon !== '') {
if (data[i].children[j].icon.indexOf('fa-') !== -1) {
ulHtml += '<i class="fa ' + data[i].children[j].icon + '" data-icon="' + data[i].children[j].icon + '" aria-hidden="true"></i>';
} else {
ulHtml += '<i class="layui-icon" data-icon="' + data[i].children[j].icon + '">' + data[i].children[j].icon + '</i>';
}
}
ulHtml += '<cite>' + data[i].children[j].name + '</cite>';
ulHtml += '</a>';
ulHtml += '</dd>';
}
ulHtml += '</dl>';
} else {
/* var dataUrl = (data[i].href !== undefined && data[i].href !== '') ? 'data-url="' + data[i].href + '"' : '';
ulHtml += '<a href="javascript:;" ' + dataUrl + '>'; */
var dataUrl = (data[i].href !== undefined && data[i].href !== '') ? data[i].href : '';
ulHtml += '<a href="'+dataUrl+'">';
if (data[i].icon !== undefined && data[i].icon !== '') {
if (data[i].icon.indexOf('fa-') !== -1) {
ulHtml += '<i class="fa ' + data[i].icon + '" aria-hidden="true" data-icon="' + data[i].icon + '"></i>';
} else {
ulHtml += '<i class="layui-icon" data-icon="' + data[i].icon + '">' + data[i].icon + '</i>';
}
}
ulHtml += '<cite>' + data[i].name + '</cite>'
ulHtml += '</a>';
}
ulHtml += '</li>';
}
ulHtml += '</ul>';
return ulHtml;
}
上面我们讲到了核心的组件就是一个js，一个css，所以我们在应用的时候只要把这两个引用上就可以解决大部分的问题了。（注意UIkit是需要jqurey支持的，而且需要2.0以上的版本，也正是如此，它不支持IE8以下的浏览器，这也是不受欢迎的原因之一）。
如下所示，我们需要先引用这些东西在我们的html页面中：
值得注意的是，我们需要把jquery引用在uikit.js之前，如果相反的话，uikit就会出现uikit need jquery的错误，影响页面的显示。
然后我们就可以根据教程中核心组件中的教程来写控件了，下面是个例子：
这个里面用到了一个框和一个按钮加标题字体的显示设置，整个页面的代码如下：
仅供参考，另外如果想使用附加组件中的功能的话，需要注意里面所引用的高级样式和JS文件，才可以应用。
