7Jquery easyui前台UI框架 开发包： 7.1Layout页面布局 将课后资料中后台系统前台页面素材导入项目中 1、导入Jquery，easyui相关js,css文件 <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/js/easyui/themes/default/easyui.css"> <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/js/easyui/themes/icon.css"> <script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery-1.8.3.js"></script> <script type="text/javascript" src="${pageContext.request.contextPath }/js/easyui/jquery.easyui.min.js"></script> 2、在body加样式 easyui-layout 3、在body添加多个div 通过data-options设置方位值 region:’north’ 4、注意：中部区域必须保留 7.2accordion折叠面板 下一级div必须有title属性,才能展示折叠效果 7.3tabs选项卡面板 7.3.1调用easyui组件方法 方法名当作参数传进来 8Jquery ztree树插件 官网：ztree.me 8.1Ztree标准json数据 通过children指定下级节点数据： 1、导入ztree相关js文件 <link rel="stylesheet" href="${pageContext.request.contextPath }/js/ztree/zTreeStyle.css" type="text/css"> <script type="text/javascript" src="${pageContext.request.contextPath }/js/ztree/jquery.ztree.all-3.5.js"></script> 2、在页面中提供ul元素 弊端：数据嵌套方式 8.2Ztree 简单json数据（掌握） 通过pid:指定上级节点的id