A : 프런트 엔드 프레임 워크의 UI 세 가지 일반적인 클래스
입문 초보자 상태에서, 우리는 공통의 프런트 엔드 프레임 셋을 가지고 자신의 공식 웹 사이트가 있습니다 :
1.easyui : 공식 웹 사이트 (http://www.jeasyui.net/)
사용자의 컬렉션을 기반으로 JQuery와 플러그인 페이지가 어떤 상호 작용 JS에 해당하는 기능을 제공, 개발자는 당신이 해결하기 위해 HTML 태그를 사용할 수 있습니다, 자바 스크립트 특히 복잡한 방법을 쓸 필요가 없습니다, 지원 HTML5가 모든 요구를 충족 할 수 있도록라고 할 수있다, 시간뿐만 아니라 확장 요구 사항을 저장, 그것은 간단하지만 강력하다.
2.Bootstrap : 공식 웹 사이트 ( HTTP :. // www가 bootcss.com/ )
부트 스트랩은 오픈 소스 패키지 트위터의 프런트 엔드 개발 도구를 기반으로합니다. 이 프레임의 CSS / HTML / 자바 스크립트 프론트 엔드입니다. 부트 스트랩은 HTML5와 CSS3를 기반으로하고 반응 발전을 소속되어, 자신의 풍부한뿐만 아니라 아름다운 사람들이 원하는 인터페이스 개발을 사용하려면 라인에 쉽게 일반적인 사용 CSS 스타일 클래스를 기억하고, 그 흰색이 HTML 코드의 무리입니다라고, 컨트롤을 사용하기 쉬운 돈.
3.Layui : 공식 웹 사이트 ( HTTP :. // www가 layui.com/ )
Layui가 속한 소스 모듈 형 프런트 엔드 UI 프레임 워크를 열고 있지만, 조직이 몇 년 전에 브라우저 클래스 AMD 호스트 모듈 관리의 형태를 채택하기로 결정 그래서, 백 - 엔드 개발자에 찬성 더 바이어스는 아니지만 그 규칙에 제한 CommonJS, 그것은 자신의 모델보다 가볍고 간단 layui은 "고전적인 모듈 형"의도적으로 "모듈"개념 자체를 강조하지 정의가 있지만 사회 JS의 현재 프로그램의 주류를 기피 가장 간단한 해석하는 방법과 효율적이며 호환성을 시도합니다.
두 : 트리 메뉴 탭 기능을 실현하기
오늘, 트리 메뉴 개발의 주요 점유율이 어떻게 방법 Quguan 네트워크를 사용하는 방법 자세히 볼 수있는 코드를 보여주기 위해 전면 프레임과이 기술 점 때문에 함께 탭 기능 (, 그리고 하나 개의 기능을 easyui, 차이가 아니라 JSP 페이지와 일치하는 트리 메뉴에 해당하는 새로운 자바 스크립트 코드) :
다음 그림에서 구현 페이지 :
1. JSP에서 요구되는 테마 페이지를 JSP 페이지 소개 JS와 CSS를 만들고 쓰기
참고 : 필요한 병 패키지를 다운로드하거나 소개 스타일, 방법 및 easyui 프레임 워크를 학습 가치가 각 컨트롤의 자세한 사용법을 제공하는 과정에서 볼 수있는 공식 웹 APL 파일로 이동하는 공식 웹 사이트로 이동하십시오, (내가 가지고있는 모든 작은 중국 파이프 라인 네트워크가 제공, 존재하지 않는 읽을 수 없습니다)
<링크 확인해 = " 스타일 " 유형 = " 텍스트 / CSS는 " HREF = " $ {pageContext.request.contextPath} /static/js/easyui5/themes/default/easyui.css " > <링크 확인해 = " 스타일 " 유형 = " 텍스트 / CSS는 " HREF = " $ {pageContext.request.contextPath} /static/js/easyui5/themes/icon.css " > <스크립트 유형 = " 텍스트 / 자바 스크립트 " SRC는 = " $ {pageContext.request.contextPath} /static/js/easyui5/jquery.min.JS " > </ script> <스크립트 유형 = " 텍스트 / 자바 스크립트 " SRC는 = " $ {pageContext.request.contextPath} /static/js/easyui5/jquery.easyui.min.js " > </ script> <스크립트 유형 = " 텍스트 / 자바 스크립트 " SRC = " $ {pageContext.request.contextPath} /static/js/index.js " > </ script> <제목> easyui树形组件트리演示</ 제목> </ head> <body의 클래스 = " easyui 레이아웃 " > <DIV의 데이터 옵션 = " 지역 '북쪽', 국경 : 거짓 " 스타일 = "높이 : 60 픽셀; 배경 : #의 B3DFDA; 패딩 : 10px " > 북쪽 지역 </ DIV> <DIV 데이터 옵션 = " 지역 '서쪽', 분할 : 사실, 제목 : '웨스트' " 스타일 = " 너비 : 150 픽셀; 패딩 : 10px; " > 后台管理界面 <UL ID = " TT " > </ UL> </ DIV> < DIV 데이터 -options = " 지역 '동쪽', 분할 : 사실, 붕괴 : 사실, 제목 : '동' " 스타일 = " 폭 : 100 픽셀; 패딩 : 10px; "" 지역 : '남쪽', 국경 : 거짓 " 스타일 = " 높이 : 50 픽셀, 배경 : #의 A9FACD; 패딩 : 10px; " > 남부 지역 </ DIV> <DIV 데이터 옵션 = " 지역 '중심', 제목 : '센터' " >
<DIV ID = " myshow " 클래스 = " easyui 탭이 " 스타일 = " " > <div 제목 = " TAB1 " 스타일 = " 패딩 : 20 픽셀, 디스플레이 : 없음; " > TAB1 </ DIV> </ div> </ div> </ body>
3. (방법 얻을 세트 세트) 엔티티 클래스를 정의
* 내 트리 메뉴 데이터가 데이터베이스 데이터를 기반으로이 내가 여기 DAO 및 josn 데이터 형식을 사용하여 MySQL의 데이터베이스를 변환 방법의 사용과 관련된 것을, 엔티티 클래스의 첫 번째 정의 데이터를 얻기 위해 설정하는 데 사용됩니다 표시합니다.
개인 문자열 ID; 개인 문자열 텍스트; 개인 목록 <TreeNode를> 어린이 = 새로운 ArrayList를 <> (); 개인 지도 <문자열, 개체> = 속성 새 의 HashMap을 <> ();
4. 여기서 포커스 MenuDao 클래스 데이터 변경 수단과, 메뉴 트리가 표시 기능 및 콘텐츠 페이지 탭을 생성
여기에 너무 데이터 포맷 변환 내가 페이지에 데이터를 업로드하고, 탭 기능을 달성하기 위해 함께 포장 데이터를 통해 전달하는 태그 <iframe이>를 사용하는 데 사용하는 자바 스크립트 방법을 가장 중요하지만 어려운 또한, 및 표시 메뉴 트리입니다. 자, 내가 직접 코드가 아닌 코드의 원래 생태에, 단지 방법 MenuDao 클래스를 공유하고, 주요 기능은 메뉴 인터페이스를 인쇄 할 수 없습니다 변환하지 않을 경우, 컬렉션 배열 형식을 변환하는 것입니다.
MenuDao 류
/** * * @param map req.getParameterMap * @param pageBean 分页 * @return * @throws Exception */ public List<TreeNode> list(Map<String, String[]> map,PageBean pageBean) throws Exception{ List<Map<String, Object>> listMenu=this.listMenu(map, pageBean); List<TreeNode> treeNodeList=new ArrayList<>(); menuList2TreeNodeList(listMenu, treeNodeList); return treeNodeList; } /** * 查询Menu表的数据 * @param map * @param pageBean * @return */ public List<Map<String, Object>> listMenu(Map<String, String[]> map,PageBean pageBean)throws Exception{ String sql=" select * from t_easyui_menu where true"; String id=JsonUtils.getParamVal(map, "id"); if(StringUtils.isNotBlank(id)) { sql=sql +" and parentid ="+id; } else { sql=sql+" and parentid =-1"; } return super.executeQuery(sql, pageBean); } /** * {Menuid:1,....[]} * ->{id:1,....[]} * menu表的数据不符合easyui树形展示的数据格式 * 需要转换成easyui所能识别的数据格式 * @param map * @param reTreeNode * @throws Exception */ private void menu2TreeNode(Map<String, Object> map, TreeNode treeNode) throws Exception { treeNode.setId(map.get("Menuid").toString()); treeNode.setText(map.get("Menuname").toString()); treeNode.setAttributes(map); Map<String, String[]> jspMap=new HashMap<>(); jspMap.put("id", new String[] {treeNode.getId()}); this.listMenu(jspMap, null); List<Map<String, Object>> listMenu=this.listMenu(jspMap, null); List<TreeNode> treeNodeList=new ArrayList<>(); menuList2TreeNodeList(listMenu, treeNodeList); treeNode.setChildren(treeNodeList); } /** * [{Menuid:1,....[]},{Menuid:2,....[]}] * ->[{id:1,....[]},{id:2,....[]}] * @param mapList * @param treeNodeList * @throws Exception */ private void menuList2TreeNodeList(List<Map<String, Object>> mapList, List<TreeNode> treeNodeList)throws Exception { TreeNode treeNode =null; for (Map<String, Object> map : mapList) { treeNode =new TreeNode(); menu2TreeNode(map, treeNode); treeNodeList.add(treeNode); } }
javascript方法：
为了代码安全就单独创建了一个js文件，专门用来写javascript实现代码，也挺方便（在这里提醒一下各位一定要看清楚自己在jsp中给div层定义的id，并且铭记几个重要的方法，可以去官网就去官网复制，毕竟javascript不如html代码一样有快捷键提醒，敲错一个字母也能报错，并且错极为细节，心态不好的就容易炸心态，一定要仔仔细细检查，吃饭的家伙基础还是要打好用正确心态对待）。
$(function(){ $('#tt').tree({ url:'menuAction.action?methodName=treeMenu' , onClick:function(node){ var content = '<iframe scrolling="no" frameborder="0" src="'+node.attributes.menuURL+'" width="99%" height="99%"></iframe>'; if($('#myshow').tabs('exists',node.text)){ $('#myshow').tabs('select',node.text); }else{ $('#myshow').tabs('add',{ title:node.text, content:content, closable:true, tools:[{ iconCls:'icon-mini-refresh', handler:function(){ alert('refresh'); } }] }); } } }); })
从上述代码中大家也看到了，我也用了mvc的模式，所以需要配置MVC.xml文件，很简单的几句代码，最好单独给xml文件创一个文件夹放置它并且与javasrc包同级，如下图：
树形菜单和tab页面功能就告一段落了，现在来看easyui中的Layout布局。
三：easyui框架中layout布局使用
还是那句话，配合官网和apl开发最好。
首先我个人认为layout布局是easyui中非常简单蛮容易上手的布局，layout布局也是有五个区域（北区 north、南区 south、东区 east、西区 west 和中区 center）的。中间的区域面板是必需要有的，边缘区域面板是可选的。每个边缘区域面板可通过拖拽边框调整尺寸，也可以通过点击折叠触发器来折叠面板。layout布局也可以嵌套，因此用户可建立复杂的布局。与java swing中的BorderLayout布局管理器蛮像的。
首先来看看要实现的效果图：
1.创建layout布局
这是布局中的核心代码，给<div>标签添加”easyui-layout"的类ID
<div id="ht" class="easyui-layout" style="width:600px;height:400px;"> <div data-options="region:'north',title:'North Title',split:true" style="height:100px;"></div> <div data-options="region:'south',title:'South Title',split:true" style="height:100px;"></div> <div data-options="region:'east',title:'East',split:true" style="width:100px;"></div> <div data-options="region:'west',title:'West',split:true" style="width:100px;"></div> <div data-options="region:'center',title:'center title'" style="padding:5px;background:#eee;"></div> </div>
2.自适应的两种方法
2.1：在body内创建一个<div >通过添加属性fit
<div class="easyui-layout" data-options="fit:true"></div>
如果为true，那么布局组件将自适应于父容器，也就是说在使用body创建layout布局时，它就会自动适应到整个页面最大。false反之，但是false是fit属性的默认值
2.2：在bady内添加 class样式
<body class="easyui-layout"></body>
3.嵌套布局的使用
嵌套是什么模式相信大家都是明白的，就是一层套一层嘛，其实这里也差不多的，就是布局套布局层层镶嵌；注意一点，内部布局的西区面板是折叠的，layout布局中也有折叠布局可以用，collapsible就像自适应的fit属性一样，去判断是否就行了
<body class="easyui-layout"> <div data-options="region:'north'" style="height:100px"></div> <div data-options="region:'center'"> <div class="easyui-layout" data-options="fit:true"> <div data-options="region:'west',collapsed:true" style="width:180px"></div> <div data-options="region:'center'"></div> </div> </div> </body>
效果图就是这个样子
layout布局中常用属性就是这些个egion、 title、split、iconCls、collapsible、collapsed（true的时候折叠起面板）collapsible:false 是否显示折叠按钮，如果想了解更多可以去官网看看
今天就分享到这里，菜鸟一个多多包涵，谢谢大家观看！