jquery
JQuery UI ToolTip에서 툴팁에 mouse over시 유지되도록 설정
업무를 진행하면서 jquery-ui를 이용해서 툴팁을 만들때 툴팁위에 마우스를 올렸을 때 툴팁이 유지되도록 하는 기능을 만들어야 했다. 구글링을 통해서 방법을 찾았고 그 방법을 공유해보자. 먼저 기본적인 툴팁이 적용된 input box예제를 살펴보자. 1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556 jQuery UI Tooltip functionality body { margin-top: 100px; } .ui-tooltip-content::after, .ui-tooltip-content::before { content: ""; position: absolute; bo..
html의 화면을 캡쳐해서 이미지로 변경하는 html2canvas와 pdf로 저장하는 jsPDF 라이브러리 소개
회사에서 업무를 진행하면서 현재 화면을 pdf로 만들어야하는 일이 있었다. 기존에 html을 pdf로 스프링에서 만드는 업무는 진행을 했었다. 이때는 이전에 포스팅을 했었으니 참고 하시면 좋을 것 같다. (Spring에서 html2pdf를 사용해서 pdf파일 만들기) 우선 현재 화면을 딱 캡쳐해서 image로 만드는 작업이 필요했다. 그 작업을 제공해주는 라이브러리가 바로 html2canvas이다. html2canvas 우선 html2canvas를 사용하기 위해 파일을 받아보자. npm install --save html2canvas 캡처를 진행하기 위해서는 캡처하고자 하는 영역을 selector로 위치를 받아서 지정할 수 있다. 우선 캡처를 진행할 화면을 간단하게 만들어보자. Hello world! W..
JQuery함수의 append와 appendTo 차이
하나의 dom 객체를 다른 dom에 붙히려고 할때 JQuery에서 제공하는 append나 appendTo를 사용한다. 그런데 append와 appendTo가 헷갈리는 경우가 있는데 이 두개의 차이를 알아보자. 두 개 메서드의 결정적인 차이는 붙는 대상이 무엇이냐에 있다.아래 예제를 살펴보자123456 $('').appendTo($('#test'));$('#test').append($(''));cs 코드를 보면 두 개의 결과는 동일하다. 짐작하겠지만 appendTo는 뒤에있는 객체에 앞에있는 내용을 붙히겠다는 의미이고 append는 앞에있는 객체에 뒤라는 객체를 붙히겠다는 뜻이다. 영어 뜻을 잘 해석해서 진행하면 이해하기가 더 쉬울 것 같다.
input 태그에 선택한 항목이 label로 출력되게 해주는 choices.js 소개
현재 공부하려고 개인적으로 만들고 있는 프로젝트 위들포스에서 사용자를 검색하고 input 박스위에 레이블처럼 보여주는 기능이 필요했다. 아무리 찾아보아도 좋은 라이브러리가 없었는데 choices.js의 이미지를 보니 좀 좋아보여서 적용해 보았다. 우선 내 프로젝트에 적용된 하면은 이렇다. [홈페이지 및 github] https://joshuajohnson.co.uk/Choices/ https://github.com/jshjohnson/Choices 홈페이지에는 예제가 여러개 나열되어 있고, 필요에 따라 소스보기를 통해 참고할 수 있다. github에는 document가 있어서 사용할 수 있는 속성들이 나열되어 있다. [사용방법] 간단한 사용방법은 github에서 소스를 받거나 npm install cho..
div내에 overflow scroll 옵션에 따라 스크롤 생성 시 제일 밑으로 스크롤 내리기
채팅 프로그램을 요새 만들고 있는데 채팅의 경우 스크롤이 새로운 내용이 추가되면 맨 밑으로 이동되어야 한다. 그래서 jquery를 통해 좀 쉬게 이동하게 할 수 없나 싶어서 찾아보다가 있어서 정리해본다. const $messageTextBox = $('#messageTextBox'); $messageTextBox.scrollTop($messageTextBox[0].scrollHeight); div의 태그를 잡아서 해당 스크롤의 높이를 scrollTop 메서드로 잡아주면 자동으로 밑으로 내려가게된다. 어려워 어려워.
spring에서 List 또는 Array 데이터를 Controller에서 받기
컨트롤러에서 List데이터를 받아서 매핑하기 위해서 필요한과정을 정리해본다. 1. List 데이터를 받기 먼저 controller에서 @RequestBody List를 받도록 설정한다. 그리고 ajax를 통해서 요청하는 부분에서 다음과 같이 진행한다. 1234567let data = [{'name':'cjung', 'age':30}, {'name':'wedul', 'age':28}]; $.ajax({ url:...., type:..., param: JSON.stringify(data);});Colored by Color Scriptercs 2. DTO객체 안에 LIST 변수에 데이터를 매핍 하고자 하는경우 기존에 습관대로 진행을 다음과 같이 먼저 해보자. 12345678910111213141516// j..
css 파일 Uncaught SyntaxError: Invalid or unexpected token 에러
css 파일 로드시 브라우저에서 다음과 같은 오류가 출력되는 경우가 있다. Uncaught SyntaxError: Invalid or unexpected token 이 때 가장 의심해 볼 수 있는 부분은 css 파일 로드시 다음과 같은 방식으로 로드했는지 의심해 보아야 한다. css 파일은 자바스크립트 파일이 아니기 때문에 로드시 문법 오류를 유발 할 수 있다. 그래서 css 파일로드시 다음과 같이 로드하여야 한다.
var와 let 그리고 const 차이점과 사용법 소개
es5까지 Javascript에는 변수 선언할때 var를 사용하였었다. 하지만 var를 선언하여 변수를 선언할때 잘못된 사용으로 인해 문제가 발생하는 경우가 있었다. 하지만 자바스크립트 es6로 올라가게 되면서 let 그리고 const 가 추가되었다. 프로젝트를 진행하면서 es6를 처음 사용하게 되었는데 java8이 나와서 java 사용이 편해진 것 처럼 es6를 사용하면서 더욱 편하게 개발을 진행하였다. 그럼 es6의 특징에 대해 알아보자. [var와의 차이] var는 function-scoped이고, let 그리고 const는 block-scoped 이다. 함수 스코프는 모든 변수가 함수에 속하고 한수 전체에 걸쳐서 사용되는 개념이다. block-scoped는 선언된 변수를 둘러싼 블록의 스코프를 이..
Context Menu를 내 마음대로 변경하는 Jquery-ContextMenu.js 사용방법 소개
프로젝트 진행 중 contextmenu를 커스텀해서 사용하고 싶어서 검색하던 중 jquery-contextmenu를 찾았다. 생각보다 사용법도 간단하고 icon도 다양해서 소개하고자 한다. [필요사항] - jquery 1.8 이상의 버전이 필요 - jquery-contextmenu 필요 - jquery-ui의 경우 필수는 아니다. [설치방법] - npm i jquery를 사용하여 jquery를 설치한다. - npm i jquery-contextmenu 명령어를 사용하여 jquery-contextmenu를 설치한다. [적용] - 적용하고자 하는 페이지에 다운받은 js, css 파일을 임포트 한다.123456 Colored by Color Scriptercs [jquery-contextmenu 옵션 설명] ..
dom element를 자유롭게 움직이고 수정할 수있게 하는 gridstack.js 소개
기존에 jquery-ui에서 sortable 메서드를 사용하여 element들을 자유롭게 움직일 수 있다. 하지만 미세한 이동이 어렵고, 크기 조절까지 한번에 하기에는 부적절하다. 그래서 검색결과 gridstack.js를 사용하면 편리하게 크기 조절 및 위치 이동까지 자유롭게 할 수있다는 것을 알았다. [필요 라이브러리] gridstack.js를 사용하기 위해서는 하단의 정보와 같이 몇몇 라이브러리가 필요하다. [예제 코드] 1. package.json -> 필요라이브러리가 추가된 package.json 12345678910111213141516171819{ "name": "gridstack_test", "version": "1.0.0", "description": "gridstack_test", "ma..