top
Loading...
jQuery EasyUI 應用 – 創建 RSS Feed 閱讀器

jQuery EasyUI 應用 - 創建 RSS Feed 閱讀器

在本教程中,我們將通過 jQuery EasyUI 框架創建一個 RSS 閱讀器。

我們將使用以下插件:

  • layout:創建應用的用戶界面。
  • datagrid:顯示 RSS Feed 列表。
  • tree:顯示 feed 頻道。

步驟 1:創建布局(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.asp" 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>

步驟 2:數據網格(DataGrid)處理事件

在這里我們要處理一些由用戶觸發的事件。

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

本實例使用 'onSelect' 事件來顯示 feed 的內容,使用 'onLoadSuccess' 事件來選擇第一行。

步驟 3:樹形菜單(Tree)處理事件

當樹形菜單(Tree)數據已經加載,我們需要選擇第一個葉子節點,調用 'select' 方法來選擇該節點。 使用 'onSelect' 事件來得到已選擇的節點,這樣我們就能得到對應的 'url' 值。 最後我們調用數據網格(DataGrid) 的 'load' 方法來刷新 feed 列表數據。

$('#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);
        }
    }
});
北斗有巢氏 有巢氏北斗