Category: Javascript

  • jQuery UI Sortable 핸들 + 버튼으로 제어하기

    업무 중 공통에서 사용되고 있는 JQuery Ui Sortable 함수를 사용 중에, 특정 목록이 상단에 항상 고정되어 소팅이 되지 않고 비활성화처럼 보이게끔 해야했다.그런데 공식 API 문서에 있는 event나 method, option과 많은 검색 결과에 따라 테스트를 해보았지만, 원하는 결과물은 나오지 않았다. ㅠㅠ 특정 항목이 비활성화처럼 보여지긴 하나 화면 구성을 편집하는 부분 중 첫번째 목록이 항상 고정이 된…

    Read More

  • jQuery QueryBuilder operator select 감추기

    jQuery QueryBuilder operator select 감추기

    쿼리빌더에서 제공하는 특정 플러그인들은 따로 선언해 줄 필요 없이 사용이 가능하다.디자인 적인 부분을 활용 가능한 플러그인은 대부분 부트스트랩 기반의 플러그인 들이고,DB 임포트/익스포트 그리고 기본적으로 제공하는 필터, 규칙 이외에 새로운 기능을 추가하기 위한 플러그인도 제공한다. 이전 쿼리빌더에 jQuery Select2 플러그인 추가해 셀렉트 스타일이나 기능 추가 해 보았다. 쿼리빌더의 기본 규칙(rule)은 Filter + Operator(연산자) + 값(value) 으로…

    Read More

  • visjs configuration options

    visjs 설정 옵션을 매번 영문으로 읽고 찾기가 번거로워 한국어로 번역.현재 필요한 부분만 번역. 차차 추가 예정.👉 공식 DOC 페이지 Configuration Options 옵션들은 타임라인 커스터마이징을 위해서 쓰이며, 옵션들은 JSON 객체로 정의된다. 모든 옵션들은 선택사항이다. Name Type Default Description align String ‘center’ ‘box’, ‘range’ 와 ‘background’ 타입의 아이템의 정렬을 정의. ‘auto'(default), ‘center’, ‘left’, ‘right’ 값을 사용 가능.‘box’…

    Read More

  • d3.js pie/donut chart error

    d3.js pie/donut chart error

    위의 d3.js의 기본 도넛 차트 코드를 활용하여 기본 차트를 테스트 중, 특정 코드에서 function 에러가 발생했다. 위의 에러는 차트를 그리는 스크립트 코드에서 해당 코드를 아래와 같이 변경해주면, 문제없이 차트가 그려진다. d3.scaleOrdinal()는 d3.scale.ordinal()로 d3.pie()는 d3.layout.pie()로 d3.arc()는 d3.svg.arc()로 변경해 실행해본다.

    Read More

  • Draggable & Resizable 레이어 만들기 (3)

    3. Draggable & Resizable Layer 만들기 앞서 Draggable & Resizable 레이어 만들기 (1), Draggable & Resizable 레이어 만들기 (2) 에서 작성했던 코드를 기반으로,두 개의 코드를 합쳐보자. 우선 이벤트 리스너를 걸어준 두 개의 변수를 먼저 선언 한 후, 마우스 타겟 값을 대입 시켜 주기 위해 선언했던 변수를 선언한다. 생성 했던 드래그 함수와 이벤트 리스너를 추가 한…

    Read More

  • Draggable & Resizable 레이어 만들기 (2)

    2. Resizable Layer 만들기 클릭했을 때 레이어를 리사이즈 할 포인트를 변수로 먼저 선언 한 후,최초 X축의 위치, 최초 Y축의 위치, 리사이즈 전 최초 요소의 넓이, 리사이즈 전 최초 요소의 높이도 변수로 선언. Draggable 레이어 함수 생성했을 때와 동일하게,마우스를 누르는 순간 마우스의 위치 값을 변수에 대입해주고, resize할 레이어 요소의 넓이 값과 높이 값도 변수에 대입한다. 마우스를…

    Read More

  • Draggable & Resizable 레이어 만들기 (1)

    1. Draggable Layer 만들기 먼저 레이어를 drag를 할 레이어에 특정 아이디 값을 선언하여 필요한 변수를 먼저 선언하고,dragging 이벤트를 위한 변수와 x축과 y축의 좌표를 대입할 변수를 선언해준다.기본 변수 선언이 끝난 후, 마우스가 클릭 되었을 때, 마우스가 클릭 된 채 움직이고 있을 때, 그리고 마우스 클릭이 해제 되었을 때 일어날 이벤트 함수를 작성한다. 마우스를 누르는 순간 마우스의…

    Read More

  • jQuery QueryBuilder에 Select2 플러그인 추가하기.

    jQuery QueryBuilder는 Bootstrap의 많은 스타일을 참조에서 활용하고 있는데.. 그 테마 모양이 이렇다. 현재 프로젝트에서는 select input을 jQuery Select2 라이브러리를 커스터마이징하여 사용 하고 있는 중이라 쿼리빌더에도 select input에 select2 라이브러리를 적용해야만 했다. 가장 먼저 select2 라이브러리 활용을 위해 쿼리빌더에 적용방법을 구글에서 검색을 해보니, 쿼리빌더를 추가할 때에, plugins 선언으로 간단히 적용 가능하다는 설명이 있어 해보았지만, 제한적으로 가장…

    Read More