cari

Rumah  >  Artikel  >  hujung hadapan web  >  Pelajari pemalam jQuery dengan mudah EasyUI EasyUI mencipta RSS Feed reader_jquery

Pelajari pemalam jQuery dengan mudah EasyUI EasyUI mencipta RSS Feed reader_jquery

WBOY
WBOYasal
2016-05-16 15:28:371279semak imbas

Contoh dalam artikel ini menerangkan penciptaan pembaca RSS melalui rangka kerja jQuery EasyUI dan berkongsinya dengan semua orang untuk rujukan anda. Butirannya adalah seperti berikut:
Tangkapan skrin kesan berjalan adalah seperti berikut:

Kami akan menggunakan pemalam berikut:
reka letak: Mencipta antara muka pengguna aplikasi.
datagrid: Paparkan senarai Suapan RSS.
pokok: Tunjukkan saluran suapan.
Langkah 1: Buat Reka Letak 

<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>

Langkah 2: DataGrid mengendalikan acara

Di sini kita perlu mengendalikan beberapa peristiwa yang dicetuskan oleh pengguna. 

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

Contoh ini menggunakan acara 'onSelect' untuk memaparkan kandungan suapan dan acara 'onLoadSuccess' untuk memilih baris pertama.
Langkah 3: Menu pokok (Pokok) mengendalikan acara

Apabila data menu pokok (Pokok) telah dimuatkan, kita perlu memilih nod daun pertama dan memanggil kaedah 'pilih' untuk memilih nod. Gunakan acara 'onSelect' untuk mendapatkan nod yang dipilih supaya kita boleh mendapatkan nilai 'url' yang sepadan. Akhir sekali, kami memanggil kaedah 'beban' DataGrid untuk menyegarkan semula data senarai suapan. 

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

Di atas ialah tutorial yang berkaitan tentang mencipta pembaca Suapan RSS dengan EasyUI. Saya harap ia akan membantu pembelajaran semua orang.

Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：Pelajari pemalam jQuery dengan cepat Cara menggunakan pemalam pengesahan borang jquery.validate.jsArtikel seterusnya：Pelajari pemalam jQuery dengan cepat Cara menggunakan pemalam pengesahan borang jquery.validate.js

Artikel berkaitan

Lihat lagi