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>
추가
- snippet.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>
- snippet.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 가 있습니다.
시작시에 슬라이드바를 생성한다.
- snippet.javascript
// slidebars init controller = new slidebars(); controller.init();
슬라이드바를 토클한다.
- snippet.javascript
controller.toggle('id-1'); $("<div>blahblasblah</div>").appendTo('#canvas1');
Custom CSS 추가
- snippet.javascript
<link rel="stylesheet" type="text/css" href="<c:url value='/js/slidebars/slidebars.custom.css' />" />
- snippet.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; }