jQuery UI 탭 주요 스타일 변경

StackOverflow https://stackoverflow.com/questions/2459223

문제

jQuery UI 탭을 사용하고 있으며 스타일을 크게 변경해야합니다. 배경 이미지, 테두리 등 거의 모든 것을 제거해야합니다. 나는 최소한으로 보이고 자기가 포함 된 것처럼 보이지 않아야합니다.

이것을하는 가장 좋은 방법은 무엇입니까? 그러나 캘린더 위젯에는 기본 UI 스타일을 사용해야하지만 동일한 페이지에 있습니다. 나는 많은 연구를 해왔고 모두가 테마-롤러를 가리키는 것 같습니다. 그러나 나는 단지 색상과 경계 반경을 바꾸고 싶지 않습니다. 쓰레기를 삭제해야합니다. 테마-롤러는 색상과 같은 것들을 변화시키는 것 같습니다 (실제 세계에는 실제로 유용하지 않음). 같은 페이지에서 다른 UI 위젯의 스타일을 변경하지 않고 탭의 CSS를 어떻게 조정합니까 (캘린더가 그대로 유지되기를 원합니까)?

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

도움이 되었습니까?

해결책

Keith Wood의 자세한 블로그 게시물을 확인해야합니다. 스타일링 jQuery UI 탭.

특정 질문에 대한 답

배경 이미지, 테두리 등 거의 모든 것을 제거해야합니다. 최소한으로 보일 필요가 있습니다

이 섹션에 있습니다 "대부분의 서식을 제거하십시오"Keith Wood의 게시물.

이 외에도 원하는 효과를 달성하는 데 필요한 CSS와 함께 10 가지 더 스타일 변경이 있습니다.

jQuery UI 탭 스타일 - Keith Wood 블로그 게시물

다른 팁

AJAX 컨텐츠로드 및 동적 추가/탭의 탭을 추가/제거하는 것과 같은 대부분의 내장 기능이 필요하지 않다는 것을 깨달았을 때 나만의 간단한 탭 기능을 작성하기로 결정했습니다. 이러한 기능이 필요한 경우 직접 구현하기가 쉽습니다. jQuery UI 탭을 버리게 한 것은 DOM 요소를 다르게 구성해야한다는 것입니다. 또한 최소한으로 보이도록 탭을 스타일링해야했으며 처음부터 건물이 많이 제거하는 것보다 노력이 줄어들 것이라고 생각했습니다.

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

업데이트 : 그러나 네, 당신이 그것을 고수하고 있다면, 당신은 당신이 가진 ID를 사용하여 CSS를 무시할 수 있습니다.

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

등등..

CSS에서 다음을 시도해보십시오. 시작해야합니다 

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

jQuery UI와 함께 제공되는 표준 CSS를 쉽게 무시할 수있는 일부 CSS에서는 쉽습니다. jQuery UI CSS 이후에 수정 된 CSS가 나타나면 중요하지 않을 수 있습니다.

부하에 jQuery를 사용하여 각 요소에 클래스를 제거/추가 할 수 있지만 약간 불필요하게 보입니다.

CSS에서는 매우 간단해야합니다. 귀하의 요소에는 ID와 클래스가 있으며 CSS와 접촉 할 수 있습니다. Themeroller는 빠른 일입니다.

기억하면 탭 js를 조정하고 이미지를 추가하는 선 (동일한 플러그인 인 경우)을 조정하거나 해당 라인을 좋아하는 경우 전체를 제거 할 수도 있습니다.

중요한 속성이 기본 jQuery UI 템플릿에 있어야하는지 궁금합니다. 예를 들어, 탭을 상단 대신 왼쪽 또는 오른쪽으로 변경하면 '국경-바닥'은 일반적으로 덮어 쓰기 때문에 중요하지 않아야합니다.

거의 모든 것이 여기에서 다루었지만, 나는 주변을 둘러 보았고 단일 수업으로 쉽게 필요로하지 않는 것들을 던질 수있는 방법을 찾았고 나머지 속성을 편집했습니다.

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

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

 #my-tabs * {
    background-image: transparent;
}
라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top