Das Beispiel in diesem Artikel beschreibt die Erstellung eines RSS-Readers über das jQuery EasyUI-Framework und stellt es allen als Referenz zur Verfügung. Die Details lauten wie folgt:
Der Screenshot des Laufeffekts sieht wie folgt aus:
Wir werden die folgenden Plugins verwenden:
Layout: Erstellt die Benutzeroberfläche der Anwendung.
Datagrid: RSS-Feed-Liste anzeigen.
Baum: Feedkanal anzeigen.
Schritt 1: Layout erstellen
<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>Schritt 2: DataGrid verarbeitet Ereignisse
Hier müssen wir einige vom Benutzer ausgelöste Ereignisse verarbeiten.
$('#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);
}
}
});
In diesem Beispiel wird das Ereignis „onSelect“ verwendet, um den Inhalt des Feeds anzuzeigen, und das Ereignis „onLoadSuccess“, um die erste Zeile auszuwählen.
Schritt 3: Baummenü (Baum) verwaltet Ereignisse
Wenn die Daten des Baummenüs (Baum) geladen wurden, müssen wir den ersten Blattknoten auswählen und die Methode „select“ aufrufen, um den Knoten auszuwählen. Verwenden Sie das Ereignis „onSelect“, um den ausgewählten Knoten abzurufen, damit wir den entsprechenden „URL“-Wert erhalten können. Abschließend rufen wir die Methode „load“ des DataGrid auf, um die Daten der Feedliste zu aktualisieren.
$('#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);
}
}
});Das Obige ist das relevante Tutorial zum Erstellen eines RSS-Feed-Readers mit EasyUI. Ich hoffe, es wird für das Lernen aller hilfreich sein.
