본문 바로가기

jquery9

[JAVASCRIPT/JQUERY] eclipse 자바스크립트 자동 완성 플러그인(tern) 이클립스에서 JAVASCRIPT랑 JQUERY도 Ctrl + Space로 자동 완성되게 해보도록 하자!! 1. 이클립스 상단의 [Hep] - [Install New SoftWare] 2. Work with 에 http://oss.opensagres.fr/tern.repository/1.2.0/ 를 붙여 넣기하자! 아래와 같이 확인한 후 Next를 눌러서 설치를 진행!! 3. 설치하다보면 동의하는 부분이 나오는데 동의 (I accept the terms of the license agreement) - [Finish] 눌러 주면 된다. 완료 후 이클립스를 재시작! 4. 적용할 프로젝트 [우클릭] - [Configure] - [Convert to Tern Project] 클릭 5. Browser (javas.. 2022. 1. 18.
[JQUERY] 레이어 팝업, 모달 닫기(외부영역클릭, ESC 버튼) 레이어 팝업을 사용하다 닫기 버튼 클릭을 통해서만 아니라 팝업 외부 영역 클릭이나 키보드 ESC 누를때 닫게 해달라는 요청!.! 간단하지만 유용하게 사용할 것 같아 올려본다! - 팝업 외부 영역 클릭시 팝업 닫힘 /* 외부영역 클릭시 팝업 닫기 */ $(document).mouseup(function (e){ if($(".layer_pop").has(e.target).length === 0){ $(".layer_pop").hide(); } }); - ESC 누를시 팝업 닫힘 /* ESC 키 누를시 팝업 닫기 */ $(document).keydown(function(e){ //keyCode 구 브라우저, which 현재 브라우저 var code = e.keyCode || e.which; if (code =.. 2022. 1. 14.
[jQuery] AJAX를 사용한 DB연동 자동완성(Autocomplete)(feat.스프링) JQUERY UI 에는 input에 입력 시 자동완성을 해주는 autocomplete가 있다. 이 기능과 ajax를 이용해 DB에 있는 정보로 자동완성을 만들어보자! ​ 1. JQUERY랑 JQUERY UI 라이브러리 추가 2. HTML 자동완성 테스트 3. SCRIPT $('#autoComplete').autocomplete({ source : function(request, response) { //source: 입력시 보일 목록 $.ajax({ url : "/ajax/autocomplete.do" , type : "POST" , dataType: "JSON" , data : {value: request.term}// 검색 키워드 , success : function(data){ // 성공 respo.. 2022. 1. 13.
[jQuery Zoomer] 이미지 확대 축소 플러그인 jQuery를 사용하여 첨부한 이미지를 확대 / 축소 / 드래그해서 움직일 수 있는 화면이 필요했다. 버튼만들고 하나하나 짜다보니 처음 생각보다 많은걸 해야할 것 같아 찾아보다보니 jQuery Zoomer가 있었다!! 깔끔하고 간단하게 확대 / 축소 / 드래그 가 필요한 곳에 쓰면 좋을듯싶다. 일단, 아래에서 jquery.fs.zoomer.min.js jquery.fs.zoomer.css 받아준다 https://github.com/FormstoneClassic/Zoomer GitHub - FormstoneClassic/Zoomer: A jQuery plugin for smooth image exploration. A jQuery plugin for smooth image exploration. Contr.. 2022. 1. 11.
반응형