1つのjQuery UIウィジェットから丸い角を削除するにはどうすればよいですか？

Question

私の特筆すべき問題は、オートコンプリート機能に丸いコーナーを持たせたくないということです。しかし、丸いコーナーを持つ他のすべてのウィジェットはすべきです。
オートコンプリート専用のコーナーを無効にするパラメータはありますか？

編集

これは答えることができる場合を見てみましょう。

オンページDatepickerです。

私はすべてのラウンドコーナークラス（ヘッダーと次の前のボタン）を削除したいと思います。

$("#datepicker").datepicker('widget').removeClass('ui-corner-all');は機能しません。

Answer 1

丸い角にしたくない要素の新しいCSSクラスを作成します。

p.rounded { border-radius: 10px; } 

p.none-rounded { border-radius: 0; }

Answer 2

非常に遅れたが、ここでそれが行く：

のjQuery UIウィジェットは、ウィジェット自体のHTMLノードを返すメソッドを、持っています。 だから、答えは次のようになります。EDITへの対応

$('#someinput').autocomplete(...).autocomplete('widget').removeClass('ui-corner-all'); 

：

私の知る限り見ることができる、あなたはautocomplete()（またはdatepicker()）とチェーンwidget()方法に必要なそれを動作させるための方法。 $()によって返される通常のHTMLノードではうまくいかないようです。

Answer 3

このcssクラスをウィジェットのコーナーを持つ要素に割り当てます。

.ui-corner-flat { 
    border-top-left-radius: 0px !important; 
    border-top-right-radius: 0px !important; 
    border-bottom-left-radius: 0px !important; 
    border-bottom-right-radius: 0px !important; 
} 

$("#elementwithcorners").addClass("ui-corner-flat"); 

Answer 4

は、私はオートコンプリートウィジェットのこの

$("#signup").dialog(
     { 
      create: function (event, ui) { 

       $(".ui-dialog").css('border-bottom-left-radius','0px'); 
      }, 

     } 
    ); 

Answer 5

_suggest()方法はmenu.refresh()呼び出したコンストラクタで左下半径

を除去し、したがって、メニュー項目のui-corner-allクラスをリセットします入力が変化するたびに、しかし、open()コールバックが_suggest()内のすべてのmenu.refresh()呼び出しの後に呼び出され、そして所望のようにクラスを調整するための賢明な場所です：

$("#autocomplete").autocomplete("option", { 
    open: function(event, ui) { 
    $(this).autocomplete("widget") 
      .menu("widget").removeClass("ui-corner-all") 
      .find(".ui-corner-all").removeClass("ui-corner-all"); 
    } 
}); 

日付ピッカーウィジェットは少し厳しいですが、それは一種の半ように組み込まれているとして、 -singleton。指定したコールバックオプションのどれが適していないので、ここでは、それを一貫して行うためにモンキーパッチを必要とする：デフォルト_updateDatepicker()実装は戻り値がないことを

// store the built-in update method on the "global" instance... 
$.datepicker.__updateDatepicker = $.datepicker._updateDatepicker; 
// ...and then clobber with our fix 
$.datepicker._updateDatepicker = function(inst) { 
    $.datepicker.__updateDatepicker(inst); 
    inst.dpDiv.removeClass("ui-corner-all") 
     .find(".ui-corner-all").removeClass("ui-corner-all"); 
}; 

注意。また、_updateDatepicker()メソッドがでなく、のインタフェースメソッドであることに注意してください。したがって、利用可能であるとは限りません。

.ui-autocomplete.ui-menu.ui-corner-all, 
.ui-autocomplete.ui-menu .ui-menu-item > a.ui-corner-all, 
.ui-datepicker.ui-corner-all, 
.ui-datepicker-header.ui-corner-all, 
.ui-datepicker-next.ui-corner-all, 
.ui-datepicker-prev.ui-corner-all { 
    border-radius: 0; 
} 

より特異性（または!important指令）これらのセレクタが尊重されることを保証するために使用することができる。このように、角の修正を達成する最も一貫性のある方法は、線に沿って、適切なCSSです。これはまさにjQueryがテーマクラス–を使っていることです。興味深いハックですが、スタイルが利用できない限り、それほどクリーンなオプションはありません。＆hellip;