Web应用程序中显示更多按钮的工具栏（ASP.NET 2.0）

Question

在ASP.NET 2.0应用程序中，有一个工具栏，其中显示了几个按钮（div），如下所示：

当用户调整（压缩）浏览器窗口时，如下所示：

这是因为工具栏div的高度是自动的，所以它将div包装到下面。但是，现在我想提一些修正高度，它只显示单行工具栏按钮。

在预期的行为中，如果工具栏div按钮超出该区域，则它们应如下所示，如桌面应用程序中的更多按钮，以访问未显示的按钮。 像这样：

如果在Web应用程序中无法实现预期的行为，那么任何人都可以帮助我实现这一目标或建议一些替代解决方案。 jQuery也用在这个应用程序中。 将不胜感激。

Answer 1

这是一个更简单但虽然可能不像@ PiLHA那样灵活的例子 此外，它可能需要一些调整，但它的工作原理！它会检查您的100％或任何宽度容器中适合的项目数量，并采取相应的行动。

jsFiddle

function topNavItems() {
    var items = $(".item");
    var listWidth = $(".list").width();
    var itemWidth = $(".item").width();
    var itemsFit = parseInt(Math.floor(listWidth / itemWidth));
    if (items.length > itemsFit) {
        $(".list").after("<div class='arrow'></div>");
        var array = [];
        $(".list .item").slice(itemsFit).each(function (index) {
            var value = $(this).text();
            array[index] = value;
        });
        $(".arrow").html("<select><option>>></option></select>");
        $.each(array, function (index, value) {
            $(".arrow select").append("<option>" + value + "</option>");
        });
    }    
}
topNavItems();
$(window).resize(function () {
    topNavItems();
});