jqueryui Buttonset() 上按钮之间的间隙

发布于 2024-12-09 08:01:20 字数 1442 浏览 0 评论 0原文

我遇到了一个有趣的现象,我的 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"
        }
    });
});

Screenshot

令人烦恼的是,当放入 jsfiddle 时,一切看起来都很棒。 jsfiddle

I am running into an interesting phenomenon where my buttonset() has gaps between all of the buttons. Obviously I would like them to butt up like in the jquery demo.

My code is fairly stock

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"
        }
    });
});

Screenshot

Annoyingly enough, when put into jsfiddle, all looks great. jsfiddle

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(4

玉环 2024-12-16 08:01:20

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

<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 源中的空白通常在 HTML 中被忽略,除了少数情况:

  • CSS: white-space: pre,pre-wrap,。 . (和
     标签)
  • 在内联元素之间。

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

Remove the whitespace between these buttons. This will fix your issue:

<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

Whitespace in the HTML source is usually ignored at HTML, except for a few cases:

  • CSS: white-space: pre,pre-wrap,.. (and the <pre> tag)
  • Between inline elements.

Your code seems not very readable after this update. You can safely add newlines within HTML tags, if you don't want to place your whole code at one line.

凝望流年 2024-12-16 08:01:20

为了解决这个愚蠢的空白问题,我使用 PHP 来打破我的行:

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

这是一个可怕的解决方法,但击败了无法使用的长行。

To get around this silly white-space issue, I used PHP to break my lines:

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

It's a hideous workaround but beats unusably-long lines.

梨涡 2024-12-16 08:01:20

我正在寻找如何使用 jquery 删除这个空格我从 这里得到了这个想法 删除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;
}

I am looking how to remove this whitespace using jquery I got the idea from here to remove the textnode element:

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

It can be done in the document load, in your case I can write like this:

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

I test it in all w3c browsers + IE8 and it work fine.
So my code readable.

I use the latest jquery ui 1.8.16

Update

Probably we need to make the right margin to 0 (1px+1px border in between) or -1px (1px border in between) to make it stick together.

.ui-buttonset .ui-button {
    margin-left: 0;
    margin-right: -1px;
}
聚集的泪 2024-12-16 08:01:20

要自动删除按钮集小部件的所有用途的空格,可以使用以下代码覆盖并扩展 jquery ui 按钮集小部件构造函数

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

To automatically remove whitespace for all uses of the buttonset widget, one could overwrite and extend the jquery ui buttonset widget constructor using the code below

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);
}
~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文