This article illustrates the creation of an RSS reader through the JQuery Easyui Framework, shared for your reference. Specifically as follows:
The screenshot of the running effect is as follows:
We will use the following plugins:
layout: Create the user interface for the application.
DataGrid: displays a list of RSS feeds.
Tree : Displays the Feed channel.
Step 1: Create the layout (Layout)
<body class= "Easyui-layout" > <div region= "North" border= "false" class= "Rtitle" > JQuery easyui RSS reader De Mo </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=" Heig " ht:200px "> <table id=" dg "Url=" get_feed.php "border=" false "rownumbers=" true "fit=" true "fitcolumns=" true " Singleselect= "true" > <thead> <tr> <th field= "title" Width= "M" >Title</th> <th field= "description" width= ">Description</th> <th field=" pubdate width= ">publish" date</th& Gt </tr> </thead> </table> </div> <div region= "center" border= "false" style= "Overflow:hid Den "> <ifraMe id= "cc" scrolling= "Auto" frameborder= "0" style= "width:100%;height:100%" ></iframe> </div> </div& Gt </div> </body>
Step 2: The data grid (DataGrid) Handles events
Here we are going to handle some of the 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 contents of the feed, using the ' onloadsuccess ' event to select the first row.
Step 3: Tree menu Processing Events
When the tree menu is 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 that we can get the corresponding ' URL ' value. Finally we call the ' load ' method of the data grid (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 about Easyui create RSS feed reader of the relevant tutorials, I hope to help you learn.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
