문서 보기역링크PDF로 내보내기맨 위로 이 문서는 읽기 전용입니다. 원본을 볼 수는 있지만 바꿀 수는 없습니다. 문제가 있다고 생각하면 관리자에게 문의하세요. # slidebars 활용하기 - [홈페이지](https://www.adchsm.com/slidebars/) ``` <!-- Slidebars --> <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"> <link rel="stylesheet" type="text/css" href="<c:url value='/js/slidebars/slidebars.min.css' />" /> <link rel="stylesheet" type="text/css" href="<c:url value='/js/slidebars/slidebars.custom.css' />" /> <script type="text/javascript" src="<c:url value='/js/slidebars/slidebars.min.js' />"></script> ``` ## 추가 ```javascript <!-- Slidebars --> <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"> <link rel="stylesheet" type="text/css" href="<c:url value='/js/slidebars/slidebars.min.css' />" /> <script type="text/javascript" src="<c:url value='/js/slidebars/slidebars.min.js' />"></script> ``` ```javascript <div canvas="container"></div> <div off-canvas="id-1 left reveal"></div> <div off-canvas="id-2 right shift"></div> <div off-canvas="id-3 top overlay"></div> <div off-canvas="id-4 bottom shift"></div> ``` 아이디, 방향, 방법을 설정한다. 방향예는 left, right, top, bottom 가 있습니다. 방법에는 reveal, push, shift, overlay 가 있습니다. 시작시에 슬라이드바를 생성한다. ```javascript // slidebars init controller = new slidebars(); controller.init(); ``` 슬라이드바를 토클한다. ```javascript controller.toggle('id-1'); $("<div>blahblasblah</div>").appendTo('#canvas1'); ``` ## Custom CSS 추가 ```javascript <link rel="stylesheet" type="text/css" href="<c:url value='/js/slidebars/slidebars.custom.css' />" /> ``` ```css [off-canvas]{ background-color: #F7F7F0; /* Basic background color, overwrite this in your own css. */ border: 1px solid #FFFFFF; color: RGBA(0,0,0,1) } [off-canvas*=push]{ z-index: 10; } [off-canvas*=left]{ width: 500px; } ``` open/slidebars.txt 마지막으로 수정됨: 2020/06/02 09:25저자 127.0.0.1