jQuery UI 탭 주요 스타일 변경
-
20-09-2019 - |
문제
jQuery UI 탭을 사용하고 있으며 스타일을 크게 변경해야합니다. 배경 이미지, 테두리 등 거의 모든 것을 제거해야합니다. 나는 최소한으로 보이고 자기가 포함 된 것처럼 보이지 않아야합니다.
이것을하는 가장 좋은 방법은 무엇입니까? 그러나 캘린더 위젯에는 기본 UI 스타일을 사용해야하지만 동일한 페이지에 있습니다. 나는 많은 연구를 해왔고 모두가 테마-롤러를 가리키는 것 같습니다. 그러나 나는 단지 색상과 경계 반경을 바꾸고 싶지 않습니다. 쓰레기를 삭제해야합니다. 테마-롤러는 색상과 같은 것들을 변화시키는 것 같습니다 (실제 세계에는 실제로 유용하지 않음). 같은 페이지에서 다른 UI 위젯의 스타일을 변경하지 않고 탭의 CSS를 어떻게 조정합니까 (캘린더가 그대로 유지되기를 원합니까)?
내 탭에 jQuery UI를 사용하는 것이 가치가 있습니까?
해결책
Keith Wood의 자세한 블로그 게시물을 확인해야합니다. 스타일링 jQuery UI 탭.
특정 질문에 대한 답
배경 이미지, 테두리 등 거의 모든 것을 제거해야합니다. 최소한으로 보일 필요가 있습니다
이 섹션에 있습니다 "대부분의 서식을 제거하십시오"Keith Wood의 게시물.
이 외에도 원하는 효과를 달성하는 데 필요한 CSS와 함께 10 가지 더 스타일 변경이 있습니다.
다른 팁
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;
}