YUI 框架学习笔记， RSS 阅读器 - 2
上一篇，用 YUI 3 写了个初稿 ，接着我尝试变更代码载入的时间，也尝试实现自动搜索博文中的关键字（这个最后做不出来），我就分别几篇来分享这学习过程，结果放了在这里。首先本篇是，我用 JQuery 把上次的 RSS 阅读器重做。
JQuery 版本在这里，以下是 HTML 代码。
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
2 "http://www.w3.org/TR/html4/loose.dtd">
3 <html xmlns="http://www.w3.org/1999/xhtml">
4 <head>
5 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
6 <title>RSS Feed Reader V0.2</title>
7 <link type="text/css" href="css/screen.css" rel="stylesheet" media="screen, projection" />
8 <link type="text/css" href="css/pepper-grinder/jquery-ui.css" rel="Stylesheet" />
9 </head>
10 <body>
11 <div class="container">
12 <div class="span-24 last" id="Header">
13 <h2>RSS Feed Reader v0.2</h2>
14 </div>
15 <div id="result" class="span-15">
16 <p>Loading...</p>
17 </div>
18 <div class="span-9 last" id="SearchCol">
19 <div class="demo"></div>
20 </div>
21 <div class="span-24 last" id="Footer">
22 <div class="small">Website copyright © 2010 <a href="http://www.leptonation.com" class='category'>Leptonation</a>. All rights reserved.</div>
23 </div>
24 </div>
25 <script type="text/javascript" src="lib/jquery/jquery-1.4.2.min.js"></script>
26 <script type="text/javascript" src="lib/jquery/jquery-ui-1.8.4.custom.min.js"></script>
27 <script type="text/javascript" src="script/main.js"></script>
28 </body>
29 </html>
2 "http://www.w3.org/TR/html4/loose.dtd">
3 <html xmlns="http://www.w3.org/1999/xhtml">
4 <head>
5 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
6 <title>RSS Feed Reader V0.2</title>
7 <link type="text/css" href="css/screen.css" rel="stylesheet" media="screen, projection" />
8 <link type="text/css" href="css/pepper-grinder/jquery-ui.css" rel="Stylesheet" />
9 </head>
10 <body>
11 <div class="container">
12 <div class="span-24 last" id="Header">
13 <h2>RSS Feed Reader v0.2</h2>
14 </div>
15 <div id="result" class="span-15">
16 <p>Loading...</p>
17 </div>
18 <div class="span-9 last" id="SearchCol">
19 <div class="demo"></div>
20 </div>
21 <div class="span-24 last" id="Footer">
22 <div class="small">Website copyright © 2010 <a href="http://www.leptonation.com" class='category'>Leptonation</a>. All rights reserved.</div>
23 </div>
24 </div>
25 <script type="text/javascript" src="lib/jquery/jquery-1.4.2.min.js"></script>
26 <script type="text/javascript" src="lib/jquery/jquery-ui-1.8.4.custom.min.js"></script>
27 <script type="text/javascript" src="script/main.js"></script>
28 </body>
29 </html>
其中第 15 行的 div "result" 就是用来放置 RSS 的。 全部 script tag 我放在最后。我用了 JQuery UI 的 Accordion。没什么特别。
接着以下是 JS 代码。
1 function setAccordion(){
2 $("#result").accordion({
3 collapsible: true,
4 active: false,
5 autoHeight: false
6 });
7 }
8
9 function formatResult(data){
10 var content = '';
11 $(data.value.items).each(function(i, item){
12 content += '<h3><a href="#">' + item.title + '</a></h3>'
13 var permlink = '<p><a href="' + item.link + '">' + item.link + '</a></p>';
14 content += '<div>' + permlink + item.description + '</div>';
15 });
16 $('#result').empty();
17 $('#result').append(content);
18 setAccordion();
19 }
20
21 function startLoadRSS(){
22 $('#result').empty();
23 $('#result').append('<p>Loading...</p>');
24 var url = 'http://pipes.yahoo.com/pipes/pipe.run?_id=ef7e4474a18c07dd4e4b8a14c5d17269';
25 url += '&_render=json&url=';
26 url += 'http://leptonation.blog.163.com/rss';
27 $.ajax({
28 url: url,
29 dataType: 'jsonp',
30 jsonp: '_callback',
31 success: formatResult
32 });
33 }
34
35 function init(){
36 startLoadRSS();
37 }
38
39 init();
2 $("#result").accordion({
3 collapsible: true,
4 active: false,
5 autoHeight: false
6 });
7 }
8
9 function formatResult(data){
10 var content = '';
11 $(data.value.items).each(function(i, item){
12 content += '<h3><a href="#">' + item.title + '</a></h3>'
13 var permlink = '<p><a href="' + item.link + '">' + item.link + '</a></p>';
14 content += '<div>' + permlink + item.description + '</div>';
15 });
16 $('#result').empty();
17 $('#result').append(content);
18 setAccordion();
19 }
20
21 function startLoadRSS(){
22 $('#result').empty();
23 $('#result').append('<p>Loading...</p>');
24 var url = 'http://pipes.yahoo.com/pipes/pipe.run?_id=ef7e4474a18c07dd4e4b8a14c5d17269';
25 url += '&_render=json&url=';
26 url += 'http://leptonation.blog.163.com/rss';
27 $.ajax({
28 url: url,
29 dataType: 'jsonp',
30 jsonp: '_callback',
31 success: formatResult
32 });
33 }
34
35 function init(){
36 startLoadRSS();
37 }
38
39 init();
首先用 AJAX，设置 dataType 为 JSONP。callback 的字串要改，上一篇也提到。 成功的话，就 formatResult。formatResult 唯一的特别地方是，第11行 data.value.items，这个是 JSON 档格式，下一篇博文，我会谈及 RSS 的格式，以及换成 JSON 之后的格式。
DOM 变化后，我才呼叫 setAccordion 加上 Accordion 控件。这东西有点多余，而且 Accordion 不适合放那么长的文章。我玩玩而已。
