jQuery UI 버튼 : 단일 버튼에 사용되는 클래스를 어떻게 무시합니까?

Question

나는 그것을 사용하고있다 jQuery UI 테마를 기반으로 상자 밖으로 라이브러리.

링크를 버튼으로 렌더링하는 것은 좋지만 색상이 다른 버튼을 재정의해야합니다.

사용할 특정 버튼의 특정 클래스를 어떻게 지정합니까?

Answer 1

나는 특정 버튼이나 버튼에 ID를 제공하고 :

$("#buttonId").removeClass().addClass("myClass");

자체 ID가있는 여러 버튼에 적용하려면 :

$("#buttonId, #anotherButton").removeClass().addClass("myClass");

Answer 2

jQuery UI 버튼의 CSS를보고 버튼을 지정하지만 jQuery UI 클래스 대신 자신의 클래스를 사용하는 CSS의 구조를 복제하는 것이 좋습니다. 이 CSS에 필요한 재정의를 만들고 jQuery UI CSS 다음에 포함하십시오. CSS는 가장 구체적인 선택기의 조합을 사용합니다 그리고 적용 할 값을 결정하도록 주문합니다. 이렇게하면 jQuery에서 사용하는 각 CSS 선택기에 대해 동일한 특이성을 갖도록하여 CSS가 순서를 기준으로 우선 순위를 차지할 수 있습니다.

스매싱 잡지가 있습니다 기사 그것은 당신이 특이성 문제에 대해 알고 싶어하는 것보다 더 많은 정보를 가지고있을 것입니다.

Answer 3

당신은 또한 수:

1. 브라우저에서 개발자 도구를 사용하십시오 (Chrome에는 훌륭한 도구가 있습니다).
2. jQuery UI의 클래스가 버튼 색상을 정의하는 클래스를 확인하십시오.
3. "! 중요한"속성으로 CSS 파일에서 재정의하십시오.

예를 들어, jQuery UI 스피너 제어를 무시하고 경계를 제거해야 할 때 Chrome Dev 도구를 사용하여 테두리를 정의하는 클래스를 찾았습니다. 그런 다음 CSS에서 : 다음과 같은 것을 추가했습니다.

.<jquery-ui-class-that-i-found> { border: 0px !important; }

잘 작동합니다!

Answer 4

버튼 API에는 매개 변수를 전달하여 색상을 변경할 수있는 이와 같은 구성이 포함되어야한다고 생각합니다.

$("button").button({background:"FFFFFF",hover:"FFFFF"}); 

이것은 시각적 속성의 일부를 변경할 수있는 아이디어 일뿐입니다.

Answer 5

나는 이것이 나를 위해 효과가 있음을 알았다 : $ ( ". btnsave"). RemoveClass ( "ui-state-default"). addClass ( "savebuttonstyling");

기본적으로 UI-State-Default 클래스를 제거한 다음 배경색 등에 직접 추가해야합니다.

Thsi는 둥근 코너 클래스 등이 유지되었고 배경색 등을 수정할 수 있음을 의미했습니다.

Answer 6

특정 버튼에 대해 추가/다른 경우가 있으려면 클래스 = "MyButtonClass OtherbuttonClass"와 같은 클래스를 버튼에 제공합니다. 여러 클래스가 허용됩니다. 그런 다음 수업에 대한 CSS 규칙을 추가하십시오 (ES)

.mybuttonclass
{
   background-color: red;
}
.otherbuttonclass
{
   color:white;
}

따라서 배경은 흰색 텍스트 또는 원하는 조합으로 빨간색이며 위의 CSS (Cascade)의 항목을 무시할 수 있습니다. (.CSS 파일은 jQuery UI CSS 파일 이후에 연결되어 있거나 페이지의 인라인으로 연결되어 있으며, 둘 다 jQuery UI CSS를 무시할 것입니다.