Layui前端框架導航欄使用介紹
LayUI介紹
Layui 是一款採用自身模組規範編寫的國產前端UI框架，遵循原生HTML/CSS/JS的書寫與組織形式，她更多是為服務端程式設計師量身定做，你無需涉足各種前端工具的複雜配置，只需面對瀏覽器本身，讓一切你所需要的元素與互動、從這裡信手拈來。
LayUI優點
由於開發專案必須要在IE8上支援，選擇LayUI前端UI框架，Layui相容除IE6/7以外的全部瀏覽器，並且多數結構支援響應式。
LayUI獲取方式
下載後你可以看到layUI的目錄結構如下，直接複製layui目錄到的專案中即可。
- ├─css //css目錄
- │ └─modules //模組css目錄（一般如果模組相對較大，我們會單獨提取）
- │ ├─laydate
- │ ├─layer
- │ │ └─default
- │ └─layim
- │ └─skin
- ├─font //字型圖示目錄
- ├─images //圖片資源目錄（一些表情等）
- │ └─face
- └─lay //JS目錄
- ├─dest //經過合併的完整模組
- └─modules //各模組/元件
需要引入layui的js和css檔案，引入方式如下：
<!-- layoutui -->
<linkrel="stylesheet"href
<scriptsrc="<%=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如下：
<!-- 左側導航 -->
<divid="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;
}