javascript - 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();
});