하나의 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 노드를 반환하는 방법을 가지고있다. 그래서 대답은 다음과 같습니다

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

은 편집에 대한 응답 :

는 지금까지 내가 볼 수 있습니다, 당신은 체인이 작동하려면 widget()autocomplete() (또는 datepicker())와 방법 방법이 필요합니다. $()에 의해 반환 된 일반 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"); 
    } 
}); 

날짜 선택기 위젯이 조금 강하다는 것입니다, 그것은 일종의 반으로으로 구축으로 -하나씩 일어나는 것. 제공된 콜백 옵션 중 어느 것도 적합하지 않기 때문에 여기서 우리는 일관되게 수행하는 원숭이 패치가 필요합니다 기본 _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;