1

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

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

谢谢！

4

2 回答 2

2

正如彼得所说的那样使用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() 中的条件可能会根据您的布局而有所不同。对于多行按钮，我将有一个变量来存储该行的当前顶部偏移量，然后当一个元素与其不匹配时执行类添加。

于 2012-08-27T16:43:09.927 回答
0

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

于 2012-08-03T18:35:22.830 回答