제가 여러가지 Javascript library를 배우기 위해서 작성한 예제들입니다.
모두 http://codepen.io/ 에 올려져 있으니 fork에서 자유롭게 수정해서 쓰십시오.
1. Cytoscape.js Selector Demo
- Cytoscape.js는 graph를 그리기위한 library 입니다.
- Cytoscape.js의 selector 예제입니다.
- bootstrap의 grid를 써서 layout을 사용했습니다.
- Cytoscape.js: http://js.cytoscape.org/
2. GridStack.js + Cytoscape.js
- gridstack으로 draggable한 widget형태로 창을 분할하고, 그 중하나의 창에 Cytoscape.js를 사용해서 graph를 보여주게 했습니다.
- Cytoscape panzoom plugin도 추가한 상태입니다.
- widget size를 resize시 graph도 함께 resize 되도록 하였습니다.
- 이슈: gridstack-demo.css 파일을 추가하면 cytoscape의 graph영역이 이상하게 위치하는 이슈가 있어서 빼버렸습니다.
- GridStack.js: http://troolee.github.io/gridstack.js/
- Cytoscape.js: http://js.cytoscape.org/
- Cytoscape panzoom plugin: https://github.com/cytoscape/cytoscape.js-panzoom
- web browser의 local storage 예제입니다.
4. W2UI.js + JQuery UI Date Picker + Moment.js
- W2UI는 여러가지 UI control들(toolbar, grid, form 등)을 모은 패키지 library 입니다.
- W2UI toolbar에 jQuery UI Date Picker를 붙였습니다.
- 날짜 계산을 위해서 moment.js 도 사용했습니다.
- javascript에서 html decoding이 지원되지 않아 function을 추가했습니다.
- Highcharts 라는 차트 라이브러리를 AngularJS 의 directive로 변환한 예제입니다.