우리는 패널의 왼쪽 및 오른쪽 슬라이딩 아웃 및 숨기기 효과를 제어하는 데 사용할 수 있는 jQuery 플러그인인 Slidereveal.js를 사용합니다. 프로젝트 주소: https://github.com/nnattawat/ 슬라이드공개.
사용방법
먼저 페이지에 jquery 라이브러리 파일과 Slideveal.js 플러그인을 로드합니다.
옵션 설정
기본적으로 패널은 왼쪽에서 슬라이드 아웃되고 기본 페이지 콘텐츠가 오른쪽으로 '밀어지며' 키보드의 'ESC' 키를 사용하여 패널을 닫을 수 있습니다.
속성 | 설명 | 기본값 |
너비 | 정수 유형, 패널 너비. | 250 |
푸시 | 부울, true로 설정하면 패널이 확장될 때 페이지의 기본 콘텐츠가 한쪽으로 '밀어집니다'. false로 설정되면 패널이 페이지의 기본 콘텐츠 위로 확장됩니다. | 그렇습니다 |
위치 | 문자열, 패널 확장 및 슬라이딩 방향을 설정합니다. "왼쪽" 또는 "오른쪽"으로 설정할 수 있습니다. | "왼쪽" |
속도 | 정수, 패널 확장 속도, 단위: 밀리초. | 300 |
트리거 | jQuery DOM 선택기, $("#element")와 같이 패널 표시 및 숨기기를 실행할 수 있는 페이지 요소 설정 | 정의되지 않음 |
자동 탈출 | 부울 유형, 키보드의 ESC 키를 사용하여 확장된 패널을 숨길 수 있는지 여부를 설정합니다. | 그렇습니다 |
상단 | 정수, 패널과 창 상단 사이의 거리를 설정합니다. | 0 |
쇼 | 패널이 확장될 때 호출되는 콜백 함수입니다. | - |
보여짐 | 패널이 확장될 때 호출되는 콜백 함수입니다. | - |
숨기기 | 패널이 숨겨져 있을 때 호출되는 콜백 함수입니다. | - |
쇼 | 패널이 숨겨져 있을 때 호출되는 콜백 함수입니다. | - |
slidereveal.js 플러그인은 확장 및 숨기기 메서드 호출도 제공합니다.
위 내용은 이 글에서 공유한 모든 내용입니다. 도움이 필요한 친구들이 와서 참고하면 모든 분들이 jQuery를 익히는 데 도움이 되기를 바랍니다.