jquery UI 주요 스타일 변경

Question

jquery UI 탭을 사용하고 있으며 스타일을 크게 변경해야합니다. 배경 이미지, 테두리, 거의 모든 것을 재구성해야합니다. 최소한으로 보일 필요가 있으며 자체가 포함 된 것처럼 보이지 않습니다.

이 작업을 수행하는 가장 좋은 방법은 무엇입니까? 그러나 동일한 위젯에 달력 UI의 기본 UI 스타일을 사용해야합니다. 나는 많은 연구를 해왔고 모두가 테마 롤러를 지적한 것 같습니다. 그러나, 나는 색상과 테두리 반경을 변경하고 싶지 않습니다. 쓰레기를 삭제해야 해. 테마 롤러는 색상과 같은 것을 바꾸는 것처럼 보입니다 (실제 세계에서는 유용하지 않습니다). 같은 페이지에서 다른 UI 위젯의 스타일을 변경하지 않고도 탭에 CSS를 적용하려면 어떻게해야합니까? (일정을 그대로 유지하고 싶습니다)?

내 탭에 jquery UI를 사용하는 것이 가치가 있습니까?

Answer 1

Keith Wood의 상세한 블로그 게시물 JQuery UI 탭 스타일링을 확인하십시오.

특정 질문 나는 배경 이미지, 테두리, 거의 모든 rempve 필요

에 대한 답변. 나는 그것이 최소한의

가 키스 우드의 게시물이 섹션 "Remove most of the formatting"에보고해야합니다.

이외에도 원하는 효과를 얻기 위해 필요한 CSS가 추가되어 10 가지 스타일이 변경되었습니다.

JQuery UI Tabs Styling - Keith Wood Blog Post

Answer 2

CSS를 사용하면 상당히 간단합니다. 요소에는 ID 및 클래스가 있으며 CSS로 해당 요소를 만질 수 있습니다. Themeroller는 단지 빠른 것입니다.

기억해두면 탭 js를 조정하고 이미지를 추가하는 선 (동일한 플러그인 인 경우)을 조정하거나 원하는대로이 선을 모두 제거 할 수도 있습니다.

Answer 3

간단한 탭 기능을 쓸 때 AJAX 컨텐츠로드 및 탭 추가/제거와 같은 기본 기능은 필요 없다는 것을 알았습니다. 이러한 기능이 필요한 경우 직접 구현할 수 있습니다. 무엇이 jQuery UI 탭을 버리려고했는지는 DOM 요소를 다르게 구성해야한다는 것입니다. 나는 또한 최소한으로 보이게하기 위해 탭을 스타일링해야했으며, 처음부터 건물을 짓는 것보다는 많은 노력을 덜 수 있다고 생각했습니다.

필자가 가장 많이 놓친 기능은 jQuery UI 탭이 URL의 #으로 표시된 탭을 자동으로 선택하는 방법입니다. (나는 단지 복사 할 수 있음을 알지만 아직받지 못했습니다.)

---

UPDATE :하지만, 당신이 그것으로 고집하는 경우 그래, 당신이 어떤 ID를 사용하여 CSS를 대체 ​​할 수 있습니다 당신은 : 등등

#my-tabs .ui-state-default { 
    background-image: none; /* remove default bg image */ 
} 

와 ..

Answer 4

시도를 귀하의 CSS에 다음과 같은 CSS를 무시하는 CSS에 대한 .mytabs 가정합니다.

.mytabs li { 
     background : white !important; 
     border-top: 0 !important; 
     border-left: 0 !important; 
     border-right: 0 !important; 

    } 
    .mytabs li.ui-state-active { 
     background : white !important; 
     border-top: 0 !important; 
     border-left: 0 !important; 
     border-right: 0 !important; 
     margin: 0; 


    } 

.mytabs li a 
    { 
     color:   Black !important; 
     font-size:  1.4em !important; 
     font-weight: bolder; 
     padding:  4px 1.5ex 3px !important; 
    } 

Answer 5

일부 CSS에서는 jQuery UI와 함께 제공되는 표준 CSS를 쉽게 무시할 수 있습니다. 수정 된 CSS가 jQuery UI CSS 다음에 나타날 경우! important가 필요하지 않을 수도 있습니다.

로드 할 때 jQuery를 사용하여 각 요소에 클래스를 제거/추가 할 수도 있지만 약간 불필요한 것 같습니다.

Answer 6

! 중요한 속성이 기본 jquery UI 템플리트에 있어야하는지 궁금합니다. 예를 들어 탭을 상단 대신 왼쪽 또는 오른쪽으로 변경하면 'border-bottom'에는! important가 없어야합니다. 일반적으로 덮어 쓰므로!

Answer 7

거의 모든 것이 여기에 덮여있다,하지만 난 둘러보고 한 후 나머지 속성을 편집하는 동안 당신이 정말로, 하나의 클래스로 아주 ​​쉽게 필요하지 않은 물건을 던져 할 수있는 방법을 발견했다.

*[class*="ui-"] { 
    border-radius:0; 
    background-image: none; 
    . 
    . 
    . 
} 

이렇게하면 "ui-"로 시작하는 모든 클래스를 선택하고 jQuery UI에서 제거 할 항목을 제거합니다.

Answer 8

#my-tabs * { 
    background-image: transparent; 
}