如何创建像gmail“移动到”按钮这样的下拉按钮？答案

【问题标题】：how to create drop down button like gmail "move to" button?如何创建像gmail“移动到”按钮这样的下拉按钮？
【发布时间】：2011-01-30 08:13:34
【问题描述】：

我有一个用 php 编码的简单文件上传系统。

作为增加 UI 简洁性的一部分，我希望有一个类似的 gmail“移动到”按钮，我可以在其中选中多个复选框，然后单击按钮生成的下拉列表中的许多可能条目之一后，一些回发发生。

请指教。

谢谢。

理想情况下，将使用 jQuery。虽然我不是专家，但我有一些使用 jQuery 的小经验。

【问题讨论】：

标签： jquery user-interface button drop-down-menu

【解决方案1】：

我使用 jQuery Multiselect 来做类似的事情。

【讨论】：

嗨，这不是我想要的。我想像 gmail 移动到按钮一样，从下拉列表中选择一个条目后触发回发

【解决方案2】：

有点晚了，但是我的按钮带有使用 JQuery UI 的下拉选项列表解决方案：

jsfiddle 中的工作解决方案

html:

<button id="menuButton">Menu Button</button>
<ul style="z-index: 9999999;position: absolute;" id="menuElement">
    <li><a href="#">Select Green</a>

    </li>
    <li><a href="#">Select Red</a>

    </li>
    <li><a href="#">Select Gray</a>

    </li>
</ul>

代码：

var $menuButton = $("#menuButton");
var $menuElement = $("#menuElement");

$menuButton
    .button({
             icons: { 
                       secondary: "ui-icon-triangle-1-s"                 
                    }
            })
    .click(function (event) 
              {
                 $(document).one("click", function () 
                    {
                       $menuElement.css("visibility", "hidden");
                    });

                $menuElement.css("visibility", "visible");
                event.stopPropagation();
             });

$menuElement
    .menu({
             select: function (event, ui) 
                        {
                           $menuElement.css("visibility", "hidden");
                        }
         })
    .css("visibility", "hidden")
    .position({
                 my: "left top",
                 at: "left bottom",
                 of: $buttonElement
              });

【讨论】：