使JQuery按钮变成下拉列表

Question

请参考这个JQuery UI按钮示例：http://jqueryui.com/demos/button/#splitbutton 现在，当单击小按钮时，您将如何实现下拉菜单？ 我的主要注意事项是.button()对实际按钮进行的转换会干扰偏移坐标。

总之，我需要意见，以便正确地在单击JQuery按钮时实现下拉菜单，并与当前主题集成。

谢谢！ Alex

- AlexCode

---

只需在单击事件中添加代码以显示下拉div。 - Ibu

Answer 1

我终于做到了，看起来就像上面的图片。
我在这里写了关于它的博客，同时我也发布了所有的代码如下。
请参考博客文章获取更深入的解释。

CSS

<style type="text/css">

    .ItemActionButtons{}
    .ItemActionButtons .SaveExtraOptions
    {
        display: none; list-style-type: none; padding: 5px; margin: 0; border: 1px solid #DCDCDC; background-color: #fff; z-index: 999; position: absolute;
    }
    .ItemActionButtons .SaveExtraOptions li
    {
        padding: 5px 3px 5px 3px; margin: 0; width: 150px; border: 1px solid #fff;
    }
    .ItemActionButtons .SaveExtraOptions li:hover
    {
        cursor: pointer;
        background-color: #DCDCDC;
    }
    .ItemActionButtons .SaveExtraOptions li a
    {
        text-transform: none;
    }
</style>

HTML

<div class="ItemActionButtons">
    <div class="buttonset" style="float: right;">
        <input id="btnDelete" type="button" value="Delete" class="button" onclick="ItemActionButtons.onDeleteClick.apply(this)" />
        <input id="btnCancel" type="button" value="Cancel" class="button"onclick="ItemActionButtons.onCancelClick.apply(this)" />
    </div>  
    <div id="divSaveButton" class="buttonset" style="float: right;">
        <input id="btnSave" type="button" value="Save" class="button" onclick="ItemActionButtons.onSaveClick.apply(this)" />
        <input id="btnSaveExtra" type="button" class="button" value="+" onclick="ItemActionButtons.onSaveExtraClick.apply(this)" />

        <ul class="SaveExtraOptions ui-corner-bottom" id="btnSaveExtraOptions">
            <li onclick="$('#btnSaveExtraOptions').toggle(); ItemActionButtons.SaveAndNewClick.apply(this)">Save and New</li>
            <li onclick="$('#btnSaveExtraOptions').toggle(); ItemActionButtons.SaveAndCopyClick.apply(this)">Save and Copy</li>
        </ul>
    </div>
</div>

JavaScript

<script type="text/javascript">

    $(document).delegate('#btnSaveExtra', 'mouseleave', function () { setTimeout(function(){ if (!ItemActionButtons.isHoverMenu) { $('#btnSaveExtraOptions').hide(); }}, 100, 1) });
    $(document).delegate('#btnSaveExtraOptions', 'mouseenter', function () { ItemActionButtons.isHoverMenu = true; });
    $(document).delegate('#btnSaveExtraOptions', 'mouseleave', function () { $('#btnSaveExtraOptions').hide(); ItemActionButtons.isHoverMenu = false; });

    var $IsHoverExtraOptionsFlag = 0;
    $(document).ready(function () {
        $(".button").button();
        $(".buttonset").buttonset();
        $('#btnSaveExtra').button({ icons: { primary: "ui-icon-plusthick" } });
        $('#btnSaveExtraOptions li').addClass('ui-corner-all ui-widget');
        $('#btnSaveExtraOptions li').hover(
            function () { $(this).addClass('ui-state-default'); },
            function () { $(this).removeClass('ui-state-default'); }
        );
        $('#btnSaveExtraOptions li').mousedown(function () { $(this).addClass('ui-state-active'); });
        $('#btnSaveExtraOptions li').mouseup(function () { $(this).removeClass('ui-state-active'); });
    });

    var ItemActionButtons = {
        isHoverMenu: false,

        AllowDelete: function (value) { value ? $("#btnDelete").show() : $("#btnDelete").hide() },
        AllowCancel: function (value) { value ? $("#btnCancel").show() : $("#btnCancel").hide(); },
        AllowSave: function (value) { value ? $("#btnSave").show() : $("#btnSave").hide() },
        AllowSaveExtra: function (value) { value ? $("#btnSaveExtra").show() : $("#btnSaveExtra").hide() },

        onDeleteClick: function () { },
        onCancelClick: function () { },
        onSaveClick: function () { },
        onSaveExtraClick: function () {
            $('#btnSaveExtraOptions').toggle();

            var btnLeft = $('#divSaveButton').offset().left;
            var btnTop = $('#divSaveButton').offset().top + $('#divSaveButton').outerHeight(); // +$('#divSaveButton').css('padding');
            var btnWidth = $('#divSaveButton').outerWidth();
            $('#btnSaveExtraOptions').css('left', btnLeft).css('top', btnTop);
        },
        SaveAndNewClick: function () { },
        SaveAndCopyClick: function () { }
    }

</script>

- AlexCode

Answer 2

一个插件也可用于完成此操作。 jQuery下拉按钮。

- Zahid Riaz

Answer 3

HTML：

<div id="container"> 
    <span class="arrow">&or;</span> <span class="default">Choose your option...</span>
    <input type="hidden" value="" class="mehidden"/>
    <ul class="selectBox">
        <li>One</li>
        <li>Two</li>
        <li>Three</li>
    </ul>
</div>

CSS：

.arrow
{
    background: none repeat scroll 0 0 #FFFFFF;
    border: 1px solid #CCCCCC;
    font-size: 0.8em;
    font-weight: bold;
    height: 26px;
    left: 208px;
    line-height: 26px;
    position: absolute;
    text-align: center;
    vertical-align: middle;
    width: 26px;
    z-index: 100;
}

.selectBox
{
    border: 1px solid #1F1F1F;
    list-style-type: none;
    margin: 0;
    padding: 3px;
    position: absolute;
    width: 200px;
    display:none;
    top: 25px;
}

#container
{
    position:relative
}

.toggler
{
    overflow:visible;
}

.default
{
    border: 1px solid #1f1f1f;
    width:200px;
    height:20px;
    padding:3px;
    position:absolute
}

.selectBox li:hover
{
    background:#ddd
}

JQUERY：

$('.arrow').click(function() {
    $('.selectBox').slideToggle(200).css('borderTop', 'none');
    $('.selectBox li').click(function() {
        $('.mehidden').val($(this).text());
        $('.default').text($(this).text());
        $('.selectBox').slideUp(200);
    });
});

- thecodeparadox

---

@AlexCode，也许我的解决方案不完全符合你的要求。但我发布这个帖子是为了帮助你制作自己的下拉菜单。 - thecodeparadox

谢谢，伙计。我的担忧更多地集中在与jQuery的布局集成以及确保它在主题上正确融合，而不是如何实现基本的下拉功能。 看看我的解决方案帖子。 - AlexCode

Answer 4

在我看来，下拉菜单应该始终出现在其他内容的上方，而不是将其推下，因此绝对定位非常适合。基本上，需要在按钮和下拉菜单周围添加一个带有position: relative的包装器div（它将具有position:absolute; display:none），并在单击时切换下拉菜单的可见性。下拉菜单的绝对定位不应受到包装器div的其他子元素（例如按钮）的影响，因此它将在CSS中精确地显示在您告诉它的位置。

- chrisfrancis27

---

谢谢Chris。我知道如何定位并实现我所要求的基本功能，我的问题在于.button()对实际<input type="button" />控件进行的转换会干扰偏移坐标，并且如果我更改主题，我无法保证返回的坐标将正确工作。 - AlexCode

啊，好的，那么在进行.button()转换之前，是否可以设置按钮的宽度和高度以匹配转换后的尺寸？除非你所说的“坐标”是我想的其他东西。 - chrisfrancis27