jQuery를 EasyUI 응용 프로그램 - RSS 피드 리더 만들기
이 튜토리얼에서, 우리는 jQuery를 EasyUI 프레임 워크에 의해 RSS 리더를 만듭니다.
우리는 다음과 같은 플러그인을 사용합니다 :
- 레이아웃 : 사용자 인터페이스 응용 프로그램을 만듭니다.
- 데이터 그리드 : 디스플레이 RSS 피드 목록입니다.
- 나무 : 디스플레이 공급 채널.
1 단계 : 레이아웃 (레이아웃)를 작성
& 중위, 몸 클래스 = "easyui 레이아웃"한다 <사업부 영역 = "북쪽"국경 = "false"를 클래스 = "rtitle"> jQuery를 EasyUI RSS 리더 데모 </ DIV> <사업부 영역 = "서쪽"제목 = "채널 트리"분할 = "true"를 경계 = "거짓"스타일 = "너비 : 200 픽셀, 배경 : #EAFDFF;"> <UL 한 id = "t-채널"URL = "데이터 / channels.json"> </ UL> </ DIV> <사업부 영역 = "센터"국경 = "거짓"> <사업부 클래스 = "easyui 레이아웃은"= "true"로 맞> <사업부 영역 = "북쪽"분할 = "true"를 경계 = "거짓"스타일 = "높이 : 200 픽셀"> <표 아이디 = "DG" URL = "get_feed.php"국경 = "false"를 rownumbers = "true"로 적합 = "true"를 fitColumns = "true"를 singleSelect = "진정한"> <THEAD> <TR> <목 필드 = "제목"너비 = "100"> 제목 </ 일> <목 필드 = "설명"너비 = "200"> 설명 </ 일> <목 필드 = "pubDate의"너비 = "80"> <번째 /> 날짜를 게시 </ TR> </ THEAD> </ 테이블> </ DIV> <사업부 영역 = "센터"국경 = "거짓"스타일 = "오버 플로우 : 숨겨진"> <iframe이 한 id = "CC"스크롤 = "자동"FRAMEBORDER = "0"스타일 = "너비 : 100 %; 높이 : 100 %"> </ iframe> 해당 </ DIV> </ DIV> </ DIV> 에서 & lt; / body & gt;
2 단계 : 데이터 그리드 (데이터 그리드) 이벤트를 처리
여기에서 우리는 사용자에 의해 트리거 이벤트의 일부를 처리해야합니다.
$ ( '# DG').에서 Datagrid ({
onSelect를 : 기능 (인덱스, 행) {
. $ ( '#의 참조') ATTR ( 'SRC', row.link);
},
onLoadSuccess : 함수 () {
VAR 행 = $ (이) .datagrid ( 'getRows');
경우 (rows.length) {
$ (이) .datagrid ( 'selectRow', 0);
}
}
});
이 예에서는 첫 번째 행의 사용 'onLoadSuccess'일정을 선택 피드의 내용을 표시하는 'onSelect를'이벤트를 이용한다.
3 단계 : 메뉴 트리 (나무) 처리 이벤트
메뉴 트리 (나무) 데이터가로드되었을 때, 우리는 첫 번째 리프 노드를 선택 노드를 선택하기 위해 '선택'방법을 호출해야합니다. 우리가 값에 해당하는 'URL을'얻을 수 있도록 사용 'onSelect를'이벤트는, 선택한 노드를 얻을 수 있습니다. 마지막으로, 우리는 데이터 그리드 (DataGrid에) 피드 데이터의 목록을 새로 고칠 수있는 '로드'메서드를 호출합니다.
$ ( '#의 T-채널'). 트리 ({
onSelect를 : 기능 (노드) {
var에 URL = node.attributes.url;
$ ( '# DG').에서 Datagrid ( '로드', {
URL : URL
});
},
onLoadSuccess : 기능 (노드, 데이터) {
경우 (data.length입니다) {
VAR ID가 = 데이터 [0] .children [0] .children [0] .ID;
VAR N = $ (이) .tree (ID를 '발견');
$ (이) .tree (n.target를 '선택');
}
}
});