집 > 기사 > 웹 프론트엔드 > 쉽게 배우는 jQuery 플러그인 EasyUI EasyUI는 RSS 피드를 생성합니다. reader_jquery

쉽게 배우는 jQuery 플러그인 EasyUI EasyUI는 RSS 피드를 생성합니다. reader_jquery

WBOY원래의: 2016-05-16 15:28:371280검색

이 기사의 예에서는 jQuery EasyUI 프레임워크를 통해 RSS 리더를 생성하는 방법을 설명하고 참조용으로 모든 사람과 공유합니다. 세부 내용은 다음과 같습니다.
실행 중인 효과의 스크린샷은 다음과 같습니다.

다음 플러그인을 사용합니다:
레이아웃: 애플리케이션의 사용자 인터페이스를 생성합니다.
datagrid: RSS 피드 목록을 표시합니다.
트리: 피드 채널을 표시합니다.
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);
 }
 }
});

위 내용은 EasyUI를 사용하여 RSS 피드 리더를 만드는 것과 관련된 튜토리얼입니다. 모든 사람의 학습에 도움이 되기를 바랍니다.

성명：

이전 기사：jquery.validate.js 양식 유효성 검사 플러그인_jquery를 사용하는 방법을 빠르게 알아보세요.다음 기사：jquery.validate.js 양식 유효성 검사 플러그인_jquery를 사용하는 방법을 빠르게 알아보세요.

쉽게 배우는 jQuery 플러그인 EasyUI EasyUI는 RSS 피드를 생성합니다. reader_jquery

관련 기사