본문 바로가기

분류 전체보기266

collapsing event 만들기 bootstrap UI중 collapse라는 것이 있다.본 collapse에 자세한 사항에 대해서는 아래의 링크를 참고바란다. https://www.w3schools.com/bootstrap/bootstrap_collapse.asp 이러한 collapse는 여러가지 이벤트 감지함수 및 발생함수를 제공한다.그 함수는 아래의 링크에 정리되어 있다. https://www.w3schools.com/bootstrap/bootstrap_ref_js_collapse.asp 하나 아쉬운 것은 collapse가 시작할때와 종료할때 이벤트는 있지만,진행중일때 이벤트는 없다는 점이다.(최근 collapse가 진행중일때의 이벤트를 감지해야만 하는 상황이 생겼다.) 그래서 내가 직접 collapse가 진행될때 그 이벤트를 감지.. 2017. 7. 10.
datatables editor customize 하기 datatables 라이브러리에서 CRUD 에디터 입력창을 customize 하는 방법은 의외로 간단하다.왜 간단하나면 datatables 라이브러리에서 본 옵션을 제공하고 있기 때문이다.바로 아래의 사이트 링크에 예제와 함께 잘 나와 있기에 긴 설명은 생략해 본다. https://editor.datatables.net/examples/styling/template.html 2017. 7. 7.
datatable editor CRUD 구현 최근 datatable 라이브러리를 통하여 CRUD가 가능한 테이블을 만들어야 하는 일이 생겼다.이전에 get만 했을때는 editor 버전이 필요없었지만,CRUD를 구현하기위해서는 editor 버전을 학습해야 했다.역시나 본 라이브러리는 친절하게 예제와 수많은 설명을 제공하기에 아래의 링크를 따라서 구현하면 금방 구현한다. 참고로 예제에서는 ajax에서 type 및 url속성밖에 못 쓰는것처럼 나와 있지만실험해보니 이외의 ajax 속성들도 사용할 수 있었다.즉, data, dataType, success 등등의 속성도 사용가능하다.(쓰면 쓸수록 정말 잘 만든거 같다.) https://editor.datatables.net/examples/advanced/REST.html 문제가 하나 있다면 클라이언트에서.. 2017. 7. 7.
고정형과 반응형이 섞인 레이아웃 만들기 최근 만들고 있는 프로그램에서 레이아웃 구조를 잡다가왼쪽 div는 고정형으로 하고 오른쪽 div는 반응형으로 해야 하는 상황에 직면하게 되었다. 사실 방법을 알고 있었지만 그 방법을 잊어버려서 다시 기억하고 적용하는데 시간이 좀 걸렸다..(이래서 평소에 기록이 중요한거 같다.) 간단히 그 방법을 말하면 왼쪽에 고정된 width 값을 주었다면,오른쪽에는 그 고정된 만큼의 padding-left 값을 주면 된다. 예제는 아래의 링크에 잘 나와있다. https://codepen.io/winghouchan/pen/wcrAI 2017. 7. 4.
D3.js zoom in out 버튼 구현 최근 D3.js로 확대축소가 가능한 그래프를 만들일이 있었다.최종적으로는 마우스 인터페이스로 확대되는것은 막아놓고,오직 버튼으로만 컨트롤 하는 인터페이스 구현이었는데, 구현과정에서 좀 애를 먹었다. 먼저 마우스휠로 줌 되는것을 막아놓아야 했는데,.on("wheel.zoom", null) 함수를 써서 휠 인터페이스를 막아놓음으로 간단히 구현할 수 있었다. 그리고 zoom in out 버튼 인터페이스는 아래의 질문의 답변을 참고하여 구현하였다. https://stackoverflow.com/questions/40246196/d3-v4-zoom-with-buttons-in-conflicts-with-zoom-behaviour 사실 이 과정에서 많은 시간이 걸렸는데,나중에 살펴보니 내가 짠 svg 구조와 위에서.. 2017. 6. 30.
D3.js v4의 zoom, pan값 조절 d3.js v4에서 zoom, pan값을 변경하고 싶은때가 있다.그럴때는 zoom.on 이벤트에서 d3.event.transform 속성을 건드려주면 된다.아래의 링크에 잘 정리된 설명이 있다. https://stackoverflow.com/questions/38459765/d3-zoom-and-pan-upgrade-to-version-4 2017. 6. 30.
javascript에서 class사용하기 가끔 조금 복잡한 프로그램을 짜다보면 javascript 안에서도 JAVA와 같이 class를 만들고 싶은 경우가 있다.이것에 대한 갈망이 많았는지 많은 블로그에서 그 방법을 포스트 하고 있다.아래의 링크를 보면 그 방법이 세세히 잘 나와 있다. http://steadypost.net/post/lecture/id/13/ 특히 클래스 안의 메서드를 다중으로 호출해야 하는경우 prototype 부분을 잘 보길 바란다. 추가로 javascript 안에서 argument에 따른 다수의 constructor 함수를 만들고 싶을때가 있는데,javascript는 그러한 기능을 제공 안하고 있다.대신 함수의 argument 객체를 받아올 수 있기에 그것의 type이나 길이에 따라서로 다른 변수를 지정해줄 수 있다. 그.. 2017. 6. 28.
D3.js 곡선 패스위에 글자 넣기 흔히 포토샵이나 일러스트에서 곡선의 패스위에 글자를 넣는 툴이 존재한다.최근 연구실에서 데이터시각화를 프로젝트를 진행하고 있는데,곡선의 패스위에 글자를 넣어야 하는 문제를 맞게 되었다.찾아보니 아래의 링크와 같은 간단한 예제가 있다. http://bl.ocks.org/nbremer/bf3d285e48189507e0ea 핵심은 textPath 태그이며,xlink:href 속성이다. 추가적으로 패스의 시작과 끝 순서로 인해 글자가 뒤집히는 경우가 있는데,이럴때는 패스의 시작과 끝 순서를 바꿔만 주면 반대로 뒤집히게 된다.(이 문제를 해결하려고 transform을 조작하려는 뻘짓을 하다가 위와같은 쉬운방법이 있음을 깨달았다.포토샵도 저 원리와 같은데 포토샵을 이전에 다뤄본 경험이 문제를 해결하는데 있어 도움이.. 2017. 6. 27.
dragula.js 사용법 최근 drag&drop 인터페이스를 구현해야되서 찾아보던중 dragula.js라는 라이브러리를 알게 되었다.찾아본 바로는 본 라이브러리가 drag&drop에 있어서는 가장 뛰어난 라이브러리라 생각된다.하지만 사용문서가 제대로 나와 있지 않아서 사용하는데 조금 애를 먹었다.결론적으로 example 파일을 뜯어보면서 결국적으로 사용법을 익히게 되었다.아래는 예제의 링크이다. https://bevacqua.github.io/dragula/ 혹 예제를 보시면 알겠지만 사용법은 그리 어렵지 않다.하지만 핵심적으로 기억해야 하는 클래스가 있다.바로 gu-mirror 클래스인데,본 클래스는 drag시 선택된 레이어에 대한 클래스이다. gu-mirror 클래스를 알아야 drag&drop시 마우스 커서 스타일도 지정가능.. 2017. 6. 24.

티스토리툴바