Reka letak jQuery EasyUI menambah tabs_jquery secara dinamik

Sebelum membaca perkara berikut, izinkan saya memberi anda pengenalan ringkas tentang pengetahuan berkaitan easyui.

easyui ialah koleksi pemalam antara muka pengguna berdasarkan jQuery. ddd

easyui menyediakan fungsi yang diperlukan untuk mencipta aplikasi JavaScript yang moden, interaktif.

Menggunakan easyui, anda tidak perlu menulis banyak kod Anda hanya perlu menulis beberapa teg HTML mudah untuk menentukan antara muka pengguna.

easyui ialah rangka kerja lengkap yang menyokong halaman web HTML5 dengan sempurna.

easyui menjimatkan masa dan skala pembangunan web anda.

easyui sangat ringkas tetapi berkuasa.

Tab boleh ditambah dengan mudah menggunakan jQuery EasyUI. Anda hanya perlu memanggil kaedah 'tambah'.

Dalam tutorial ini, kami akan menggunakan iframes untuk menambahkan Tab yang muncul pada halaman secara dinamik. Apabila mengklik butang Tambah, tab baharu akan ditambah. Jika tab sudah wujud, ia akan diaktifkan.

Langkah 1: Buat Tab

 <div style="margin-bottom:10px">
 <a href="#" class="easyui-linkbutton" onclick="addTab('google','http://www.google.com')">google</a>
 <a href="#" class="easyui-linkbutton" onclick="addTab('jquery','http://jquery.com/')">jquery</a>
 <a href="#" class="easyui-linkbutton" onclick="addTab('easyui','http://jeasyui.com/')">easyui</a>
 </div>
 <div id="tt" class="easyui-tabs" style="width:400px;height:250px;">
 <div title="Home">
 </div>
 </div>

Kod html ini sangat mudah, kami mencipta Tab dengan panel tab bernama 'Home'. Sila ambil perhatian bahawa kami tidak perlu menulis sebarang kod js.

Langkah 2: Laksanakan fungsi 'addTab'

 function addTab(title, url){
 if ($('#tt').tabs('exists', title)){
  $('#tt').tabs('select', title);
 } else {
  var content = '<iframe scrolling="auto" frameborder="0" src="'+url+'" style="width:100%;height:100%;"></iframe>';
  $('#tt').tabs('add',{
  title:title,
  content:content,
  closable:true
  });
 }
 }

Kami menggunakan kaedah 'wujud' untuk menentukan sama ada tab sudah wujud dan mengaktifkan tab jika ia sudah wujud. Jika ia tidak wujud, panggil kaedah 'tambah' untuk menambah panel tab baharu.

Baiklah, tutorial ini berakhir di sini saya harap ia akan membantu semua orang.