jquery 도구 탭 tab/tab_jquery

편리하고 사용하기 쉽지만 개인적으로 UI 성능은 별로 좋지 않다고 생각합니다. 오늘 우연히 jquery 기반의 UI 성능 프레임워크인 jquery 도구를 보았습니다. UI 기능 표시 스타일이 flex와 유사합니다. . 프레임워크는 탭(탭/탭) 오버레이(오버레이), 도구 설명(프롬프트 상자), 스크롤 가능(스크롤 정보 표시줄), 노출(강조 표시), flahembed(비디오 재생 포함)(공식 웹 사이트 호출) 등 6가지 주요 기능 범주를 제공합니다. 자체적으로 6가지 주요 도구), 이러한 6가지 주요 기능 범주 각각에는 서로 간섭하지 않는 자체 독립적인 지원 패키지가 있습니다. 사용자는 자신의 필요에 따라 다운로드할 수 있으므로 페이지 로딩 시 js 파일 다운로드의 영향을 줄일 수 있습니다. 속도. 기능이 그다지 포괄적이지는 않지만 소수라고 할 수 있지만 세련되었다고 할 수 있습니다. 모두 현재 일반적으로 사용되는 기능이며 jquery ui의 일부 단점을 잘 보완하고 jquery의 UI 기능을 특정 수준으로 강화할 수 있습니다. 정도. 사실 제가 가장 높이 평가하는 점은 개발 비용을 효과적으로 제어하면서 사용자 경험을 크게 향상시킬 수 있는 플렉스 스타일입니다.
오늘은 jquery 도구의 탭을 자세히 살펴보고 공식 문서를 바탕으로 요약해 보겠습니다.
먼저 작업의 대상 HTML 코드를 제공합니다.

코드를 복사합니다. 코드는 다음과 같습니다.

• tab1
  
• tab2


• tab3< /a>< /li>
  
  
  

  탭은 웹에서 가장 인기 있는 사용자 인터페이스 구성요소입니다. 사용이 직관적이고 익숙하며 무엇보다도 페이지를 더욱 친숙하게 구성할 수 있습니다. /p>
  테이블 콘텐츠테이블2 열기

  
  
  
  

  in faucibus orci luctus et posuere cubilia Curae; Aenean commodo pede a eros volutpat viverra. /a>

  
  

  Vestibulum ante ipsum primis in faucibus orci luctus et ultrices cubilia Curae.
  

  
  tab3 콘텐츠

) 메소드, 여기서 tabs 메소드는 다음 세 가지 메소드를 제공합니다:
1. $("ul.tabs-t").tabs("div.tabsContent>div") //이 메소드는 탭을 간단하게 구성할 수 있습니다
2. $("ul.tabs-t").tabs("div.tabsContent>div" ,{config object}) //이 방법은 구성 개체를 사용하여 탭을 구성하고 다양한 탭 표시에 적합합니다.
3. $("ul.tabs-t").tabs("div.tabsContent>div" ,콜백 함수) //콜백 함수를 통해 탭에 대한 추가 작업을 수행합니다.
다음은 2의 config 객체 매개변수 구현 및 설명입니다.




코드 복사