728x90
728x170
- RSS(Really Simple Syndication)란, 사전저긍로 '초간편 배급(배포)'이라는 의미를 가지고 있음.
- 자주 업데이트되는 뉴스나 신문 기사 내용을 사용자에게 쉽게 배포하기 위해 만들어진 XML 기반의 배급 포맷.
- 크로스 도메인이란 도메인이 서로 다를 경우에 정보 교환을 하지 못하도록 한 보안 정책을 의미하며, 이를 해결할 수 있는 방법으로는 구글에서 제공하는 Google Feed API link(데이터 전환 전송 기능)을 이용하는 것이 있음.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85 |
<!-- 문단 태그 영역 -->
<style type="text/css">
/*기본 세팅*/
*{margin:0; padding:0;}
li{list-style:none;}
body{font:12px Margun Gothic, "맑은고딕", gulim, "굴림", sans-serif; color:#333; padding-top:20px;}
h1,h2,h3,h4,h5,h6{font-size:100%; font-weight:normal;}
a{color:#333; text-decoration:none; outline:none;}
h1{font-size:2em; text-align:center; margin-bottom:10px; color:#c00;}
/*탭 메뉴 디자인*/
#news_wrap{width:380px; margin:0 auto; background-color:#FFF url("images/rss_bg.gif") 0 0 repeat-x;}
#news_wrap li{hieght:25px; line-height:25px; position:relative;}
#news_wrap li span{position:absolute; top:0; right:3px;}
#news_wrap li a{display:block; width:210px; white-space:nowrap; overflow:hidden;
text-overflow:ellipsis; padding-left:15px; background:url("images/bullet.gif") 5px 10px no-repeat;}
#news_wrap h2{float:left; padding-right:3px; margin-bottom:10px;}
#news_list{clear:both;}
/*비활성화 탭 버튼 모양*/
#news_wrap h2 a{
display:inline-block; padding:8px 10px;
border:1px solid #aaa;
border-bottom:none;
border-radius:5px 5px 0 0;
background:#ccc;
}
/*비활성화 탭 버튼 모양*/
#news_wrap h2 a.on{background-color:#fff; font-weight:bold;}
</style>
<body>
<h1>닷컴</h1>
<div id="news_wrap">
<h2> <!-- 초기에 첫 번째 버튼에만 class="on"이 포함되어 있음 -->
<a href="http://............/www_section_rss.xml" class="on">오늘의 주요 뉴스</a>
</h2>
<h2>
<a href="http://........./ent.xml">엔터테인먼트</a>
</h2>
<h2>
<a href="http://......../sports/index.xml">스포츠</a>
</h2>
<ul id="news_list">
</ul>
</div>
</body>
<!-- 메서드 적용 -->
<script type="text/javascript">
$(function(){
// 변수 g에 크로스 도메인의 XML 데이터를 요청해 올 수 있도록 구글 주소 저장
var g="https://ajax.googleapis.com/ajax/services/feed/load?v=2.0&num=10&callback=?&q=";
$("#news_wrap h2 a").on("click", function(e){
e.preventDefault(); // <a> 태그의 링크 차단
$("#news_wrap h2 a").removeClass("on"); // <a>의 class 속성값 "on" 삭제
$(this).addClass("on"); // click 이벤트를 등록한 <a> 태그 중 클릭한 <a>에 class="on" 생성
$.ajax({
url:g+$(this).attr("href"), // 클릭한 택 버튼에 XML 데이터 경로 주소를 가져옴.
dataType: "json", // 요청할 데이터의 타입
success: function(data){ // 성공적으로 요청한 데이터를 가져오면 매개 변수 data에 변화된 JSON 데이터가 저장됨.
$("#news_list").empty(); // <ul>의 하위 요소 모두 제거
// console.log(data.responseData.feed.entries);
$.each(data, responseData.feed.entries, function(i, d){
// 객체의 개수만큼 함수의 실행문이 반복하여 실행됨.
// 이때 매개 변수 i에는 객체의 인덱스 값이 할당되고, d에는 객체가 순서대로 할당됨.
if(i==5) return false; // 인덱스 값이 5일 때 강제 종료함.
var title=d["title"]; // title 키의 값을 가져옴.
var date=new Date(d["publishedDate"]); // 뉴스 작성 날짜의 특정 날짜 객체를 생성함.
// 작성한 년-월-일 형식으로 변수 m에 저장
var m=date.getFullYear()+"-"+(date.getMonth()+1)+"-"+date.getDate();
var lk=d["link"];
// 앞서 구해온 데이터를 이용해 정보 목록 태그를 생성함.
$("#news_list").append('<li><a href="'+lk+'"target="_blank">'+title+'</a><span>'+m+'</span></li>');
}); // $.each 메서드 종료
} // success: function 종료
}); // $.ajax() 메서드 종료
}); // 이벤트 on 메서드 종료
$("#news_wrap h2 a").eq(0).click(); // 최초 첫 번째 탭 버튼을 강제로 발생시킴.
}); // $(function(){...}) 종료
</script> |
cs |
내용 출처 : Do It! 자바스크립트+제이쿼리 입문 (정인용 지음, 이지스퍼블리싱)
728x90
그리드형(광고전용)
