這篇文章主要介紹了layui自定義ajax左側三級菜單的示例分析,具有一定借鑒價值,感興趣的朋友可以參考下,希望大家閱讀完這篇文章之后大有收獲,下面讓小編帶著大家一起了解一下。
公司主營業(yè)務:成都網(wǎng)站設計、成都網(wǎng)站制作、移動網(wǎng)站開發(fā)等業(yè)務。幫助企業(yè)客戶真正實現(xiàn)互聯(lián)網(wǎng)宣傳,提高企業(yè)的競爭能力。創(chuàng)新互聯(lián)是一支青春激揚、勤奮敬業(yè)、活力青春激揚、勤奮敬業(yè)、活力澎湃、和諧高效的團隊。公司秉承以“開放、自由、嚴謹、自律”為核心的企業(yè)文化,感謝他們對我們的高要求,感謝他們從不同領域給我們帶來的挑戰(zhàn),讓我們激情的團隊有機會用頭腦與智慧不斷的給客戶帶來驚喜。創(chuàng)新互聯(lián)推出安源免費做網(wǎng)站回饋大家。
HTML代碼: 需引入layui.css代碼
js代碼:需引入 layui.all.js
var $ = layui.jquery,
element = layui.element(),
form = layui.form();
var html = '';
//獲取菜單
$.ajax({
url:"../manage/permissionList?type=1",
type:"post",
dataType:"json",
data:{},
success:function(data){
var navs=data.result;
$.each(navs,function(i,item){
html += '
';
html += '- '+item.title+'
';
//如果有第二級菜單
if(item.children !== undefined && item.children.length > 0){
$.each(item.children,function(j,item2){
html += '- ';
html += ''+item2.title+'';
//如果有三級菜單
if(item2.children !== undefined && item2.children.length > 0){
html += '';
}
html += '
';
});
}
html += '
';
});
//渲染html
$('#admin-navbar-side').html(html);
}
});
//觸發(fā)事件
var active = {
tabAdd: function(obj){
//新增一個Tab項
element.tabAdd('admin-tab', {
title: $(this).html()//用于演示
,content: '
'
});
element.tabChange("admin-tab", $('.layui-tab-title li').length - 1);
},
tabDelete: function(index) {
//刪除指定Tab項
element.tabDelete('admin-tab', index); //刪除(注意序號是從0開始計算)
}
,tabChange: function(lay_id){
//切換到指定Tab項
element.tabChange('admin-tab', lay_id); //切換到:用戶管理
}
};
//添加tab
$(document).on('click','a',function(){
if(!$(this)[0].hasAttribute('data-url') || $(this).attr('data-url')==='')return;
var title = $.trim($(this).text());
var tabs = $(".layui-tab-title").children();
for(var i = 0; i < tabs.length; i++) {
if($(tabs).eq(i).children('cite').text() == title) {
element.tabChange('admin-tab', i);
return;
}
}
active["tabAdd"].call(this);
resize();
active.tabChange($(".layui-tab-title").children().length - 1);
});
//iframe自適應
function resize(){
var $content = $('.admin-nav-card .layui-tab-content');
$content.height($(this).height() - 147);
$content.find('iframe').each(function() {
$(this).height($content.height());
});
}
$(window).on('resize', function() {
var $content = $('.admin-nav-card .layui-tab-content');
$content.height($(this).height() - 147);
$content.find('iframe').each(function() {
$(this).height($content.height());
});
}).resize();
//toggle左側菜單
$('.admin-side-toggle').on('click', function() {
var sideWidth = $('#admin-side').width();
if(sideWidth === 200) {
$('#admin-body').animate({
left: '0'
}); //admin-footer
$('#admin-footer').animate({
left: '0'
});
$('#admin-side').animate({
width: '0'
});
} else {
$('#admin-body').animate({
left: '200px'
});
$('#admin-footer').animate({
left: '200px'
});
$('#admin-side').animate({
width: '200px'
});
}
});
$(document).on('click','dt',function(){
$(this).parent().find('dd').toggle();
});
$(document).on('click','dd a',function(){
$(this).next('ul').toggle();
});
感謝你能夠認真閱讀完這篇文章,希望小編分享的“l(fā)ayui自定義ajax左側三級菜單的示例分析”這篇文章對大家有幫助,同時也希望大家多多支持創(chuàng)新互聯(lián),關注創(chuàng)新互聯(lián)行業(yè)資訊頻道,更多相關知識等著你來學習!
網(wǎng)頁標題:layui自定義ajax左側三級菜單的示例分析
分享地址:
http://weahome.cn/article/gogjgd.html