Tab頁介面，用jQuery及Ajax技術實現

技術小美發表於2017-11-16
jQuery

  從桌面開發的時代開始，Tab頁就是一個優異的介面佈局形式，兼有選單的樣式和充分複用有限的介面的優點。

    到了B/S開發時代，網頁前端佈局也把Tab頁的佈局形式吸收了過來。特別是和Ajax技術結合起來，可以更充分發揮Tab頁的良好表現力和資料快取的優勢，是一種良好的網頁佈局形式。

    網上的Tab頁程式碼很多，實現也大同小異 ，但程式碼都顯得凌亂，若要真的用的話，必須費勁的吃透它，才能進行二次定製開發，為我所用。實際上實現這個Tab頁介面非常簡單，僅僅是通過Ajax技術偷偷的獲取資訊，然後在一塊區域輪流顯示而已(通過顯示和隱藏層，或複用一個層，輪流向裡邊填充Html資料)。

    自己的開發的程式碼自己最清楚，用起來也應該最順手，要擴充套件的話腦子也不犯暈。程式碼如下，還在不斷修改中。

    程式碼特點：

    1，完全實現Tab邏輯功能，Tab的樣式完全交由前端程式碼控制，十分靈活。

    2，使用Ajax技術，資料從伺服器端按需取用，改善了前端的介面觀感，提高了頁面的效能。在重新瀏覽器視窗前，所有已經載入的tab頁的資料被快取在瀏覽器端，不再從伺服器端調取，大大節約了網路頻寬，改善了介面的效能。

    3，tab頁觸發可以根據需要選用click或mouseover等事件。

    4，可以配置tab載入後預設觸發的頁。

    5，介面以table佈局，只需要配置關鍵物件的 id 即可工作。

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd“>

<html xmlns=”http://www.w3.org/1999/xhtml“>

<head>

<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />

<title>我的Tabs選項卡(Ajax版本)</title>

<style type=”text/css”>

  body {font-size:12px; }

  #tab0,#tab1,#tab2 {background:url(images/gray.png); cursor:hand;}

</style>

<script type=”text/javascript” src=”jquery/jquery.js”></script>

<script type=”text/javascript”>

  $(document).ready(function()

  {

  //————————-

    //tabs 配置資訊

    var tabs = [”#tab0″, “#tab1″, “#tab2″]; //tab 陣列 id

    var datas = “#div_data”; //顯示區物件的id號

    var event_type = “mouseover”; //觸發事件(click/dblclick/mouseover/focus/…)

    var default_tab = “#tab0″;

    //切換圖片

    var tab_selected_bgimg = “images/green.png”;

    var tab_unselected_bgimg = “images/gray.png”;

    //切換文字顏色

    var tab_selected_txtcolor = “#ff6600″;

    var tab_unselected_txtcolor = “#666666″;

    //

    urls = [

          “my_ajax_server.php?app=tab0″,

          “my_ajax_server.php?app=tab1″,

          “my_ajax_server.php?app=tab2″,

         ]

    //**Begin:固定程式碼*********************************

    for (var i=0; i<tabs.length; i++)

    {

      $(tabs[i]).bind(event_type, handler);

    }

    $(default_tab).trigger(event_type);

    //

    function handler()

    {

      //初始化快取陣列

      var localdatas = new Array(); //快取瀏覽器本次資料

      for (var i=0; i<tabs.length; i++)

      {

        localdatas[i]=”;

      }

      //重置所有tabs

      for (var i=0; i<tabs.length; i++)

      {

        $(tabs[i]).css(”background-image”, “url(”+ tab_unselected_bgimg +”)”);

        $(tabs[i]).css(”color”, tab_unselected_txtcolor);

      }

      var curr_index;

      for(var i=0;i<tabs.length;i++)

      {

        if($(tabs[i]).attr(”id”)==$(this).attr(”id”))

        {

          curr_index = parseInt(i);

        }

      }

      //

      $(this).css(”background-image”, “url(”+ tab_selected_bgimg +”)”);

      $(this).css(”color”, tab_selected_txtcolor);

      if(localdatas[curr_index]==”)

      {

        //ajax獲取資料(預設method=get)

        $.ajax

        ({

          url: urls[curr_index], //後臺處理程式

          cache: false,

          timeout: 20000,

          error:function()

          {

            alert(”error while submitting”);

          },

          success:function(data)

          {

            localdatas[curr_index] = data; //快取瀏覽器本次資料

            $(datas).html(data);

          }

        });

      }

      else

      { //顯示快取資料

        $(datas).html(datas[curr_index]);

      }

    }

    //**End:固定程式碼*********************************

  //—————–

  });

</script>

</head>

<body>

<table border=”0″ width=”500″ height=”25″ border=”0″ align=”center” cellpadding=”0″ cellspacing=”0″>

<tr>

  <td width=”97″ id=”tab0″>tab0</td>

  <td width=”30″></td>

  <td width=”97″ id=”tab1″>tab1</td>

  <td width=”30″></td>

  <td width=”97″ id=”tab2″>tab2</td>

  <td width=”149″></td>

</tr>

</table>

<table border=”1″ width=”500″ height=”60″ border=”0″ align=”center” cellpadding=”0″ cellspacing=”0″>

<tr>

  <td>

    <div id=”div_data”></div>

  </td>

</tr>

</table>

</body>

</html>

my_ajax_server.php檔案：

<?php

  /*******************************************

  * File: my_ajax_server.php

  ********************************************/

  error_reporting(7);

  set_magic_quotes_runtime(0);

  $app = $_GET[’app’];

  switch ($app)

  {

    case “tab0″:  //

?>

from TAB0

<?php

      break;

    case “tab1″:  //

?>

from TAB1

<?php

      break;

    case “tab2″:  //

?>

from TAB2

<?php

      break;

    default:

      echo ‘my_ajax_server.php error.’;

      break;

  }

?>



本文轉自網眼51CTO部落格，原文連結：http://blog.51cto.com/itwatch/286442，如需轉載請自行聯絡原作者


相關文章