您的位置：首页 > 产品设计 > UI/UE

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

2010-08-27 05:01 204 查看

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

<body>

<div class="container">

<div class="span-24 last" id="Header">

<h2>RSS Feed Reader v0.2</h2>

</div>

<div id="result" class="span-15">

<p>Loading...</p>

</div>

<div class="span-9 last" id="SearchCol">

<div class="demo"></div>

</div>

<div class="span-24 last" id="Footer">

<div class="small">Website copyright © 2010 <a href="http://www.leptonation.com" class='category'>Leptonation</a>. All rights reserved.</div>

</div>

</div>

<script type="text/javascript" src="lib/jquery/jquery-1.4.2.min.js"></script>

<script type="text/javascript" src="lib/jquery/jquery-ui-1.8.4.custom.min.js"></script>

<script type="text/javascript" src="script/main.js"></script>

</body>

</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){
var content = '';
$(data.value.items).each(function(i, item){
content += '<h3><a href="#">' + item.title + '</a></h3>'
var permlink = '<p><a href="' + item.link + '">' + item.link + '</a></p>';
content += '<div>' + permlink + item.description + '</div>';
});
$('#result').empty();
$('#result').append(content);
setAccordion();
}

function startLoadRSS(){
$('#result').empty();
$('#result').append('<p>Loading...</p>');
var url = 'http://pipes.yahoo.com/pipes/pipe.run?_id=ef7e4474a18c07dd4e4b8a14c5d17269';
url += '&_render=json&url=';
url += 'http://leptonation.blog.163.com/rss';
$.ajax({
url: url,
dataType: 'jsonp',
jsonp: '_callback',
success: formatResult
});
}

function init(){
startLoadRSS();
}

init();

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

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

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航