YUI 框架学习笔记， RSS 阅读器 - 2

时间：2010-08-27 来源：Lepton

上一篇，用 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>

其中第 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();

首先用 AJAX，设置 dataType 为 JSONP。callback 的字串要改，上一篇也提到。成功的话，就 formatResult。formatResult 唯一的特别地方是，第11行 data.value.items，这个是 JSON 档格式，下一篇博文，我会谈及 RSS 的格式，以及换成 JSON 之后的格式。

DOM 变化后，我才呼叫 setAccordion 加上 Accordion 控件。这东西有点多余，而且 Accordion 不适合放那么长的文章。我玩玩而已。