想在 VS2005 專案裡面套用 jQuery UI 的 Tabs （頁籤）功能，於是到了 http://jqueryui.com/demos/tabs/ 去挑選了一個自己喜歡的樣式，並加入到自己的專案中。可是，當我放了一個 Button 控制項後，就開始哀號了，因為只要頁面一有 Post Back 發生，jQuery UI 就會重新載入。如上面所示，假如我已經切換到第二個頁籤(逾期未簽)後，然後點選該頁籤下的任何一個會觸發 Post Back 的動作（包括排序也一樣），jQuery UI Tabs 就會重新跳回第一個頁籤。
所以，是不是應該偷偷放個什麼，好讓 Tabs 能夠記住目前的頁籤索引位置。
於是我在頁面上放了一個 hidden 欄位，並設定 runat="server" 。
<input type="hidden" id="hTag" runat="server" />
下一個問題，則是如何目前將頁籤的索引值寫入我的隱藏欄位 hTag ？我在 http://jqueryui.com/demos/tabs/ 的 Events 頁籤找到了 show 這個事件，測試了一下他所提供的 sample code，去攔 tabsshow 事件並加以利用。此外，抓取目前 Tabs 頁籤的方法為 .tabs('option', 'selected') ，於是將程式整理如下：
$(function(){
// Tabs
$('#tabs').tabs().css("width","840px");
//hover states on the static widgets
$('#dialog_link, ul#icons li').hover(
function() { $(this).addClass('ui-state-hover'); },
function() { $(this).removeClass('ui-state-hover'); }
);
$('#tabs').bind("tabsshow",function(event, ui) { GetIndex(); });
});
function GetIndex()
{// 將目前的 Tab Index 存入 hTag 暫存
var $tabs = $('#tabs').tabs();
var $tagIndex=$tabs.tabs('option', 'selected');
$("input[id*=hTag]").val($tagIndex);
}
程式到此，已經可以正確將目前 Tabs 頁籤切換時，將頁籤索引保存下來。但還有一個缺點，就是當頁面有 Post Back 發生時，還是沒辦法保留目前所在頁籤位置，會跳到預設的第一個。所以，需要在頁面一旦有 Post Back 時，將 Tabs 頁籤切換到目前所儲存的位置。而在 http://jqueryui.com/demos/tabs/ 的 Methods 裡有提供一個 select 方法，可以切換 Tabs 頁籤，於是就可以撰寫一段程式去完成這動作。
function SyncTab()
{//如果目前的 hTag 有暫存資料，則將 Tab 與暫存資料同步
var $tagIndex=$("input[id*=hTag]").val();
if($tagIndex!='')
{
$('#tabs').tabs( 'select' , parseInt($tagIndex));
}
}
這裡有個小地方需要注意，tabs('select', 數字參數 ) ，一定要記得傳數字參數進去，否則跳頁的效果會不正確。所以我用 parseInt( )來轉換為數字。
最後將 SyncTab() 函式放到 $(function(){ ... }) 裡面。
整個完整的 Code 如下：
<head>
<script language="javascript" type="text/javascript" src="../js/jquery.js"></script>
<script language="javascript" type="text/javascript" src="../js/jquery.url.min.js"></script>
<link type="text/css" href="../css/cupertino/jquery-ui-1.8rc2.custom.css" rel="stylesheet" />
<script language="javascript" type="text/javascript" src="../js/jquery-ui-tab.js"></script>
<script>
$(function(){
// Tabs
$('#tabs').tabs().css("width","840px");
//hover states on the static widgets
$('#dialog_link, ul#icons li').hover(
function() { $(this).addClass('ui-state-hover'); },
function() { $(this).removeClass('ui-state-hover'); }
);
$('#tabs').bind("tabsshow",function(event, ui) { GetIndex(); });
//如果目前的 hTag 有暫存資料，則將 Tab 與暫存資料同步
SyncTab();
});
function GetIndex()
{// 將目前的 Tab Index 存入 hTag 暫存
var $tabs = $('#tabs').tabs();
var $tagIndex=$tabs.tabs('option', 'selected');
$("input[id*=hTag]").val($tagIndex);
}
function SyncTab()
{//如果目前的 hTag 有暫存資料，則將 Tab 與暫存資料同步
var $tagIndex=$("input[id*=hTag]").val();
if($tagIndex!='')
{
$('#tabs').tabs( 'select' , parseInt($tagIndex));
}
}
</script>
</head>
<body>
<input type="hidden" id="hTag" runat="server" />
<div id="tabs">
<ul>
<li><a href="#tabs-1">逾期未填</a></li>
<li><a href="#tabs-2">逾期未簽</a></li></ul>
<div id="tabs-1"> Page1 Content
</div>
<div id="tabs-2"> Page2 Content
</div>
</div>
</body>
請問大大 您的TABS 是指愈期未填跟愈琦未簽
回覆刪除這兩個是嗎
請求您告訴我怎怎隱藏其中一個TABS
那個語法是什麼
if ($fieldsObjects['field_vroffice']->data){
}
else {echo $mytabs ->hiddentab("Tab2");}
這是想要隱藏的程式碼
如果field_vroffice有資料就沒有動作
如果沒資料就隱藏那個TABS
但是ELSE那邊的程式碼我不知道該打什麼
請您告訴我
我的信箱是paul88543@yahoo.com.tw
感激
他沒有提供隱藏的方式，但是，你可以移除你不想要的 tab 。
回覆刪除譬如說，如果你有三個 tab（tA,tB,tC），如果 tC 沒有資料且不想看到他，可以用 .tabs( "remove" , index ) 把他刪掉。
而你的程式可以這樣寫：
$(function() {
$("#tabs").tabs();
$("#tabs").tabs( "remove" , 2 )
});
這樣就只會看到 tA,tB 兩個頁籤了。
參考：http://jqueryui.com/demos/tabs/#method-remove
其實你只需要在按鈕加上 .click() 時利用 __doPostBack() 就可以了:
回覆刪除// 這段會把事件 Post 到 CodeBehind 處理相對應的 Button1_Click 事件
$("#button1").click(function() {
__doPostBack("button1", "");
return false;
});