suchen

Heim >Web-Frontend >js-Tutorial >Leicht zu erlernendes jQuery-Plug-in EasyUI EasyUI erstellt den RSS-Feed „reader_jquery'.

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

WBOY
WBOYOriginal
2016-05-16 15:28:371319Durchsuche

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.

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Lernen Sie schnell, wie Sie das jQuery-Plugin verwendenNächster Artikel：Lernen Sie schnell, wie Sie das jQuery-Plugin verwenden

In Verbindung stehende Artikel

Mehr sehen