Home > Article > Web Front-end > Easily learn jQuery plug-in EasyUI EasyUI creates RSS Feed reader_jquery

Easily learn jQuery plug-in EasyUI EasyUI creates RSS Feed reader_jquery

WBOYOriginal: 2016-05-16 15:28:371245browse

The example in this article describes the creation of an RSS reader through the jQuery EasyUI framework and shares it with everyone for your reference. The details are as follows:
The screenshot of the running effect is as follows:

We will use the following plugins:
layout: Creates the user interface of the application.
datagrid: Display RSS Feed list.
tree: Show feed channel.
Step 1: Create Layout

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

Step 2: DataGrid handles events

Here we have to handle some events triggered by the user.

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

This example uses the 'onSelect' event to display the content of the feed, and the 'onLoadSuccess' event to select the first row.
Step 3: Tree menu (Tree) handles events

When the tree menu (Tree) data has been loaded, we need to select the first leaf node and call the 'select' method to select the node. Use the 'onSelect' event to get the selected node so we can get the corresponding 'url' value. Finally, we call the 'load' method of the DataGrid to refresh the feed list data.

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

The above is the relevant tutorial on creating an RSS Feed reader with EasyUI. I hope it will be helpful to everyone's learning.

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Quickly learn jQuery plug-in. How to use jquery.validate.js form validation plug-in_jqueryNext article：Quickly learn jQuery plug-in. How to use jquery.validate.js form validation plug-in_jquery

See more

Easily learn jQuery plug-in EasyUI EasyUI creates RSS Feed reader_jquery

Related articles