jEasyUI가 RSS 리더를 생성합니다.
이 튜토리얼에서는 jQuery EasyUI 프레임워크를 통해 RSS 리더를 생성합니다.
다음 플러그인을 사용합니다:
레이아웃: 앱의 사용자 인터페이스를 만듭니다.
datagrid: RSS 피드 목록을 표시합니다.
tree: 피드 채널을 표시합니다.
1단계: 레이아웃 만들기
<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>
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' 이벤트를 사용하여 피드의 콘텐츠를 표시하고 'onLoadSuccess' 이벤트를 사용하여 첫 번째 행을 선택합니다.
3단계: 트리 메뉴(Tree)가 이벤트를 처리합니다
트리 메뉴(Tree) 데이터가 로드되면 첫 번째 리프 노드를 선택하고 'select' 메서드를 호출하여 노드를 선택해야 합니다. 'onSelect' 이벤트를 사용하여 선택된 노드를 가져오면 해당 'url' 값을 얻을 수 있습니다. 마지막으로 DataGrid의 'load' 메소드를 호출하여 피드 목록 데이터를 새로 고칩니다.
$('#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);
}
}
});
