jQuery EasyUI application - Create RSS Feed Reader
In this tutorial, we will create an RSS reader by jQuery EasyUI framework.
We will use the following plug-ins:
- layout: Create a user interface applications.
- datagrid: Display RSS Feed list.
- tree: Display feed channel.
Step 1: Create Layout (Layout)
& Lt; body class = "easyui-layout" & gt; <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> & Lt; / body & gt;
Step 2: Data Grid (DataGrid) to handle events
Here we have to deal with 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 'onSelect' event to display the contents of the feed, to select the first line use 'onLoadSuccess' event.
Step 3: The menu tree (Tree) processing events
When the menu tree (Tree) data has been loaded, we need to select the first leaf node, call the 'select' method to select the node. Use 'onSelect' event to get the selected node, so that we can get 'url' corresponding to the value. Finally, we call the data grid (DataGrid) the 'load' method to refresh the list of feed 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); } } });