Maison > Article > interface Web > Apprenez facilement le plug-in jQuery EasyUI EasyUI crée un flux RSS reader_jquery

Apprenez facilement le plug-in jQuery EasyUI EasyUI crée un flux RSS reader_jquery

WBOYoriginal: 2016-05-16 15:28:371244parcourir

L'exemple de cet article décrit la création d'un lecteur RSS via le framework jQuery EasyUI et le partage avec tout le monde pour votre référence. Les détails sont les suivants :
La capture d'écran de l'effet en cours d'exécution est la suivante :

Nous utiliserons les plugins suivants :
layout : Crée l'interface utilisateur de l'application.
Grille de données : Afficher la liste des flux RSS.
arborescence : Afficher le canal de flux.
Étape 1 : Créer une mise en page

<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>

Étape 2 : DataGrid gère les événements

Ici, nous devons gérer certains événements déclenchés par l'utilisateur.

$('#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);
 }
 }
});

Cet exemple utilise l'événement 'onSelect' pour afficher le contenu du flux, et l'événement 'onLoadSuccess' pour sélectionner la première ligne.
Étape 3 : Le menu Arbre (Tree) gère les événements

Lorsque les données du menu arborescent (Tree) ont été chargées, nous devons sélectionner le premier nœud feuille et appeler la méthode 'select' pour sélectionner le nœud. Utilisez l'événement 'onSelect' pour obtenir le nœud sélectionné afin que nous puissions obtenir la valeur 'url' correspondante. Enfin, nous appelons la méthode 'load' du DataGrid pour actualiser les données de la liste de flux.

$('#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);
 }
 }
});

Ce qui précède est le didacticiel pertinent sur la création d'un lecteur de flux RSS avec EasyUI. J'espère qu'il sera utile à l'apprentissage de chacun.

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Apprenez rapidement le plug-in jQuery. Comment utiliser le plug-in de validation de formulaire jquery.validate.js.Article suivant：Apprenez rapidement le plug-in jQuery. Comment utiliser le plug-in de validation de formulaire jquery.validate.js.

Articles Liés

Voir plus