JQuery UI Tabs 使用cookie記住最後開啟的頁簽

JQuery UI Tabs 使用cookie記住最後開啟的頁簽

JQuery UI Tabs在 1.10 以前可以直接使用cookie紀錄目前的頁簽,不過之後被拿掉了

Support for cookies is not part of the core functionality for tabs and there are many ways to manage state across page loads. Therefore, the cookie option has been deprecated in favor of setting the active option appropriately during initialization.


cookie: {
name: 'mytabs',
expires: 1
}
});

 

所以1.10之後如果要記錄最後開啟的頁簽,避免PostBack後跳到最前頁方法如下:

 

首先要先引用JQuery, JQuery UI, JQuery.cookie

接著設定Tabs的起始選項 active:

最後設定Tabs的換頁事件 activate:

 


    <script src="Scrpits/jquery-ui-1.10.3.custom.min.js"></script>
    <script src="Scrpits/jquery.cookie.js"></script>
    <script type="text/javascript">
        $(function () {

            //tabs頁簽 使用cookie記住最後開啟的頁簽
            $("#tabs").tabs({

				//起始頁active: 導向cookie("tabs")所指頁簽,如果空白導向tabs:0
                active: ($.cookie("tabs") || 0),   

				//換頁動作activate 
                activate: function (event, ui) {    
					//取得選取的頁簽編號
                    var newIndex = ui.newTab.parent().children().index(ui.newTab);   

					//記錄到cookie   
                    $.cookie("tabs", newIndex, { expires: 1 });                         
                }
            });           
        })
    </script>

<body>
    <div id="tabs">
        <ul>
            <li><a href="#tabs-Select">Select</a></li>
            <li><a href="#tabs-Insert">Insert</a></li>
        </ul>

        <div id="tabs-Select">Select </div>
        <div id="tabs-Insert">Insert </div>
    </div>
</body>

PS.   JQuery.Cookie可以到這裡下載