[jQuery]設定頁籤熱鍵

2010-07-09

[jQuery]設定頁籤熱鍵

由於網頁上有多個頁籤，使用者希望可以透過鍵盤切換頁籤，

如Shift+1切到頁籤一、Shift+2切到頁籤二....等，

而這需求也不難，因為已有HotKeys可達到，自己記錄一下。

Html

<!-- the tabs -->

<ul class="tabs">

    <li ><a href="#1">RiCo技術農場</a></li>

    <li ><a href="#2">MSDN技術論壇</a></li>

    <li ><a href="#3">TechNet技術論壇</a></li>

</ul>

<!-- tab "panes" -->

<div class="panes">

    <div id="d1">歡迎參觀我的部落格，請多多指教</div>

    <div id="d2">MSDN逛過才知道它的好</div>

    <div id="d3">TechNet看過才了解它的美</div>

</div>

jQuery

<script type="text/javascript">

            $(function() {

                //setup ul.tabs to work as tabs for each div directly under div.panes

                $("ul.tabs").tabs("div.panes > div");

                //切換頁籤其實就是click頁籤超連結

                $(document).bind('keydown', 'Shift+1', function (){$('a[href=#1]').click();});

            $(document).bind('keydown', 'Shift+2', function (){$('a[href=#2]').click();});

            $(document).bind('keydown', 'Shift+3', function (){$('a[href=#3]').click();});

});

        </script>

結果:

初始畫面。

Shift+2切換頁籤。

Shift+3切換頁籤。

RiCo技術農場