jqueryui buttonset（）上的按钮之间的差距

Question

我遇到了一个有趣的现象，我的buttonset()在所有按钮之间都有间隙。显然，我希望他们像在jquery演示中那样对接。

我的代码很有库存

HTML

<div style="float:right;" id="filter-button-bar">
    <input type="radio" id="it_button" name="radio" class="filter-button" /><label for="it_button">Information</label>
     <input type="radio" id="rev_button" name="radio" class="filter-button" /><label for="rev_button">Revenue</label>
    <input type="radio" id="ent_button" name="radio" class="filter-button" /><label for="ent_button">Entertainment</label>
    <input type="radio" id="sec_button" name="radio" class="filter-button" /><label for="sec_button">Security</label>
    <input type="radio" id="asst_button" name="radio" class="filter-button" /><label for="asst_button">Assistants</label>
    <input type="radio" id="all_button" name="radio"  class="filter-button" checked="checked"/><label for="all_button">All</label>
</div>

JS

$(function() {
    $( "#filter-button-bar" ).buttonset();
    $( ".filter-button" ).button({
        icons: {
            primary: "ui-icon-search"
        }
    });
});

令人讨厌的是，当放入jsfiddle时，一切看起来都很棒。 jsfiddle

Answer 1

删除这些按钮之间的空格。这将解决您的问题：

<input type="radio" id="it_button" name="radio" class="filter-button" /><label for="it_button">Information</label><input type="radio" id="rev_button" name="radio" class="filter-button" /><label for="rev_button">Revenue</label><input type="radio" id="ent_button" name="radio" class="filter-button" /><label for="ent_button">Entertainment</label><input type="radio" id="sec_b Et cetera

除了少数几种情况外，HTML源代码中的空格通常被忽略：

• CSS：white-space: pre，pre-wrap，..（以及<pre>标记）
• 内联元素之间。

此更新后，您的代码似乎不太可读。如果您不想将整个代码放在一行，则可以在HTML标记中安全地添加换行符。

Answer 2

为了解决这个愚蠢的白空间问题，我用PHP打破了我的界限：

<input type='radio'><?
?><input type='radio'><?
?><input type='radio'>

这是一个可怕的解决方法，但打败了不可用的长线。

Answer 3

我正在寻找如何使用jquery删除这个空格我从here得到了删除textnode元素的想法：

$('.ui-buttonset').contents().filter(function () { return this.nodeType == 3; }).remove();

可以在文档加载中完成，在你的情况下我可以这样写：

$(function() {
    $(".filter-button").button({
        icons: {
            primary: "ui-icon-search"
        }
    })
    .parent().buttonset()
    .contents().filter(function () { return this.nodeType == 3; }).remove();
});

我在所有w3c浏览器+ IE8中测试它，它工作正常。 所以我的代码可读。

我使用最新的jquery ui 1.8.16

<强>更新

可能我们需要将右边距设为0（1px + 1px之间的边框）或-1px（介于其间的1px边框）以使其粘在一起。

.ui-buttonset .ui-button {
    margin-left: 0;
    margin-right: -1px;
}

Answer 4

要自动删除按钮组小部件的所有用法的空白，可以使用下面的代码覆盖和扩展jquery ui buttonset小部件构造函数

var original_create = $.ui.buttonset.prototype._create;
$.ui.buttonset.prototype._create = function() {
    this.element.contents().filter(function() {
        return this.nodeType == 3;
    }).remove();
    original_create.call(this);
}