本文實例講述了通過 jQuery EasyUI框架創(chuàng)建一個RSS閱讀器，分享給大家供大家參考。具體如下：
運行效果截圖如下：
我們將使用以下插件：
layout：創(chuàng)建應(yīng)用的用戶界面。
datagrid：顯示 RSS Feed 列表。
tree：顯示 feed 頻道。
步驟 1：創(chuàng)建布局（Layout）
<body class="easyui-layout"> <div region="north" border="false" class="rtitle"> jQuery EasyUI RSS Reader Demo </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>
步驟 2：數(shù)據(jù)網(wǎng)格（DataGrid）處理事件
在這里我們要處理一些由用戶觸發(fā)的事件。
$('#dg').datagrid({ onSelect: function(index,row){ $('#cc').attr('src', row.link); }, onLoadSuccess:function(){ var rows = $(this).datagrid('getRows'); if (rows.length){ $(this).datagrid('selectRow',0); } }});本實例使用 'onSelect' 事件來顯示 feed 的內(nèi)容，使用 'onLoadSuccess' 事件來選擇第一行。
步驟 3：樹形菜單（Tree）處理事件
當(dāng)樹形菜單（Tree）數(shù)據(jù)已經(jīng)加載，我們需要選擇第一個葉子節(jié)點，調(diào)用 'select' 方法來選擇該節(jié)點。 使用 'onSelect' 事件來得到已選擇的節(jié)點，這樣我們就能得到對應(yīng)的 'url' 值。 最后我們調(diào)用數(shù)據(jù)網(wǎng)格（DataGrid） 的 'load' 方法來刷新 feed 列表數(shù)據(jù)。
$('#t-channels').tree({ onSelect: function(node){ var url = node.attributes.url; $('#dg').datagrid('load',{ url: url }); }, onLoadSuccess:function(node,data){ if (data.length){ var id = data[0].children[0].children[0].id; var n = $(this).tree('find', id); $(this).tree('select', n.target); } }});以上就是關(guān)于EasyUI創(chuàng)建RSS Feed閱讀器的相關(guān)教程，希望對大家的學(xué)習(xí)有所幫助。
新聞熱點
疑難解答
