jQuery를 EasyUI 레이아웃 - XP 스타일의 왼쪽 패널을 만들
정상적인 상황에서, 왼쪽에있는 Windows XP의 탐색기 파일 폴더, 패널 (패널) 몇 가지 일반적인 작업이 포함되어 있습니다. 이 튜토리얼은 XP 패널을 왼쪽으로 만드는 패널 (패널) 플러그인을 easyui하는 방법을 보여줍니다.
패널 (패널) 정의
우리는 작업의 수를 표시하는 일부 패널 (패널)이 패널 (패널)을 정의합니다. 각 패널 (패널) 적어도 접이식 / 전개 툴 버튼이 있어야합니다.
코드는 다음과 같이 :
<사업부 스타일 = "폭 : 200 픽셀, 높이 : 자동; 배경 : # 7190E0; 패딩 : 5px;"> <사업부 클래스 = "easyui 패널"제목 = "사진 작업"축소 = "진정한"스타일 = "너비 : 200 픽셀, 높이 : 자동; 패딩 : 10px;"> 슬라이드 쇼 <BR/>로보기 인화 주문 온라인 <BR/> 사진을 인쇄 </ DIV> <BR/> <사업부 클래스 = "easyui 패널"제목 = "파일 및 폴더 작업"축소 = "진정한"스타일 = "너비 : 200 픽셀, 높이 : 자동; 패딩 : 10px;"> 새 폴더 <BR/> 확인 웹 <BR/>에이 폴더를 게시 이 폴더를 공유하기 </ DIV> <BR/> <사업부 클래스 = "easyui 패널"제목 = "다른 장소"축소 붕괴 = "진정한"= "진정한"스타일 = "너비 : 200 픽셀, 높이 : 자동; 패딩 : 10px;"> 뉴욕 <BR/> 내 그림 <BR/> 내 컴퓨터 <BR/> 내 네트워크 환경 </ DIV> <BR/> <사업부 클래스 = "easyui 패널"제목 = "세부 사항"축소 = "진정한"스타일 = "너비 : 200 픽셀, 높이 : 자동; 패딩 : 10px;"> 내 문서 <BR/> 파일 폴더 <BR/> <BR/> 날짜 수정 : 2010 Oct.3rd </ DIV> </ DIV>
모양의 사용자 정의 패널 (패널)
우리는 / 패널 (패널) 헤더 배경 이미지와 붕괴를 변경 버튼 아이콘을 확장해야합니다,이보기 외관은 우리가 원하지 않는 것입니다주의하시기 바랍니다.
그것은 할 어려운 일이 아니다, 우리가해야 할 CSS의 일부를 다시 정의하는 것입니다.
.panel 바디 {
배경 : # f0f0f0;
}
.panel 헤더 {
배경 : #fff URL ( '이미지 / panel_header_bg.gif') 노 반복 오른쪽 상단;
}
.panel-도구 붕괴 {
배경 : 홈페이지 ( '이미지 / arrow_up.gif') 노 반복 0 픽셀의 -3px;
}
.panel는-도구 확장 {
배경 : 홈페이지 ( '이미지 / arrow_down.gif') 노 반복 0 픽셀의 -3px;
}
따라서, 사용 easyui 맞춤형 사용자 인터페이스는 매우 단순하다.