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ソース内の空白は、通常は数例を除いて、HTMLで無視されます。

• CSS：white-space: pre、pre-wrap、...（と<pre>タグ）
• インライン要素間。

このアップデート後、あなたのコードはあまり読みにくくないようです。 1行にコード全体を配置したくない場合は、HTMLタグ内に改行を安全に追加することができます。

Answer 2

私はtextnode要素を削除するhereからアイデアを得たjqueryのを使用して、この空白を削除する方法を探しています：あなたのケースで、私はこのように書くことができ、

$('.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でテストしても問題ありません。 私のコードを読むことができます。

私はおそらく、我々は0（間に1ピクセル+の1ピクセルの境界線）に右マージンを加える必要があり

更新最新のjQuery UI 1.8.16

を使用

か-1px（間に1ピクセルの境界線）それは一緒に固執する。

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

Answer 3

この愚かなホワイトスペースの問題を回避するために、私は私の行を分割するためにPHPを使用：

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

それは恐ろしい回避策だがunusably-長い行を打ちます。自動的buttonsetウィジェットのすべての使用のための空白を削除するには

Answer 4

、1は

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