Jquery Tabs 在asp.net 中的應用

首先寫一個web service 方法

根據不同的汽車類型得到此中類型下的汽車資訊

[WebMethod]

public List<Car> GetCarsByMake(string make)

{

    var query = from c in Cars

                where c.Make == make

                select c;

    return query.ToList();

}

引入Jquery類庫

<script type="text/javascript" src="script/jquery-1.3.2.min.js"></script> 

<script type="text/javascript" src="script/ui.core.min.js"></script> 

<script type="text/javascript" src="script/ui.tabs.min.js"></script> 

編寫html腳本

<form id="form1" runat="server"> 

<div> 

  <div id="content">

    <ul>

      <li><a href="#tab0"><span>Ford</span></a></li>

      <li><a href="#tab1"><span>Toyota</span></a></li>

      <li><a href="#tab2"><span>Honda</span></a></li>

      <li><a href="#tab3"><span>Audi</span></a></li>

    </ul>

    <div id="tab0"></div>

    <div id="tab1"></div>

    <div id="tab2"></div>

    <div id="tab3"></div>

  </div>

</div> 

</form> 

在html中調用tabs

$(function() {

  var $tabs = $("#content").tabs();

});

運行頁面結果如下圖

此時，點擊每個標籤可以互相切換，但是標籤裡沒有內容，Let’s go on….

以下代碼用來注冊tab的單擊事件,并通過web service 從資料庫中獲得資料顯示到前台

var make;

  var $tabs = $("#content").tabs({

    select: function(e, ui) {

      var thistab = ui.index;

      $("#tab" + thistab).html(getCars(thistab));

    }

  });

function getCars(thistab) {

  switch (thistab) {

    case 0:

      make = "Ford";

      break;

    case 1:

      make = "Toyota";

    case 2:

      make = "Honda";

    case 3:

      make = "Audi";

  }

  $.ajax({

    type: "POST",

    url: "Services/CarService.asmx/GetCarsByMake",

    data: "{make: '" + make + "'}",

    contentType: "application/json; charset=utf-8",

    dataType: "json",

    success: function(response) {

      var cars = (typeof response.d) == 'string' ? eval('(' + response.d + ')') : response.d;

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

        $('#tab' + thistab).append('<p><strong>' + cars[i].Make + ' ' +

                              cars[i].Model + '</strong><br /> Year: ' +

                              cars[i].Year + '<br />Doors: ' +

                              cars[i].Doors + '<br />Colour: ' +

                              cars[i].Colour + '<br />Mileage: ' +

                              cars[i].Mileage + '<br />Price: £' +

                              cars[i].Price + '</p>');

      }

再次運作頁面,切換不同的标簽,根據種類顯示不同的内容.

這時就出現了一個問題. 重複點選相同的标簽,會重複向伺服器發送請求.

解決辦法如下:

var clicked = new Array();

  <b>for</b> (<b>var</b> x in clicked) {<b></b>

    <b>if</b> (clicked[x] == thistab)<b></b>

      <b>return</b>;<b></b>

  }

      clicked.push(thistab);

至此,Jquery tabs在asp.net 中的應用結束。

此案例下載：

http://www.mikesdotnetting.com/Samples/LazyLoadTabs.aspx

原文位址：

http://www.mikesdotnetting.com/Article.aspx?ArticleID=102

<a href="http://www.mikesdotnetting.com/Samples/LazyLoadTabs.aspx"></a>

版權

作者：靈動生活 郝憲玮

如果你認為此文章有用，請點選底端的【推薦】讓其他人也了解此文章，

本文版權歸作者和部落格園共有，歡迎轉載，但未經作者同意必須保留此段聲明，且在文章頁面明顯位置給出原文連接配接，否則保留追究法律責任的權利。