Question

我正在使用jQuery UI的buttonset（）在标签内创建一个naviagation / tab栏。

<section id="menu-container" class="container">
    <nav id="group-menu" class="menu" data-bind="template: &#39;menuGroupTemplate&#39;">
        <div id="menu1">
            <input type="radio" id="radio1" name="radio" /><label for="radio1">Summary</label>
            <input type="radio" id="radio2" name="radio" checked="checked" /><label for="radio2">Category 1</label>
            <input type="radio" id="radio3" name="radio" /><label for="radio3">Category 2</label>                    
        </div>
    </nav>
</section>

我遇到的问题是我需要让导航栏延伸到它所包含的整个导航部分。

导航数据可能是动态的，因此静态填充是不够的。

我尝试了一个按比例填充元素的函数，但正如我写的那样，我注意到width()和outerWidth()似乎没有报告我在浏览器中看到的相同宽度（ chrome），所以我无法在任何接近正确的地方获得填充！

function layoutMenuBar() {
    var childNodes = parent.children().find('span');
    var childCount = childNodes.length;

    var sumWidth = 0;
    childNodes.each(function() {
        sumWidth = sumWidth + parseInt($(this).outerWidth());
    });

    var parentWidth = parseInt(parent.outerWidth());
    var padding = parentWidth - sumWidth;

    if (padding > 0) {
        var newSumWidth = 0;

        childNodes.each(function() {
            var elemWidth = parseInt($(this).outerWidth());
            var elemPad = parseInt(elemWidth / sumWidth * padding / 2);

            $(this).css('padding-left', elemPad);
            $(this).css('padding-right', elemPad);
        });
    }
}

任何人都可以提出更好的方法来解决这个问题吗？或解释我的代码会出现什么问题？

Answer 1

您是否尝试使用display属性，尤其是表格。

您可以将每个复选框（宽度）平均布局为您为nav元素指定的宽度：

nav {
    width: 100%;
    display: table;
}

#menu1 {
    display: table-row;
}

#menu1 > label {
    display: table-cell;
}

请参阅此操作：http://jsfiddle.net/william/FZC4q/3/。

动态扩展jQuery UI buttonset以填充父div

1 个答案: