부트 스트랩은 가장 인기있는 프론트 엔드 프레임 워크 중 하나입니다. 프로젝트에서 부트 스트랩을 사용하면 반응 형 웹 페이지를 빠르게 구현할 수 있습니다.
Bootstrap에서 제공하는 많은 JavaScript 구성 요소 중 하나의 벽돌과 탭 구성 요소를 사용하려고하면 많은 성가신 동작을 찾을 수 있습니다.
이 기사를 발견 했으며이 기사는이 문제의 것이 무엇인지, 어떻게 해결하고 싶은지에 중점을 둡니다.
부트 스트랩의 탭
Bootstrap의 탭 구성 요소에는 탭 탐색 요소와 일부 컨텐츠 패널의 두 가지 핵심 사항이 포함되어 있습니다. 페이지가로드되면 첫 번째 패널이 .active 클래스를 적용합니다. 이 패널을 기본적으로 표시하십시오. 이 클래스는 JavaScript를 사용하여 패널의 가시성을 전환하고 Tab Navigation을 통해 이벤트를 트리거합니다.이 패널에 .active 클래스가 있으면 표시됩니다. 그렇지 않으면 패널이 숨겨져 있습니다.
한 곳에서 혼잡하지 않고 별도의 블록에서 더 나은 웹 컨텐츠가있는 경우 이러한 종류의 탭 구성 요소가 편리 할 수 있습니다.
왜 화성인가?
경우에 따라 각 패널 내의 내용은 반응 형 그리드 레이아웃 내에 표시되기에 적합합니다. 예를 들어, 다양한 상품, 서비스 및 폴더 항목은 그리드 형식으로 표시 될 수있는 컨텐츠 유형입니다.
그러나 그리드의 그리드가 높이가 같지 않으면 아래에서 볼 수있는 것과 같은 일이 발생합니다.
두 줄은 큰 간격으로 뻗어있어 레이아웃이 못 생겼습니다.
지금은 벽돌이 문제를 해결해야 할 때입니다. 이 지저분한 레이아웃에 일부 벽돌 기능을 추가하면 레이아웃이 화면의 실제 영역에 동적으로 적응하여 모든 손상된 레이아웃의 빈 간격을 제거합니다.
데모 페이지 설정
Bootstrap의 탭과 벽돌을 통합하는 방법을 보여주는 샘플 페이지를 만드는 것은 예상만큼 간단하지 않습니다.
이 기사의 데모 케이스는 부트 스트랩 웹 사이트에서 사용할 수있는 시작 템플릿을 기반으로합니다.
탭 패널의 각 그리드 프로젝트는 Bootstrap의 그리드 시스템 및 썸네일 구성 요소를 사용하여 구축됩니다. 다음은 해당 구조를 설명하는 코드 스 니펫입니다.
<div> <div> <img src = "http://lorempixel.com/200/200/abstract"> <div> <h3> 썸네일 레이블 </h3> <p> ... </p> <p> <a href = "#"role = "button </a> </a> <href ="rec = "button"</a> </p> </p> </p> < "</p> <"> div <!-두 번 더 반복하십시오 ...->
위의 코드는 큰 화면에 3 개의 열이있는 그리드와 작은 화면에 2 개의 열이 생성됩니다. Bootstrap의 그리드 시스템을 검토 해야하는 경우 Syed Fazle Rahman의 Bootstrap의 그리드 시스템에 대한 이해는 좋은 기사입니다.
예제 페이지의 탭 구성 요소에는 다음 HTML 구조가 있습니다.
<div role = "tabpanel"> <!-nav 탭-> <ul 역할 = "TACKIST"> <li 역할 = "프레젠테이션"> <a href = "#panel-1"aria-controls = "panel-1"robile = "tab"data-toggle = "tab"> 패널 1 </a> </li> <li 역할 = "Presentation"> <a href = "afin-2"#panel-2 "aia-control. 역할 = "탭"data-toggle = "tab"> panel 2 </a> </li> <li role = "presentation"> <a href = "#href ="#panel-3 "aria-controls ="panel-3 "role ="tab "data-toggle ="tab "> 패널 3 </a> </li> <li 역할 ="프리젠 테이션 "> <a href ="#panel-4 "aia-control. 역할 = "탭"data-toggle = "탭"> 패널 4 </a> </li> </ul> <!-탭 패널-> <div> <div role = "tabpanel"id = "panel-1"> <div> <div> <!-썸네일 간다-> </div> <div> <! 썸네일은 여기에 간다-> </div> ... </div> <!-엔드 메이슨-컨테이너-> </div> <!-종료 패널 -1-> <div role = "tabpanel"id = "panel-2"> <!-패널 내부와 동일합니다-> </div> <!-end panel-2-> <!-end tab-content-> </div </div ~ </div ~ </div ~ </div ~ </div ~ </div ~ </div.
위의 코드 스 니펫에 대한 몇 가지 메모는 다음과 같습니다.
HTML 주석 탭의 주요 구성 요소를 지적합니다. NAV 탭은 탭의 탐색 섹션을 표시하고 NAV 패널은 컨텐츠 패널을 표시합니다.
탭에 대한 링크는 HREF 속성을 통해 해당 ID 속성의 동일한 값을 가진 컨텐츠 패널에 연결됩니다. 예를 들어, href = "#panel-1"과의 링크는 id = panel-1 인 컨텐츠 패널을 엽니 다.
탐색 섹션의 각 앵커 태그에는 data-toggle = "탭"이 포함되어 있습니다. 이 태그를 사용하면 추가 자바 스크립트를 작성하지 않고도 탭 구성 요소가 작동 할 수 있습니다.
Masonry의 대상 요소에는 모든 그리드 항목을 포함하는 래퍼 디바른 요소에 적합한 .masonry-container 클래스가 있어야하며 각 단일 그리드 항목에 대해 .item 클래스에 적용해야합니다.
Masonry Library의 전체 전력을 보려면 그리드 품목의 높이가 다른지 확인하십시오. 예를 들어, 하나의 프로젝트 이미지 삭제, 다른 프로젝트의 단락을 단축시키는 등.
전체 코드는 CodePen의 예제에 대한 코드를 확인하십시오.
벽돌 도서관 추가
Masonry의 공식 웹 사이트에서 "다운로드"버튼을 클릭하여 Masonry.pkgd.min.js를 다운로드 할 수 있습니다.
레이아웃 문제를 피하기 위해 라이브러리의 저자는 이미지로드 된 플러그인과 함께 Masonry를 사용하는 것이 좋습니다.
벽돌은 jQuery가 필요하지 않습니다. 그러나 Bootstrap의 JavaScript 구성 요소는 이미 jQuery를 사용하고 있기 때문에 jQuery 방식으로 벽돌을 초기화합니다.
이것은 jQuery 및 ImagesLoaded로 벽돌을 초기화하는 데 필요한 코드 스 니펫입니다.
var $ container = $ ( '. Masonry-Container'); $ container.imagesloaded (function () {$ container.masonry ({columnWidth : '.item', itemsElector : '.item'});});위의 코드는 모든 그리드 항목을 $ 컨테이너라는 변수로 랩핑하는 DIV를 저장합니다.
다음으로 Masonry는 $ 컨테이너에서 권장되는 두 가지 옵션으로 초기화합니다. columnwidth 옵션은 수평 그리드 열의 너비를 나타냅니다. 여기에서 단일 그리드 항목의 너비는 단일 그리드 항목의 클래스 이름을 사용하여 설정됩니다. 항목 선거 옵션은 프로젝트 요소로 사용되는 하위 요소를 나타냅니다. 여기에서는 단일 그리드 항목으로 설정됩니다.
이제 코드를 테스트 할 시간입니다.
죄송합니다! 숨겨진 패널에 무슨 문제가 있습니까?
부트 스트랩 탭을 사용하지 않는 웹 페이지에서 위의 코드는 마술과 같습니다. 그러나이 경우 곧 흥미로운 행동이 나타날 것입니다.
먼저 기본적으로 표시된 탭 패널 내부의 그리드가 올바르게 표시되므로 좋아 보입니다.
그러나 탭 탐색 링크를 클릭하여 숨겨진 패널의 내용을 표시하면 다음이 발생합니다.
소스 코드를 살펴보면 Masonry는 예상대로 트리거되었지만 각 항목의 위치는 올바르게 계산되지 않습니다. 그리드 항목은 카드 데크처럼 쌓입니다.
그게 전부는 아닙니다. 브라우저 창 크기를 조정하면 이러한 그리드 항목이 올바르게 배치 될 수 있습니다.
이 레이아웃 오류를 해결해 봅시다
탭의 탐색 링크를 클릭 한 후이 예상치 못한 레이아웃 오류가 더 분명해 지므로 부트 스트랩 탭에서 트리거 된 이벤트를 더 자세히 살펴 보겠습니다.
이벤트 목록은 매우 짧습니다. 다음과 같이.
show.bs.tab 표시 페이지를 표시 할 탭 페이지를 트리거하지만 새 탭 페이지가 표시되기 전에
showing.bs.tab 탭 페이지가 표시된 후 표시 할 탭 페이지를 트리거합니다.
hide.bs.tab 트리거 새 탭 페이지가 표시되면 (이전에 표시된 탭 페이지가 숨겨집니다)
새 탭 페이지가 표시된 후 hidden.bs.tab이 발사됩니다 (이전 표시 탭 페이지가 숨겨져 있음)
탭 페이지가 표시된 후 그리드 레이아웃이 엉망이되므로 Show.bs.tab 이벤트로 이동합니다. 여기에 원래 코드 아래에 코드를 배치합니다.
$ ( 'a [data-toggle = tab]'). 각 (function () {var $ this = $ (this); $ this.on ( 'ship.bs.tab', function () {$ container.imagesloaded (function () {$ container.masonry위 코드에서 일어나는 일 :
jQuery .Each () 함수는 각 탭 탐색 링크를 통해 고리하고 ship.bs.tab 이벤트를 리터텐시킵니다. 이 이벤트가 트리거되면 해당 패널이 보이고로드 후 모든 이미지를 다시 시작합니다.
코드를 테스트합시다
기사를 계속 팔로우하는 경우 브라우저에서 샘플 페이지를 직접 시작하거나 아래 코드 펜 예제를 사용하여 결과를 확인하십시오.
응답 레이아웃 효과를 테스트하기 위해 전체 예제 페이지를 살펴 보겠습니다.
탭 내비게이션 링크를 클릭하고 현재 각 패널에서 그리드 항목이 고르게 적용되는 방식에주의를 기울이십시오. 브라우저 크기를 변경하면 그리드 프로젝트가 올바르게 재배치되고 애니메이션 효과가 좋은 결과가 나옵니다.
그게 다야, 작업이 완료되었습니다!
결론적으로
이 게시물에서는 Bootstrap의 탭과 Masonry JavaScript 라이브러리를 통합하는 방법을 보여주었습니다.
두 스크립트 모두 사용하기 쉽고 매우 강력합니다. 그러나 두 가지를 모두 정리하면 숨겨진 탭에 영향을 미치는 일부 레이아웃 취약점에 직면하게됩니다. 위에서 볼 수 있듯이 트릭은 각 패널이 보이면 벽돌 라이브러리를 다시 시작하는 것입니다.