jEasyUI crée un lecteur RSS
Dans ce tutoriel, nous allons créer un lecteur RSS via le framework jQuery EasyUI.
Nous utiliserons les plugins suivants :
layout : Créer l'interface utilisateur de l'application.
datagrid : 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 arborescent (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électionnez 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);
}
}
});
