今天回顾了之前学习的使用EasyUI的Layout组件实现简单的页面布局,尝试着做了一个简单的Demo。
目录如下:
步骤一:引入easyui的样式和脚本
<link href="EasyUI/themes/black/easyui.css" rel="stylesheet" /> <link href="EasyUI/themes/icon.css" rel="stylesheet" /> <script src="EasyUI/jquery.min.js"></script> <script src="EasyUI/jquery.easyui.min.js"></script> <script src="EasyUI/locale/easyui-lang-jp.js"></script>
步骤二:在页面中引入easyui-layout组件,并且加入tree树组件和tabs选项卡组件
<body class="easyui-layout"> <div data-options="region:'north'" style="height:100px;"> <p style="text-align:center;color:yellow;font-size:28px">满天星的Layout效果演示</p> </div> <div data-options="region:'south'" style="height:50px;"> <p style="text-align:center">版权所有:©2018满天星</p> </div> <div data-options="region:'west',title:'菜单区域'" style="width:200px;"> <div id="aa" class="easyui-accordion"> <div title="业务模块" data-options="iconCls:'icon-save',fit:true" > <!--树组件--> <ul id="menuTree"></ul> </div> <div title="视频管理模块" data-options="iconCls:'icon-reload'" > content2 </div> <div title="系统管理模块" data-options="iconCls:'icon-add'"> content3 </div> </div> </div> <div data-options="region:'center'" style="padding:5px;background:#eee;"> <!--选项卡组件--> <div id="tabs"></div> </div> </body>
步骤三:添加部分脚本代码,tabs首页的呈现
$(function () { //实例化tabs组件 $("#tabs").tabs({ border: false,//无边框 fit: true//铺满父容器 }); //添加一个选项卡 $("#tabs").tabs('add',{ title: "首页", content: "欢迎来到满天星的系统", closable: false//是否显示关闭按钮 }); })
步骤四:添加一个json文件(tree_data.json),用于存储树控件的数据
[ { "id": 1, "text": "产品管理", "iconCls": "icon-tip", "children": [ { "text": "添加产品", "attributes": { "url": "addProduct.html", "title": "添加产品", "closable": true } }, { "text": "修改产品", "attributes": { "url": "editProduct.html", "title": "修改产品", "closable": true } } ] } ]
你也可以把这段json代码放入jsonview去检查下格式是否正确
步骤五:添加部分脚本代码,tree的呈现以及和tabs的联动
//实例化一个树组件 $("#menuTree").tree({ url: "tree_data.json",//数据存放在json文件中 method:'get',//若不设置为get提交,会有405错误 onClick: function (node)//node是触发的节点 { //console.log(node.attributes);//打印显示node.attributes if (node.attributes)//如果有attributes对象,就进入 { var title = node.text;//树节点的文本 var t = $("#tabs");//t为tabs标签 if (t.tabs('exists',title))//如果节点存在 { t.tabs('select', title) } else//如果不存在,则添加节点 { var url = node.attributes.url;//节点url t.tabs('add', { title: title,//标题 href: url,//地址来源 closable: true }) } } }
中间我们有很多逻辑,例如你创建tabs判断是否存在,避免重复创建tabs。
最后,我们看看最终演示效果。
1.首页
扫描二维码关注公众号,回复:
1163126 查看本文章
2.打开摸一个树节点,触发对应的选项卡
大功告成!!!