jQuery UI Tabs + iFrame

Hiện tại, vì công việc quá bận rộn nên mình không còn thời gian để post bài và duy trì nội dung cho blog nữa. Do đó tại thời điểm này, mình quyết định ngừng phát triển blog. Mọi bài viết sẽ vẫn được lưu trữ và mình sẽ cố gắng hỗ trợ tất cả các bạn khi có comment hỏi. Cảm ơn các bạn đã ủng hộ blog suốt thời gian qua !

Trong bài viết này mình sẽ giới thiệu với các bạn kỹ thuật sử dụng 1 chức năng rất tuyệt vời của jQuery UI là "Tabs" kết hợp với iFrame để tải nội dung.

Đầu tiên về kỹ thuật jQuery UI Tabs, bạn có thể gom nội dung thành nhiều "tab", khi người truy cập nhấn vào mỗi "tab" sẽ hiển thị nội dung. Kỹ thuật này giúp thu gọn nội dung trang và có thể hiệu ứng "scroll" khi load nội dung trong mỗi "tab" trong sẽ đẹp mắt hơn.

Vấn đề là bây giờ nội dung trong "tab" của bạn không phải là text, html mà là iframe thì sao? Nếu dùng mã HTML để chèn trực tiếp iframe vào nội dung "tab" để load thì sẽ làm trang web bạn load chậm, mặc khác nếu trong iframe này chứa nội dung media - auto play thì khách sẽ rất khó chịu mà không biết tắt nó chỗ nào !

Bằng cách sử dụng kỹ thuật jQuery UI Tabs + iFrame này bạn sẽ khắc phục được tình trạng này, nếu nội dung bạn cần tải là iFrame thì khi khách nhấn vào "Tab" iFrame này mới được khởi tạo và load lên.

Demo bạn có thể xem tại trang xem TV Online mình vừa hoàn thành: http://itdl.blogspot.com/p/xem-tv-online.html

Bây giờ bắt đầu nhé !!

Bước 1: Cài đặt và sử dụng thử viện jQuery và jQuery UI

Download jQuery.
Download jQuery UI. (trong bài viết này mình sử dụng theme “smoothness” có sẵn)

<script type="text/javascript" src="data/js/jquery.js"></script>
<script type="text/javascript" src="data/js/jquery-ui.js"></script>
<link href="data/css/smoothness/jquery-ui.css" rel="stylesheet" type="text/css">

<div id="tabs">
 <ul>
  <li><a class="tabref" href="#tabs-1">google</a></li>
  <li><a class="tabref" href="#tabs-2">yahoo</a></li>
  <li><a class="tabref" href="#tabs-3">bing</a></li>
 </ul>
 <div id="tabs-1" class="tabMain">
 </div>

 <div id="tabs-2">
 </div>

 <div id="tabs-3">
 </div>
</div>

Bước 2: Gọi jQuery UI Tabs và xử lý event Tabs Click

