包装jQuery按钮组

Question

我有一个动态填充的jquery按钮组。唯一的问题是，如果有太多动态添加的按钮，它们会换行到下一行，而不是优雅地执行。以下是显示的内容：
(element a|about|us|lorem|
|ipsum|and|done)

这个问题的主要问题是第一行最右边的元素和第二行最左边的元素没有圆角，它们像所有其他按钮元素一样有方角不在按钮组的第一个或最后一个位置。反正有没有像这样的显示器？
(element a|about|us|lorem)
(ipsum|and|done)

谢谢！

Answer 1

正如彼得所说，使用offset()绝对是正确的方向。找到正确的元素后，您需要添加.ui-corner-right和.ui-corner-left类。

$("#box label").each(function(){   //loop through all the labels for the buttons
    var self = $(this);
    if( self.offset().top > self.height() ){ //find the first element on the second line
        self.addClass("ui-corner-left")
        .prev().prev().addClass("ui-corner-right") // move to the previous label on the above line
        return false;  // break out of the .each
   }
});

http://jsfiddle.net/KEfau/当然这仅适用于两行的内容，而.each（）内的分词可能会因您的布局而有所不同。对于多行按钮，我会有一个变量存储行的当前顶部偏移量，然后当一个元素不匹配时，它会添加类。

Answer 2

您可以尝试使用jQuery offset（）检测换行符，并将中断前的项目设置为您上次使用的同一个类，并将中断后的项目设置为与您的第一个相同的类。我不确定这是否会起作用，取决于元素如何得到圆角，我不熟悉jQuery-ui