使JQuery按钮充当下拉列表 [英] Making a JQuery button act as a dropdown

问题描述

以此JQuery UI Button示例作为参考：
，我也发布所有代码下面。

详情请参阅博客文章。

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 =buttonsetstyle =float：right;> 
< input id =btnDeletetype =buttonvalue =Deleteclass =buttononclick =ItemActionButtons.onDeleteClick.apply（this）/> 
< input id =btnCanceltype =buttonvalue =Cancelclass =buttononclick =ItemActionButtons.onCancelClick.apply（this）/> 
< / div> 
< div id =divSaveButtonclass =buttonsetstyle =float：right;> 
< input id =btnSavetype =buttonvalue =Saveclass =buttononclick =ItemActionButtons.onSaveClick.apply（this）/> 
< input id =btnSaveExtratype =buttonclass =buttonvalue =+onclick =ItemActionButtons.onSaveExtraClick.apply（this）/> 
 
< ul class =SaveExtraOptions ui-corner-bottomid =btnSaveExtraOptions> 
< li onclick =$（'＃btnSaveExtraOptions'）。toggle（）; ItemActionButtons.SaveAndNewClick.apply（this）>保存并新建< / li& 
< li onclick =$（'＃btnSaveExtraOptions'）。toggle（）; ItemActionButtons.SaveAndCopyClick.apply（this）>保存并复制< / 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 b $（'＃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' .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 $（＃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'）。 
 
 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> 
  

Take this JQuery UI Button sample as a reference: http://jqueryui.com/demos/button/#splitbutton

Now, how would you implement that dropdown when click the small button? My caution is mainly with the transformation .button() does to the actual button that messes the offset coordenates.

To sum it, I need opinions on how to correctly implement a dropdown on the click of a JQuery button that integrates with the current theme.

Thanks! Alex

解决方案

I finally made it and looks like the picture above.
I blogged about it here and I'm also posting all the code bellow.
Please refer to the blog post for deeper explanation.

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>

这篇关于使JQuery按钮充当下拉列表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！