第一步&＃xff1a;
"cc" class&＃61;"easyui-layout" fit&＃61;true>
"north" title&＃61;"North Title" split&＃61;"false"style&＃61;"height: 100px;">
"west" split&＃61;"true" title&＃61;"West" style&＃61;"width: 300px;" >
"aa" class&＃61;"easyui-accordion"style&＃61;"width: 300px; height: 200px;" fit&＃61;true>
"Title1" iconCls&＃61;"icon-save"style&＃61;"overflow: auto; padding: 10px;">
"color: #0099FF;">Accordion for jQuery
Accordion is a part of easyui framework for jQuery. It letsyou define your accordion component on web page more easily.
"Title2" iconCls&＃61;"icon-reload" selected&＃61;"true"style&＃61;"padding: 10px;">content2
"Title3">content3
"center" title&＃61;"center title"style&＃61;"padding: 5px; background: #eee;" href&＃61;"index.jsp">
"tt" class&＃61;"easyui-tabs" style&＃61;"width: 500px; height: 250px;">
"Tab1" style&＃61;"padding: 20px; display: none;">tab1
"Tab2" closable&＃61;"true"style&＃61;"overflow: auto; padding: 20px; display: none;">tab2
"Tab3" iconCls&＃61;"icon-reload" closable&＃61;"true"style&＃61;"padding: 20px; display: none;">tab3
第二步&＃xff1a;
"cc" class&＃61;"easyui-layout" fit&＃61;true>
"north" title&＃61;"layout实战" split&＃61;"false"style&＃61;"height: 100px;">
"west" split&＃61;"true" title&＃61;"菜单" style&＃61;"width: 300px;" iconCls&＃61;"icon-ok" >
"aa" class&＃61;"easyui-accordion"style&＃61;"width: 300px; height: 200px;" fit&＃61;true>
//手风琴selected &＃xff0c;会默认展开&＃xff0c;
"用户管理" style&＃61;"overflow: auto; padding: 10px;">
//手风琴selected &＃xff0c;会默认展开&＃xff0c;
"岗位管理" selected&＃61;"true" style&＃61;"padding: 10px;">content2
"权限管理">content3
"资源管理">content3
"center" title&＃61;"主菜单"style&＃61;"padding: 5px; background: #eee;" >
"tt" class&＃61;"easyui-tabs" style&＃61;"width: 500px; height: 250px;" fit&＃61;true>
第三步&＃xff1a;
点击左边的菜单&＃xff0c;中间能弹出tab页&＃xff0c;左边的菜单对应右边的tab&＃xff0c;如果过有了&＃xff0c;就不能再创建新的tab页
$("p>a[title]").click(function(){var src&＃61;$(this).attr("title");//获取title中的值&＃xff0c;var title&＃61;$(this).text();if($("#tt").tabs("exists",title)){//有了&＃xff0c;就不能再创建新的tab页$("#tt").tabs("select",title);//将已经创建的tab选中&＃xff0c;不再穿件新的}else{//动态创建tab $("#tt").tabs("add",{title:title,content:""//内容区其实就是iframe})}})});
"cc" class&＃61;"easyui-layout" fit&＃61;true>
"north" title&＃61;"layout实战" split&＃61;"false" style&＃61;"height:100px" >
"west" split&＃61;"true" title&＃61;"菜单" style&＃61;"width: 300px;" iconCls&＃61;"icon-ok" >
"aa" class&＃61;"easyui-accordion"style&＃61;"width: 300px; height: 200px;" fit&＃61;true>
"用户管理" style&＃61;"overflow: auto; padding: 10px;">
"岗位管理" selected&＃61;"true" style&＃61;"padding: 10px;">content2
"权限管理">content3
"资源管理">content3
"center" title&＃61;"主菜单"style&＃61;"padding: 5px; background: #eee;" >
//动态创建tab页&＃xff0c;不是写死&＃xff0c;点击左边菜单超链接&＃xff0c;右边创建对应的tab
![[转] JavaScript中in操作符(for..in)、Object.keys()和Object.getOwnPropertyNames()的区别](https://img.php1.cn/3c972/21795/cd5/d6c87a891af756ba.jpeg)
京公网安备 11010802041100号