재단-JavaScript
이 장에서 우리는 JavaScript 에 대해 공부할 것 입니다. Foundation에서 JavaScript를 설정하는 것은 쉽습니다. 필요한 것은 jQuery뿐입니다.
자바 스크립트 설치
ZIP 다운로드, 패키지 관리자 또는 CDN을 사용하여 Foundation JavaScript 파일을 가져올 수 있습니다. 코드에서 닫는 <body> 앞에 배치 된 <script> 태그로 jQuery 및 Foundation에 대한 링크를 제공하고 Foundation이 jQuery 후에로드되는지 확인할 수 있습니다. 자세한 내용은 여기를 클릭하십시오 .
파일 구조
당신이 명령 줄을 통해 재단을 설치하는 경우, 재단은 다음과 같은 개별 파일로 다운로드 플러그인 foundation.tabs.js , foundation.dropdownMenu.js , foundation.slider.js 등등하고있다. 이 모든 파일은 모든 플러그인을 한 번에 제공하는 Foundation.js 로 결합됩니다 . 플러그인을 사용하려면 먼저 Foundation.core.js 를로드해야합니다.
예를 들어-
<script src = "js/jquery.min.js"></script>
<script src = "js/foundation.core.js"></script>
<script src = "js/foundation.tabs.js"></script>
특정 플러그인에는 Foundation 설치와 함께 제공되는 특정 유틸리티 라이브러리가 필요할 수 있습니다. 다음 장 JavaScript 유틸리티 에서 특정 플러그인 요구 사항에 대해 자세히 알아볼 수 있습니다 .
개별 파일을로드하면 특히 모바일 사용자에게 네트워크 오버 헤드가 발생합니다. 더 빠른 페이지 로딩을 위해 grunt 또는 gulp 를 사용하는 것이 좋습니다.
초기화 중
재단 () 함수를 한 번에 플러그인 모든 재단을 초기화하는 데 사용됩니다.
예를 들어-
(document).foundation();
플러그인 사용
데이터 속성을 사용하여 플러그인은 플러그인 이름과 일치하므로 HTML 요소에 연결됩니다. 단일 HTML 요소는 한 번에 하나의 플러그인 만 가질 수 있지만 대부분의 플러그인은 다른 요소 내에 중첩 될 수 있습니다. 예를 들어, 툴팁 링크는 data-tooltip 을 추가하여 생성됩니다 . 자세한 내용은 여기를 클릭하십시오 .
플러그인 구성
플러그인은 구성 설정을 사용하여 사용자 정의 할 수 있습니다. 예를 들어, 아코디언이 위아래로 움직이는 속도를 설정할 수 있습니다 . 플러그인 설정은 플러그인을 사용하여 전역 적으로 변경할 수 있습니다.DEFAULTS특성. 자세한 내용은 여기를 클릭하십시오 .
페이지로드 후 플러그인 추가
새 HTML이 DOM에 추가되면 해당 요소의 플러그인이 기본적으로 초기화되지 않습니다. .foundation () 함수 를 다시 호출하여 새 플러그인을 확인할 수 있습니다 .
예를 들어-
$.ajax('assets/partials/kitten-carousel.html', function(data) {
$('#kitten-carousel'</span>).html(data).foundation();
});
프로그래밍 방식 사용
JavaScript에서 플러그인은 프로그래밍 방식으로 생성 될 수 있으며 각 플러그인은 요소와 개체와 같은 두 개의 매개 변수를 사용하는 생성자 가있는 전역 Foundation 개체의 클래스입니다.
var $accordion = new Foundation.Accordion($('#accordion'), {
slideSpeed: 600, multiExpand: true
});
대부분의 플러그인은 JavaScript를 통해 조작 할 수있는 공용 API와 함께 제공됩니다. 사용 가능한 기능을 연구하기 위해 플러그인 문서를 살펴볼 수 있으며 메서드를 쉽게 호출 할 수 있습니다.
예를 들어-
$('.tooltip').foundation('destroy');
// this will destroy all Tooltips on the page.
$('#reveal').foundation('open');
// this will open a Reveal modal with id `reveal`.
$('[data-tabs]').eq(0).foundation('selectTab', $('#example'));
// this will change the first Tabs on the page to whatever panel you choose.
모든 jQuery 선택기를 선택할 수 있으며 선택기에 여러 플러그인이 있으면 모두 동일한 선택된 메서드가 호출됩니다.
인수는 JavaScript에 인수를 전달하는 것처럼 전달할 수 있습니다.
underscore (_) 접두사가 붙은 메서드 는 내부 API의 일부로 간주됩니다. 즉, 경고없이 중단, 변경 또는 사라질 수 있음을 의미합니다.
이벤트
특정 기능이 완료 될 때마다 DOM이 이벤트를 트리거합니다. 예를 들어, 탭이 변경 될 때마다 듣고 응답을 생성 할 수 있습니다. 각 플러그인은 이벤트 목록을 트리거 할 수 있으며 이는 플러그인 문서에 문서화됩니다. Foundation 6에서는 콜백 플러그인이 제거되고 이벤트 리스너로 가져와야합니다.
예를 들어-
$('[data-tabs]').on('change.zf.tabs', function() {
console.log('Tabs are changed!');
});