open:slidebars [EL]

This page is read only. You can view the source, but not change it. Ask your administrator if you think this is wrong.
# 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;
}
```