当前位置:编程学习 > JAVA >>

使用jQuery easyUI 创建一个 RSS Feed阅读器

@author YHC

在这个教程中我们要去创建一个rss阅读器使用easyUI框架.

 \


查看DEMO


我们将使用以下插件:


layout:创建一个应用程序界面.
datagrid: 显示rss feed列表.
tree:显示feed频道.

步骤1: 创建 Layout
[html]
<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>  

<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="cente

补充:web前端 , JavaScript ,
CopyRight © 2022 站长资源库 编程知识问答 zzzyk.com All Rights Reserved
部分文章来自网络,