SuperSlide.js 다운로드 SuperSlide.js 소스 코드 다운로드

SuperSlide.js

웹사이트 데이터

1.0.0

다운로드

superslide.js

다음 PWA를위한 가볍고 구성 가능한 슬라이딩 메뉴. 2k 만 gzipped!

이 라이브러리는 다음 웹 애플리케이션을위한 고도로 구성 가능하고 즉시 사용 가능한 슬라이딩 메뉴를 제공하면서 기본적인 애니메이션 성능을 제공하는 것을 목표로합니다. BX, 인보이스 발행, 시간 추적 및 프로젝트 관리 PWA를 개발하면서 OSREC 기술에 의해 만들어졌습니다.

설치

 npm install superslide.js

용법

스크립트 태그로 라이브러리를 참조하십시오

 < script src =' superslide.js ' > </ script >

기본 HTML 마크 업을 추가하십시오

 < body >
  < div id =' content ' > Content </ div >
  < div id =' menu ' > Menu </ div >
</ body >

스타일을 추가하십시오 (그래서 우리는 무슨 일이 일어나고 있는지 볼 수 있습니다!)

 < style >
  body     { padding: 0px; margin: 0px; }
  #menu    { background: #ccc; }
  #content { min-height: 100vh; min-width: 100vw; }
</ style >

메뉴를 초기화하십시오

 var myMenu = new OSREC . superslide
( {
    slider : document . getElementById ( 'menu' ) ,
    content : document . getElementById ( 'content' ) ,
    animation : 'slideLeft'
} ) ;

// Promise resolves once menu is open
var openPromise = myMenu . open ( ) ;

여기서 데모를 사용해보십시오

애니메이션

표준 버전에는 4 가지 애니메이션 옵션이 있습니다.

슬라이더프	슬라이더 라이트	Slidebottom	슬라이드 탑

Pro 버전에는 더 많은 메뉴 애니메이션이 포함되어 있습니다 ( @ https://osrec.co.uk/products/superslidejs를 확인하십시오)

매개 변수

animation ( string ) : 애니메이션 라이브러리의 모든 애니메이션 ( slideLeft , slideRight , slideTop , slideBottom ).
duration ( integer ) : 슬라이드 애니메이션의 초 지속 시간
allowDrag ( boolean ) : 터치 이벤트를 통해 메뉴를 열거 나 닫힌 위치로 끌어 낼 수 있습니다.
slideContent ( boolean ) : 메뉴와 함께 콘텐츠를 밀어 넣습니다.
allowContentInteraction ( boolean ) : 메뉴가 열리는 동안 컨텐츠를 클릭하거나 스크롤 할 수 있습니다.
closeOnBlur ( boolean ) : 사용자가 메뉴 외부의 어느 곳에서나 클릭하거나 탭할 때 메뉴를 닫습니다.
width ( string ) : 메뉴의 너비 (수직 가장자리를 따라 앉는 메뉴의 경우). 예 : '60vw'또는 '300px'또는 '80%'
height ( string ) : 메뉴의 높이 (수평 가장자리를 따라 앉는 메뉴의 경우). 예 : '50vh'또는 '300px'또는 '80%'
dragThreshold ( integer ) : 사용자가 드래그를 시작할 수있는 가장자리에서 픽셀 수; 예 : 70. 허용 드래그 옵션과 함께 사용하십시오.
openThreshold ( integer ) : 메뉴가 열린 위치에 있으면 자동으로 열리기 전에 픽셀의 수를 드래그해야합니다. 예 : 30. allowdrag 옵션과 함께 사용하십시오.
closeThreshold ( integer ) : 메뉴가 닫힌 위치에 있으면 픽셀의 수를 자동으로 닫기 전에 드래그해야합니다. 예 : 20. allowdrag 옵션과 함께 사용하십시오.
beforeOpen ( callback ) : 메뉴가 열리기 전에 실행되었습니다.
onOpen ( callback ) : 메뉴가 열린 후 직접 실행되었습니다.
beforeClose ( callback ) : 메뉴가 닫히기 전에 실행되었습니다.
onClose ( callback ) : 메뉴가 닫히 자마자 실행

행동 양식

OSREC.superslide.open() 메뉴를 엽니 다. 메뉴가 열린 후에 해결되는 약속을 반환합니다 (즉, 애니메이션 완료).
OSREC.superslide.close() 메뉴를 닫습니다. 메뉴가 닫히면 해결되는 약속을 반환합니다 (예 : 애니메이션 완료).
OSREC.superslide.toggle() 메뉴를 전환합니다. 메뉴가 전환되면 해결되는 약속을 반환합니다 (즉, 애니메이션 완료).
OSREC.superslide.isOpen() true 메뉴가 열리면 닫힌 경우 false. 중간 드래그 인 경우 마지막 상태. 부울을 반환합니다.
OSREC.superslide.ready() 메뉴가 완전히 초기화되었는지 확인하십시오. 완전히 초기화 될 때 해결되는 약속을 반환합니다.
OSREC.superslide.destroy() 메뉴를 파괴하십시오. 메뉴가 파괴되기 전에 열려있는 경우 메뉴가 닫힙니다. NULL을 반환합니다