이전 기사에서는 EasyUI를 사용하여 백엔드 페이지의 프레임 워크를 작성했습니다. 여기를 클릭하십시오. 이 섹션에서는 주로 EasyUI 기술을 사용하여 단순히 백엔드 메뉴를 구현합니다. 먼저 간단한 기능을 만들고 나중에 계속 풍요롭게 할 것입니다.
1. 왼쪽 메뉴를 구현하십시오
먼저 렌더링을보십시오.
"기본 작업"및 "기타 작업"을 클릭하여 메뉴 옵션을 전환 할 수 있습니다. 특정 옵션에서는 다른 연결을 클릭하면 오른쪽에 표시됩니다. 왼쪽의 메뉴를 먼저 만들어 봅시다.
왼쪽 메뉴에는 "카테고리 관리"와 "제품 관리"의 두 가지 주요 내용이 있습니다. 이전 섹션에서 배경 페이지의 프레임 워크는 inindex.jsp로 구축되어야한다는 것을 알고 있습니다. 이제이 두 하이퍼 링크를 만들어 Aindex.jsp의 해당 DIV에 넣어야합니다. 따라서 먼저 Webroot 폴더에 새 temp.jsp 파일을 임시 개발 파일로 만듭니다. 여기에 JSP를 작성하여 직접 측정 할 수 있기 때문입니다. 효과를 사용할 수 있으면 컨텐츠를 Aindex.jsp의 해당 위치에 복사하십시오.
temp.jsp 페이지는 다음과 같습니다.
<%@ page language = "java"import = "java.util.*"pageencoding = "utf-8"%> <! doctype html public "-// w3c // dtd html 4.01 전환 // en"> <html> <head> <%@ include public/head. {너비 : 200px; /*테두리 : 1px Solid Red;*/} #menu ul {List-Style : None; 패딩 : 0px; 여백 : 0px; } #menu ul li {Border-Bottom : 1px solid #fff; } #menu ul li a { /*태그를 먼저 블록 레벨 요소로 변환하여 너비와 내부 간격을 설정하기 위해 먼저* / 디스플레이 : 블록; 배경색 : #00A6AC; 색상 : #fff; 패딩 : 5px; 텍스트 결정 : 없음; } #menu ul Li A : 호버 {배경 색상 : #008792; } </style> </head> <body> <div id = "menu"> <ul> <li> <a href = "#"> 카테고리 관리 </a> <li> <a href = "#"> 제품 관리 </a> </ul> </div> </html>temp.jsp에는 Li로 캡슐화되어 Div에 배치 된 링크는 두 개뿐입니다. 위의 CSS는이 두 링크의 스타일을 설정 한 다음 Tomcat을 활성화하고 다음과 같이 효과를 테스트합니다.
이 두 하이퍼 링크를 만든 후 캡슐화 된 두 하이퍼 링크의 UL을 Aindex.jsp의 왼쪽 메뉴 컨텐츠의 디스플레이 위치에 복사하고 다음과 같이 간단히 수정합니다.
CSS 부품은 aindex.jsp의 헤드 태그로 직접 가져갈 수 있습니다. easyUi 가이 페이지이기 때문에 새 페이지로 점프하지 않기 때문에 HREF가 아닌 제목 속성이 포함 된 위의 A 태그를 살펴보십시오.이 페이지이기 때문에 오른쪽의 탭 탭에 클릭 된 디스플레이를 놓고 먼저 제목 속성에 점프 작업을 작성하고 나중에 변경하려고합니다. 다음으로 카테고리 관리를 클릭하여 오른쪽 탭에서 특정 범주의 기능을 나타냅니다.
2. 오른쪽의 탭 탭을 구현하십시오
왼쪽 메뉴 표시 줄을 클릭하여 오른쪽 탭을 팝업하는 기능을 실현하려면 JS 코드를 추가해야합니다. EasyUI를 사용한다는 아이디어는 다음과 같습니다. 먼저 하이퍼 링크를 클릭하고 하이퍼 링크의 이름을 얻습니다. 팝업 탭의 제목은 "카테고리 관리"와 같은 하이퍼 링크의 이름과 동일해야하므로; 그런 다음 이름 변경 탭이 이미 존재하는지 여부를 결정하고, 존재하는 경우 표시하고, 존재하지 않으면 작성하고, 표시 할 내용을 표시하십시오. JS 부분의 코드를 살펴 보겠습니다.
<script type = "text/javaScript"> $ (function () {$ ( "a [title]"). click (function () {var text = $ (this) .text (); var href = $ (this) .attr ( "title"); // 지금 당장 ( "#tt"). $ ( "#tt"). Tabs ( "select", text)} else {// 그렇지 않은 경우 새 탭을 만듭니다. URL 주소는 단지 신체 부위입니다. </스크립트> 이 JS 코드를 분석하겠습니다. 먼저 A 태그를 얻으십시오. 이 태그는 제목 속성이있는 태그 인 AT 제목 속성, 위의 "카테고리 관리"하이퍼 링크 인 다음 클릭에 다른 기능이 있습니다. 이 기능은 무엇을합니까? 먼저, 현재 링크의 이름, 즉 텍스트의 이름을 얻은 다음 제목 속성을 통해 URL을 가져옵니다 (제목 속성에 URL을 썼기 때문에). 다음 으로이 이름에 대한 옵션 (탭)이 있는지 확인하십시오. 있으면 해당 이름의 옵션이 표시되고 없으면 작성하십시오.
IF의 진술을 살펴 보겠습니다. 먼저 "#tt"를 사용하여 오른쪽에 jQuery 객체를 가져온 다음 탭 구성 방법을 호출하여 탭 개체를 가져옵니다. 있으면 true를 반환하고 그렇지 않으면 거짓을 반환합니다. 그렇다면 탭 ()의 두 매개 변수는 무엇을 의미합니까? 우선, 첫 번째 매개 변수는 메소드 이름이고 두 번째 매개 변수는 첫 번째 매개 변수 (메소드)의 해당 매개 변수입니다. 탭 ( "Exists", 텍스트)은 EasyUI의 존재 방법을 호출하는 것을 의미합니다. 매개 변수는 텍스트, 즉 이름 텍스트가있는 탭이 존재하는지 여부를 결정합니다. 마찬가지로 다음 탭 ( "Select", Text)은 표시 할 이름 텍스트가 표시된 탭을 표시하고 탭 ( "add", {})을 의미하며 새로 추가 된 탭의 일부 속성은 {}에 추가됩니다. 제목은 이름을 의미합니다. 나중에 페이지의 내용은 <iframe> 태그로 포장됩니다. 이 페이지는 직접 액세스 할 수 없으며 작업을 통해 리디렉션됩니다. 액션 이름에서 웹 -inf/category/query.jsp 페이지에 소개된다는 것을 알 수 있습니다. 페이지의 바디 태그에 우연히 무언가를 작성한 다음 왼쪽의 메뉴 표시 줄을 클릭하면 콘텐츠가 오른쪽 탭에 표시됩니다. 다음과 같이 :
마지막으로 코드를 Aindex.jsp에 여기에 넣으십시오.
<%@ page language = "java"import = "java.util.*"pageencoding = "utf-8"%> <! doctype html public "-// w3c // dtd html 4.01 전환 // en"> <html> <head> <%@ include public/head. {너비 : 60px; /*테두리 : 1px Solid Red;*/} #menu ul {List-Style : None; 패딩 : 0px; 여백 : 0px; } #menu ul li {Border-Bottom : 1px solid #fff; } #menu ul li a { /*태그를 먼저 블록 레벨 요소로 변환하여 너비와 내부 간격을 설정하기 위해 먼저* / 디스플레이 : 블록; 배경색 : #00A6AC; 색상 : #fff; 패딩 : 5px; 텍스트 결정 : 없음; } #menu ul Li A : 호버 {배경 색상 : #008792; }. $ ( "#tt"). Tabs ( "select", text)} else {// 그렇지 않은 경우 새 탭을 만듭니다. 그렇지 않으면 현재 태그 $ ( "#tt")로 전환하십시오. 탭 ( "add", {title : true : content : '<iframe src = "send_category_query.action"0. 주소는 단지 신체 부분입니다. }); </script> </head> <body> <div data-options = "지역 : 'North', 제목 : 'Yigou Backend Management에 오신 것을 환영합니다. data-options = "iconcls : 'icon-save'"> <ul> <li> <a href = "#"> 카테고리 관리 </a> <li> <a href = "#"> 제품 관리 </a> </ul> </div> <div data-options = "iconcls : 'iCon-Reload'"> <li> < <li> <a href = "#"> 제품 관리 </a> </a> </a> </ul> </div> </div> </div> <div data-options = "지역 : '중 미래 (현재 운영 체제의 유형, 현재 프로젝트의 도메인 이름, 하드웨어 관련 구성 또는 디스플레이 보고서 </div> </div> </div> </body> </html> 분명히 코드는 추출되지 않았으며 CSS와 JS는 동일한 JSP 페이지에서 혼합됩니다. 문제가되지 않습니다. 나중에 함께 추출 될 것입니다.
지금까지 EasyUi 메뉴의 구현을 완료했습니다. 여기서 구현 방법 만 완료했으며 특정 요구 사항에 따라 특정 표시된 컨텐츠가 개선됩니다.
전체 프로젝트의 소스 코드 다운로드 주소 : //www.vevb.com/article/86099.htm
원본 주소 : http://blog.csdn.net/eson_15/article/details/51297705
위는이 기사의 모든 내용입니다. 모든 사람의 학습에 도움이되기를 바랍니다. 모든 사람이 wulin.com을 더 지원하기를 바랍니다.