배경 개발자는 프런트 엔드 UI 인터페이스를 잘하지 않고, 작은 소프트웨어 회사 개발자들은 기존 구성 요소, 완전한 사용자 인터페이스를 재사용, 오픈 소스의 UI 프레임 워크를 사용할 수 있습니다, 풀 타임 예술가을 게시하지 않습니다. EasyUI이의 jQuery UI 플러그인의 모음을 기반으로, 개발자들이 쉽게 웹 페이지를 구축 할 수 있습니다.
공식 주소 : http://www.jeasyui.com/
A, 인용 EasyUI
공식 웹 사이트는 EasyUI 구성 요소 JQuery와-easyui-1. *. *. 우편 번호, 프로젝트 가져 오기 로케일 폴더, 테마 폴더 jquery.easyui.min.js, jquery.min.js 파일을 다운로드합니다.
둘째, 시스템 홈 페이지의 사용자는, 예를 들어, EasyUI를 사용
1) 사용자 로그인 시스템, 홈 인터페이스
2) home.jsp 코딩 디자인
<% 페이지 언어 @ = "자바"수입 = "java.util의 *."pageEncoding = "UTF-8"%>
<DOCTYPE html로의 PUBLIC "- // W3C // DTD XHTML 1.0 과도 // EN" "HTTP! : //www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<HTML의 xmlns = 'http://www.w3.org/1999/xhtml'>
<head>
<메타 HTTP-당량 = "Content-Type을"내용 = "text / html과; 문자셋 = UTF-8"/>
<제목>管理系统</ 제목>
<링크 확인해 = "스타일 시트"HREF = "플러그인 / easyui / 테마 / icon.css"/ >
<링크 확인해 = "스타일 시트"HREF = "플러그인 / easyui / 테마 / 기본 / easyui.css"/>
<링크 확인해 = "스타일 시트"HREF = "CSS / home.css"/>
<스크립트 유형 = "텍스트 / 자바 스크립트"SRC = "플러그인 / easyui / jquery.min.js"> </ script>
<스크립트 유형 = "텍스트 / 자바 스크립트"SRC = "플러그인 / easyui / jquery.easyui.min.js" > </ script>
<스크립트 유형 = "텍스트 / 자바 스크립트"SRC = "플러그인 / easyui / 로케일 / easyui - 랭 zh_CN.js"> </ script>
<스크립트 유형 = "텍스트 / 자바 스크립트"SRC = "JS / pathurl.js"> </ script>
<스크립트 유형 = "텍스트 / 자바 스크립트"SRC = "JS / home.js? V = 1.01"> </ script>
<스크립트 유형 = "텍스트 / 자바 스크립트"SRC = "JS / head.js"> </ script>
</ head>
<- $ {는 userName}! ->
<BODY 클래스 = "easyui 레이아웃"스타일 = "오버 플로우-Y : 숨겨진"스크롤 = "아니오">
<입력 ID = "logUser" = "숨겨진"값 TYPE = "$ {}의 userName"/>
<입력 ID = "userNotice"TYPE = "숨겨진"값 = "$ {} userNotice"/>
<DIV 지역 = "북쪽"분할 = "true"를 국경 = "거짓"스타일 = "오버 플로우 : 숨겨진; 높이 : 35px;
배경 : 홈페이지 (이미지 / header.jpg) #의 7f99be 반복-X 센터 50 %;
라인 높이 : 30 픽셀, 색상 : #fff; 폰트 패밀리 : 굴림,宋体">
<스팬 스타일 ="패딩 왼쪽 : 5px; 폰트 사이즈 : 18px; ">管理系统</ SPAN>
<스팬 스타일 ="플로트 : 오른쪽; 패딩 오른쪽 : 20 픽셀; 폰트 사이즈 : 18px 「클래스 = "헤드">
<A HREF = "자바 스크립트 : 무효 (0)"ID = "menub"클래스 = "easyui-menubutton"
데이터 옵션 = '메뉴'#의 userfunc 'iconCls '아이콘-userMgr' "> $ {는 userName} </a>를
</ SPAN>
</ DIV>
<DIV 지역 ="남쪽 "분할 ="진정한 "스타일 ="높이 : 30 픽셀; 배경 : #의 D2E0F2; ">
<DIV 클래스 ="바닥 글 "> 저작권 © 2010년에서 2017년까지 시작, 모든 권리 보유. </ DIV>
</ DIV>
<DIV 지역 ="서쪽 "숨기기 ="true "로
ID = "서쪽"> <DIV ID = "menunav"클래스 = "easyui - 아코디언"적합 = "true"를 국경 = "거짓">
<! -导航内容->
</ DIV>폭 : 300 픽셀; 높이 : 150 픽셀; 패딩 : 5px;
<DIV 클래스 ="easyui 레이아웃이> = "true"를 맞게 "
<DIV ID = "mainPanle"지역 = "센터"스타일 = "배경 : #eee, 오버 플로우-Y : 숨겨진">
<DIV ID는 = "탭"클래스 = "easyui 탭이"적합 = "true"를 국경 = "거짓 ">
<DIV 제목 ="首页"스타일 ="패딩 : 20 픽셀; 오버 플로우 : 숨겨진; 색상 : 블루; ">
<H1 스타일 ="글꼴 - 크기 : 20 픽셀; " = "센터"> 정렬欢迎使用管理系统</ H1>
</ div>
</ div>
</ div>
<! -修改密码窗口->
<= "easyui 윈도우"DIV ID = "w"클래스 제목 = "修改密码"축소 = "false"를 최소화 가능 = "false"를
최대화 = "false"를 아이콘 = "아이콘-저장"스타일 = "너비 : 300 픽셀, 높이 : 150 픽셀; 패딩 : 5px;
배경 : #fafafa; ">
<테이블의 cellpadding = 3>
<DIV 지역 = "센터"국경 = "거짓"스타일 = "패딩 : 10px; 배경 : #fff; 국경 : 1 픽셀의 고체 #ccc;">
</ DIV>
<TR>
<TD>旧密码</ TD>
<TD> <입력 ID = "txtOldPass"TYPE = "비밀번호"클래스 = "easyui - 텍스트 박스"/> </ TD>
</ TR>
<TR>
<TD >新密码</ TD>
<TD> <입력 ID = "txtNewPass"TYPE = "비밀번호"클래스 = "easyui - 텍스트 박스"/> </ TD>
</ TR>
<TR>
<TD>确认密码< / TD>
<TD> <입력 ID = "txtRePass"TYPE = "비밀번호"클래스 = "easyui - 텍스트 박스"/> </ TD>
</ TR>
</ 테이블>
<DIV 지역 = "남쪽"국경 = "거짓"스타일 = "텍스트 정렬 : 오른쪽; 높이 : 30 픽셀, 라인 - 높이 : 30 픽셀;"> <A ID = "btnEp"클래스 = "easyui-하는 LinkButton"아이콘 = " 아이콘-OK "HREF ="자바 스크립트 : 무효 (0) ">确定</A> <ID ="btnCancel "클래스 ="easyui-하는 LinkButton "아이콘 ="아이콘-취소 "HREF ="자바 스크립트 : 공극 (0) ">取消</A> </ div>
</ div>
</ div>
<div ID ="mm "클래스 ="easyui 메뉴 "스타일 ="폭 : 150 픽셀; ">
<div ID ="mm-tabupdate ">刷新</ div>
<div 클래스 ="메뉴 ~ 9 "> </ div>
<div ID ="mm-tabclose ">关闭</ div>
<div ID ="mm-tabcloseall "> 모두 닫기 </ DIV>
<DIV = ID"mm-tabcloseother "> 모두 닫습니다 제외하고 </ DIV>
<DIV 클래스 ="9 월에서 메뉴 "> </ DIV>
<DIV ID =" mm-tabcloseright "> 현재 페이지 </ div> 근접 괜찮
<div ID ="mm-tabcloseleft "> 모두 닫 현재 페이지의 좌측 </ div>
<div 클래스 = "메뉴 ~ 9"> </ div>
<div ID = "mm 출구">退出</ div>
</ div>
<div ID = "userfunc"스타일 = "폭 : 150 픽셀;">
< 사업부 ID는 = "editpass"데이터 옵션 = "iconCls : '아이콘 편집'">修改密码</ DIV>
<DIV ID = "loginOut"데이터 옵션 = "iconCls : '아이콘 스톱'">注销</ DIV>
</ DIV>
</ BODY>
</ HTML>
3) easyUI 성분에 따라, 기능 메뉴 UI 쓰기
$ (함수 () {
InitLeftMenu ();
tabClose ();
tabCloseEven ();
});
//初始化左侧菜单
기능 InitLeftMenu () {
$ ( "#의 menunav") 아코디언 ({.
애니메이션 : 거짓
});
$ 아약스 ({
URL : "사용자 / getusermenu.do"
유형 : "POST",
dataType와 "JSON",
성공 : 기능 (데이터) {
을 console.log ( "菜单数据:"+ JSON.stringify (데이터) )
$ .each (data.menus 함수 (I, n)이 {
var에의 menulist = '';
의 menulist + = '<UL>';
$ .each (n.menus 함수 (J, O) {
의 menulist + = '<LI> <div> <A REF = "'
+ O.
VAR menuId와 = $ (이) .attr ( "REF");
addTab (tabTitle, URL);
$ ( 'easyui - 아코디언 리 DIV.') removeClass ( "선택.");
$ (이) .parent ( "선택") () addClass.;
}) 마우스를 (함수 () {.
$ (이) .parent () addClass ( "마우스 오버").
}, 함수 () {
$ (이) .parent () removeClass ( "마우스 오버").
});
//选中第一个
. VAR 패널 = $ ( '#의 menunav') 아코디언 ( '패널');
VAR의 t는 패널 = [0]을 .panel ( '옵션') 표제.;
$ ( '#의 menunav') 아코디언 (t '를 선택합니다.');
}
});
}
//添加选项卡
기능 addTab (자막, URL) {
경우 (! $ ( '# 탭'). 탭 ( '존재', 자막)) {
$ ( '# 탭'). 탭 ( '추가'
)}
다른 {}
탭 ( 'SELECT', 자막);) $ ( '# 탭'
$ ( '#의 tabupdate-mm')의 Click ();
}
tabclose ();
}
// 만들기를 클릭하십시오 메뉴 열기 프레임
함수 createFrame (URL) {
var에 S = '<iframe을 스크롤 = "자동"FRAMEBORDER = "0"SRC = "'+ URL
+ '"스타일 = "폭 : 100 % 신장 100 %;"> </ iframe을> ';
; S를 반환
}
탭 종료 //
함수 tabclose () {
/ * 더블 탭이 탭 * /
$ DblClick (함수 () {( "내부 탭이.").
(var에 자막 = $를 .. 다음은이) .children ( "밀폐 식-탭") 텍스트 ();
. $ ( '# 탭') 탭 ( '닫기', 자막);
})
/ * * 바인딩 오른쪽 / 탭은
$ ( ". 탭 - 내부" ). 바인드 ( '의 ContextMenu', 기능 (전자) {
$ ( '# mm') 메뉴 ( '쇼', {.
왼쪽 : e.pageX,
최고 : e.pageY을
});
VAR 자막 = $ (이) .children ( "탭 클로우즈.") 텍스트 ().;
. $ ( '# mm')의 데이터 ( "currtab"자막);
$ ( '# 탭') 탭 ( '선택'자막).;
false를 반환;
});
}
//绑定右键菜单事件
기능 tabCloseEven () {
//刷新
$ ( '# mm-tabupdate')을 클릭 (함수 () {.
VAR currTab = $ ( '# 탭') 탭 () 통해 getSelected. ';
var에 URL = $ (currTab.panel ( '옵션') 내용.) .attr ( 'SRC');
$ ( '# 탭') 탭 ( '갱신', {.
탭 : currTab,
옵션 : {
내용 :
var에 currtab_title = $ ( '# mm')를 데이터 ( "currtab");
$ ( '# 탭') 탭 ( '닫기', currtab_title).
})
모두 닫습니다 //
$ ( '# 전월 -tabcloseall '.)을 클릭 (함수 () {
$ ('내부 경간 탭. ') 각 (함수 (I, N-) {.
VAR = $ T (N-)는 .text ();
$ ('# 탭 ') .tabs (T '닫기');
})
)};
//이 TAB보다 현재 기타를 닫습니다
.) $ ( '#의 tabcloseother-mm'를 클릭 (함수 () {
$ ( '#의 tabcloseright-mm') .click ();
$ ( '#의 tabcloseleft-mm')을 클릭 ();
});
탭의 현재를 잘 닫습니다 //
$ {( '#의 tabcloseright-mm')을 클릭 (함수 (.)
VAR = $ nextAll ( '.tabs 선택된') nextAll ();
경우 (nextall.length == 0) {
$ .messager.alert가 ( '메시지', '오프', '오류');
$ ( "# mm-종료"). ((클릭 기능) {messager.alert는 ( '오프', '오류'메시지 ');
false로 반환;
}
nextall.each (함수 (I, n)은 {
VAR의 t = $. (여기서 n '은 당량 (0) 스팬'$ ()) 텍스트 ()
. $ ( '# 탭')의 탭 ( '확대' , t)
});
false를 반환;
});
//关闭当前左侧的탭
. $ ( '# mm-tabcloseleft')을 클릭 (함수 () {
VAR prevall = $ () prevAll () 탭이 선택된. '].
만약 (prevall.length == 0) {
false를 반환
}
prevall.each를 (함수 (I, n)은 {
'당량 (0) 기간은', N $ ()) 텍스트를 (); VAR t = $ (.
$ ( '# 탭') 탭. (, t '확대')
)};
false를 반환;
});
//退出
$ ( '# mm') 메뉴 ( '숨기기.');
})
}
4) 개체 데이터 형식 메뉴 JSON
{ "메뉴": [{ "아이콘"널 "menuId와": "A", "MenuName 하" "机构 管理", "메뉴"[{ "menuId와" "A1", "MenuName 하" "部门机构 ","parentId ":"A ","menuUrl ":"부서 / index.do ","serialNo "널"아이콘 "널}]}, {"아이콘 ""아이콘 - 관련 "," menuId와 ":"H ","MenuName 하 ""系统 管理 ","메뉴 "[{"menuId와 ":"H1 ","MenuName 하 ""用户 管理 ","parentId ":"H ","menuUrl " "시스템 / 사용자 / index.do", "serialNo"널 (null), "아이콘" "아이콘 - 개요"}, { "menuId와": "H2", "MenuName 하": "角色 管理", "parentId" "H", "menuUrl": "시스템 / 역할 / 인덱스입니다.","serialNo을 "널"아이콘 ""아이콘-개요 "}, {"menuId와 ":"H3 ","MenuName 하 ""菜单 管理 ","parentId ":"H "를"menuUrl " "시스템 / 메뉴 / index.do", "serialNo"널 (null), "아이콘" "아이콘 - 개요"}, { "menuId와": "H4", "MenuName 하": "岗位 成员", "parentId" " H ","menuUrl ""시스템 / rolemember / index.do ","serialNo "널을"아이콘 "널}, {"menuId와 ":"H5 ","MenuName 하 ""系统 日志 ","parentId ":"H ","menuUrl ""시스템 / / index.do ","로그 serialNo "널"아이콘 ""아이콘-개요 "}, {"menuId와 ":"H6 ","MenuName 하 " "数据 字典", "parentId" "H ","menuUrl ""시스템 / PARAM / index.do ","serialNo "널"아이콘 ""아이콘 - 관련 "}]}]}
세, API 설명서
1) 공식 웹 사이트 구성 요소 (영어) 주소 : http://www.jeasyui.com/documentation/index.php#
API 문서의 2) jQuery를 EasyUI 공식 중국어 버전 다운로드 주소 : HTTP : //download.csdn.net/album/detail/343