<script>
 (document).ready(function() {
  var $tabs = $('#tabs').tabs();

  $("a.tabref").click(function() {
   //dùng hàm loadTabFrame xử lý sự kiện click vào tab
   loadTabFrame($(this).attr("href"),$(this).attr("rel"));
  });</script>

Bước 3: Xử lý Default Tab

Mặc định khi mở trang sẽ load nội dung của Tab được set default, mặc dù khách chưa nhấn chuột vào Tabs này. Vì vậy cần tìm và xử lý để load nội dung trong Default Tab này

//get selected tab
function getSelectedTabIndex() {
return tabs.tabs('option', 'selected');
}

//get tab contents
beginTab = $("#tabs ul li:eq(" + getSelectedTabIndex() + ")").find("a");

loadTabFrame($(beginTab).attr("href"),$(beginTab).attr("rel"));

Bước 4: Định dạng CSS

Phần định dạng này để điều chỉnh kích thước iFrame và nút close (mở iFrame trong trang mới), bạn có thể tinh chỉnh lại tùy thích

<style type="text/css">
.iframetab {
 width:100%;
 height:auto;
 border:0px;
 margin:0px;
 background:url("data/iframeno.png");
 position:relative;
 top:-13px;
}

.ui-tabs-panel {
 padding:5px !important;
}

.openout {
 float:right;
 position:relative;
 top:-28px;
 left:-5px;
}
</style>

Bước 5: Viết hàm loadTabFrame

Đây là hàm dùng để tải iFrame vào nội dung Tabs với tham số truyền vào là TabID và iFrame URL

function loadTabFrame(tab, url) {
 if ((tab).find("iframe").length == 0) {
  var html = [];
  html.push('<div class="tabIframeWrapper">');
  html.push('<div class="openout"><a href="' + url + '"><img src="data/world.png" border="0" alt="Open" title="Remove iFrame" /></a></div><iframe class="iframetab" src="' + url + '">Load Failed?</iframe>');
  html.push('</div>');
  $(tab).append(html.join(""));
  $(tab).find("iframe").height($(window).height()-80);
 }
 return false;
}

Về cơ bản là đã xong, dưới đây là code hoàn chỉnh 1 trang dùng jQuery UI Tabs + iFrame, bạn có thể tham khảo và dùng vào trang web của bạn:

<html>
 <head>
  <script type="text/javascript" src="data/js/jquery.js"></script>
  <script type="text/javascript" src="data/js/jquery-ui.js"></script>
  <link href="data/css/smoothness/jquery-ui.css" rel="stylesheet" type="text/css">
  <style>
   html {
    font-size:10px;
   }

   .iframetab {
    width:100%;
    height:auto;
    border:0px;
    margin:0px;
    background:url("data/iframeno.png");
    position:relative;
    top:-13px;
   }

   .ui-tabs-panel {
    padding:5px !important;
   }

   .openout {
    float:right;
    position:relative;
    top:-28px;
    left:-5px;
   }
  </style>
  <script>
   (document).ready(function() {
    var $tabs = $('#tabs').tabs();

    //get selected tab
    function getSelectedTabIndex() {
     return $tabs.tabs('option', 'selected');
    }

    //get tab contents
    beginTab = $("#tabs ul li:eq(" + getSelectedTabIndex() + ")").find("a");

    loadTabFrame($(beginTab).attr("href"),$(beginTab).attr("rel"));

    $("a.tabref").click(function() {
     loadTabFrame($(this).attr("href"),$(this).attr("rel"));
    });

    //tab switching function
    function loadTabFrame(tab, url) {
     if ($(tab).find("iframe").length == 0) {
      var html = [];
      html.push('<div class="tabIframeWrapper">');
      html.push('<div class="openout"><a href="' + url + '"><img src="data/world.png" border="0" alt="Open" title="Remove iFrame" /></a></div><iframe class="iframetab" src="' + url + '">Load Failed?</iframe>');
      html.push('</div>');
      $(tab).append(html.join(""));
      $(tab).find("iframe").height($(window).height()-80);
     }
     return false;
    }
   });
  </script>
 </head>
 <body>

  <div id="tabs">
   <ul>
    <li><a class="tabref" href="#tabs-1" rel="http://vnexpress.net">vnexpress</a></li>
    <li><a class="tabref" href="#tabs-2" rel="http://www.zing.vn">zing</a></li>
    <li><a class="tabref" href="#tabs-3" rel="http://www.bing.com">bing</a></li>
   </ul>
   <div id="tabs-1" class="tabMain">
   </div>

   <div id="tabs-2">
   </div>

   <div id="tabs-3">
   </div>
  </div> 

 </body>
</html>

© Ngọc LB <http://itdl.blogspot.com>
Tham khảo thêm tại đây: http://dean.resplace.net/blog/2011/08/jquery-tabs-iframes/