创建RSS提要阅读器

使用教程 » Creating a RSS Feed Reader

在本教程中，我们将使用jQuery EasyUI框架创建一个rss阅读器。

演示案例

我们将使用以下插件:

layout: 创建应用程序用户界面。
datagrid: 显示rss提要列表。
tree: 显示提要通道。

步骤一: 创建布局

<body class="easyui-layout">
	<div region="north" border="false" class="rtitle">
		jQuery EasyUI RSS阅读器演示
	</div>
	<div region="west" title="Channels Tree" split="true" border="false" style="width:200px;background:#EAFDFF;">
		<ul id="t-channels" url="data/channels.json"></ul>
	</div>
	<div region="center" border="false">
		<div class="easyui-layout" fit="true">
			<div region="north" split="true" border="false" style="height:200px">
				<table id="dg"
                       url="get_feed.php" border="false" rownumbers="true"
                       fit="true" fitColumns="true" singleSelect="true">
					<thead>
						<tr>
							<th field="title" width="100">title</th>
							<th field="description" width="200">Description</th>
							<th field="pubdate" width="80">Publish Date</th>
						</tr>
					</thead>
				</table>
			</div>
			<div region="center" border="false" style="overflow:hidden">
				<iframe id="cc" scrolling="auto" frameborder="0" style="width:100%;height:100%"></iframe>
			</div>
		</div>
	</div>
</body>

步骤二: 处理datagrid的事件

此时，我们需要处理用户触发的一些事件。

本例使用“onSelect”事件显示提要内容，使用“onLoadSuccess”事件选择第一行。

步骤三: 为树处理事件

当加载树数据时，需要选择第一个叶节点，调用“select”方法来选择该节点。使用“onSelect”事件获取所选节点，这样我们就可以获得相应的“url”值。最后调用datagrid的load方法刷新提要列表数据。

下载 EasyUI 实例:

easyui-rssreader-demo.zip

创建RSS提要阅读器

步骤 一: 创建布局

步骤 二: 处理datagrid的事件

步骤 三: 为树处理事件

下载 EasyUI 实例:

步骤一: 创建布局

步骤二: 处理datagrid的事件

步骤三: 为树处理事件