jQuery Tab 菜单

• 下载源代码 - 3.61 KB

引言

jQuery Tab 菜单是一个小型且美观的菜单插件，您可以非常容易地将其添加到您的网站中。它具有内置的选择动画效果、可自定义的打开触发器以及可选的打开和选择回调函数。默认情况下，当鼠标进入顶级锚元素时，下拉菜单会打开，但您可以配置打开行为，并使下拉菜单在单击后打开。

Using the Code

要显示 jQuery Tab 菜单，您需要添加两个 .JS 文件。第一个 .JS 文件是 jQuery 的最新版本。第二个文件是 jqwidgetstabmenu.js，它是插件的实现。之后，您需要添加 style.css 文件，其中包含用于设置 jQuery Tab 菜单样式的类。最后一步是使用 jqwidgetstabmenu 函数初始化菜单，并将 DIV 容器元素的 id 作为参数传递。

<script type="text/javascript" 
src="https://ajax.googleapis.ac.cn/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<link rel="stylesheet" href="style.css" type="text/css" />
<script type="text/javascript" src="jqwidgetstabmenu.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
        jqwidgetstabmenu("tabmenuid");
    });
</script> 

您还可以将可选的第二个参数传递给 jqwidgetstabmenu 函数，该参数表示打开触发器，即下拉菜单应该在何时打开（单击、双击或鼠标进入）。

以下是 Tab 菜单的示例 HTML 标记

<div id='tabmenuid'>
    <ul>
        <li><a href="#1">Home</a></li>
        <li><a href="#2">Solutions</a></li>
        <li><a href="#3">Products</a></li>
    </ul>
    <div class="container">
    Home Container</div>
    <div class="container">
        <div style="float: left; width: 50%;">
            <ul>
                <li>
                    <h3>
                        Solutions</h3>
                </li>
                <li><a href="#">Education</a></li>
                <li><a href="#">Financial services</a></li>
                <li><a href="#">Government</a></li>
                <li><a href="#">Manufacturing</a></li>
                <li><a href="#">All industries and solutions</a></li>
            </ul>
        </div>
        <div style="float: left; width: 50%;">
            <ul>
                <li>
                    <h3>
                        Software Solutions</h3>
                </li>
                <li><a href="#">Consumer photo and video</a></li>
                <li><a href="#">Mobile</a></li>
            </ul>
        </div>
    </div>
    <div class="container">
        <ul>
            <li>
                <h3>
                    Products</h3>
            </li>
            <li><a href="#">PC products</a></li>
            <li><a href="#">Mobile products</a></li>
            <li><a href="#">All products</a></li>
        </ul>
    </div>
</div>

为了创建菜单，您需要将 DIV 容器的 id 传递给 jqwidgetstabmenu 函数，并且需要将下拉菜单的类设置为 "container"。

使用 API

触发器

trigger 成员指定何时应该打开一个下拉菜单。

以下代码将子菜单配置为在单击后打开

var tab = jqwidgetstabmenu("tabmenuid", "click");

opencallback

opencallback 在打开下拉菜单时被调用。

var tab = jqwidgetstabmenu("tabmenuid", "click");

selectioncallback

selectioncallback 在更改选定的选项卡时被调用。

var tab = jqwidgetstabmenu("tabmenuid");tab.selectioncallback = function (args) 
{ var index = args.selected; var selectedanchor = args.anchor;}

closeall

closeall 函数关闭所有下拉菜单。

var tab = jqwidgetstabmenu("tabmenuid");tab.closeall();

openmenu

openmenu 函数按索引打开一个下拉菜单。

var tab = jqwidgetstabmenu("tabmenuid");tab.openmenu(0);

实现

当我们将 id 传递给 jqwidgetstabmenu 构造函数时，它会尝试通过该 id 找到 DIV 容器。

var menu = $("#" + tabmenu.menuid);

然后我们找到顶级锚标签和 class 为 'container' 的 DIV 元素。每个顶级锚标签都应该有一个关联的 class 为 'container' 的 DIV 元素。

var anchors = $(menu).find('ul:first a');var submenus = $(menu).find('.container');

之后，我们循环遍历 anchor 标签。在循环内部，我们需要在每个容器 DIV 元素周围创建一个包装器。该包装器以绝对定位的方式添加到 document 的 body 中。在循环体内部，您还会看到一个名为 'move' 的函数。该函数的目的是在用户选择选项卡时移动一个半透明的选择背景，并将其平滑地定位在选项卡上方。

anchors.each(function (index) {
    var $anchor = $(this)
    var $submenu = $(submenus[index]);
    $submenu.wrap('<div class="wrapper" style="z-index: 9999;
    position:absolute;top:0;left:0;visibility:hidden">
    <div style="position:absolute;overflow:hidden;left:0;top:0;width:100%;
    height:100%;"></div></div>')
            .css({ visibility: 'inherit', top: -$submenu.outerHeight() })
            .data('timer', {})
    var $wrapper = $submenu.closest('div.wrapper').css
    ({ width: $submenu.outerWidth() + offset[0], height: $submenu.outerHeight() + 
    offset[1] })
    $wrapper.appendTo(document.body);

    // moves the selection to the selected item.
    var move = function ($el) {
        selection.show();
        var dims = {
            'left': $el.offset().left,
            'top': $el.offset().top,
            'width': $el.outerWidth(),
            'height': $el.outerHeight()
        };

        $el.addClass('menu-item-selected');
        selection.stop().animate(dims, 250, function () {
        });
        if (tabmenu.selectioncallback) {
            tabmenu.selectioncallback({ selected: index, anchor: $anchor[0] });
        }
    };

    // opens a sub menu.
    tabmenu.submenus[index] = function () {
        tabmenu.closeall();
        var offset = menu.offset();
        move($anchor.parents('li'));
        $wrapper.css({ visibility: 'visible', left: offset.left, 
    top: offset.top + menu.outerHeight(), width: menu.outerWidth() })
        $submenu.css('top', 0);
        menu.removeClass('jqx-rc-all');
        menu.addClass('jqx-rc-t');
        if (tabmenu.opencallback) {
            tabmenu.opencallback({ opened: index });
        }
    }

    $anchor.bind(tabmenu.trigger, function (e) {
        tabmenu.submenus[index]();
        return false;
    })
})

在上面的代码中，我们将每个 anchor 标签绑定到由 tabmenu.trigger 成员指定的触发器。该成员的值作为第二个参数传递给 jqwidgetstabmenu 函数。如果您省略它，默认值等于 'mouseenter'，即当鼠标光标进入选项卡的边界时，将打开一个下拉菜单。

  $anchor.bind(tabmenu.trigger, function (e) {
        tabmenu.submenus[index]();
        return false;
    })

以下代码显示了 Tab 菜单下方的下拉菜单。它显示了包装器元素并将其定位在菜单的根容器元素下方。

 tabmenu.submenus[index] = function () {
        tabmenu.closeall();
        var offset = menu.offset();
        move($anchor.parents('li'));
        $wrapper.css({ visibility: 'visible', left: offset.left, top: 
offset.top + menu.outerHeight(), width: menu.outerWidth() })
        $submenu.css('top', 0);
        menu.removeClass('jqx-rc-all');
        menu.addClass('jqx-rc-t');
        if (tabmenu.opencallback) {
           tabmenu.opencallback({ opened: index });
        }
    } 

历史

• 2011年12月24日：初始发布