Leicht zu erlernendes jQuery-Plug-in EasyUI EasyUI erstellt den RSS-Feed „reader

Leicht zu erlernendes jQuery-Plug-in EasyUI EasyUI erstellt den RSS-Feed „reader_jquery'.

WBOY

Freigeben： 2016-05-16 15:28:37

Original

1243 Leute haben es durchsucht

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>

Nach dem Login kopieren

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);
 }
 }
});

Nach dem Login kopieren

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);
 }
 }
});

Nach dem Login kopieren

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.