1. Home
  2. jQuery를 EasyUI 응용 프로그램 - RSS 피드 리더 만들기

최고의 jQuery를 EasyUI 응용 프로그램 - RSS 피드 리더 만들기 튜토리얼 2024년, 이 튜토리얼에서는 jQuery를 EasyUI 예제를 다운로드,를 배울 수 있습니다.

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를 '선택');
		}
	}
});

jQuery를 EasyUI 예제를 다운로드

jeasyui-app-rssreader.zip

핫 튜토리얼

Contact US

jQuery를 EasyUI 응용 프로그램 - RSS 피드 리더 만들기
10/30