jQuery를 EasyUI 레이아웃 - 패널의 복잡한 레이아웃을 만들
패널 (패널)는 다양한 목적으로 사용자 지정 레이아웃을 만들 수 있습니다. 이 예에서, 우리는 패널 (패널) 및 레이아웃 (배치) 플러그인의 MSN 메시지 상자를 만드는 데 사용합니다.
우리는 패널의 영역에서 다수의 레이아웃 (레이아웃)를 사용합니다. 메시지 상자의 상단에서 우리는 쿼리 입력 상자를 배치하고, 오른쪽 사진에 그림을 배치합니다. 스플릿 속성을 설정하여 우리의 영역의 중간에 해당하는, 이러한 부분은 두 부분으로 절단하고, 사용자가 패널 영역의 크기를 변경할 수있다.
여기에 모든 코드는 다음과 같습니다
<사업부 클래스 = "easyui 패널"제목 = "복합 패널 레이아웃"iconCls = "아이콘 검색"축소 = "진정한"스타일 = "패딩 : 5px; 폭 : 500 픽셀, 높이 250 픽셀;"> <사업부 클래스 = "easyui 레이아웃은"= "true"로 맞> <사업부 영역 = "북쪽"국경 = "false"를 클래스 = "페이지 검색"> <레이블> 검색 </ 라벨> <입력> </ 입력> </ DIV> <사업부 영역 = "센터"국경 = "거짓"> <사업부 클래스 = "easyui 레이아웃은"= "true"로 맞> <사업부 영역 = "동쪽"국경 = "false"를 클래스 = "페이지 오른쪽"> <IMG SRC = "이미지 / msn.gif"/> </ DIV> <사업부 영역 = "센터"국경 = "거짓"스타일 = "테두리 : 1 픽셀 고체 #ccc;"> <사업부 클래스 = "easyui 레이아웃은"= "true"로 맞> <사업부 영역 = "남쪽"분할 = "true"를 경계 = "거짓"스타일 = "높이 : 60 픽셀;"> <텍스트 영역 스타일 = "테두리 : 0; 폭 : 100 %; 높이 : 100 %; 크기 조정 : 없음">. 안녕, 나는 easyui </ 텍스트 영역> </ DIV> <사업부 영역 = "센터"국경 = "거짓"> </ DIV> </ DIV> </ DIV> </ DIV> </ DIV> </ DIV> </ DIV>
우리는 그들이 사용자 인터페이스에 대한 매우 강력한 설계가 자바 스크립트 코드를 작성할 필요가 없다.