Home >Web Front-end >JS Tutorial >jQuery-Easyui 1.2 code to implement multi-layer menu effect_jquery

jQuery-Easyui 1.2 code to implement multi-layer menu effect_jquery

WBOY
WBOYOriginal
2016-05-16 17:57:221193browse

When the project first started in September 2011, I found a crazy scholar in the park. Because the demo on Xiucai does not have a multi-level menu. This is also my first time coming into contact with Easyui. Many people don’t understand. But then the three of us figured it out. But we found that our project couldn’t be used. Just give up! It has been sitting there... Fortunately, I finally found it

Today, my friend wanted this piece, so I posted it. You can take a look if you need it. There is definitely more than one way. This is just the way we implement it haha ​​
Requirement: Menu such as "Navigation Menu-Basic Data-Basic Data 1-Submenu 1"
Effect:

The js code is as follows
Copy the code The code is as follows:

/**************************************Index Page************ ********************************/
var _menus = {
basic: [{
"menuid": "10",
"icon": "icon-sys",
" menuname": "Common menu",
"menus":
[{
"menuid": "111",
"menuname": "Basic data 1",
"icon" : "icon-nav",
"url": "#"
}, {
"menuid": "113",
"menuname": "Basic data 12",
"icon": "icon-nav",
"url": "#"
},
//
{
"menuid": "119",
"menuname ": "This has a submenu",
"icon": "icon-nav",
"menus": [{
"menuid": "120",
"menuname" : "Submenu 1",
"icon": "icon-nav",
"menus": [{
"menuid": "120",
"menuname": "子子menu11111",
"icon": "icon-nav",
"url": "#"
}]
}]
},
//
{
"menuid": "115",
"menuname": "Basic data 13",
"icon": "icon-nav",
"url": "#"
}, {
"menuid": "117",
"menuname": "Basic data 14",
"icon": "icon-nav",
"url": "# "
}, {
"menuid": "119",
"menuname": "Basic data 15",
"icon": "icon-nav",
"url" : "em/enterpriseChannelObtend.action"
}]
}, {
"menuid": "20",
"icon": "icon-sys",
"menuname": "Test One",
"menus": [{
"menuid": "211",
"menuname": "Test One 11",
"icon": "icon-nav" ,
"url": "#"
}, {
"menuid": "213",
"menuname": "Test 122",
"icon": "icon -nav",
"url": "#"
}]
}],
point: [{
"menuid": "20",
"icon": "icon-sys",
"menuname": "mail list",
"menus": [{
"menuid": "211",
"menuname": "mail purpose",
"icon": "icon-nav",
"url": "#"
}, {
"menuid": "213",
"menuname": "Email adjustment ",
"icon": "icon-nav",
"url": "#"
}]
}]
};

Source code DownloadjQuery-Easyui-12-three-Demo.rar
Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn