본문 바로가기
728x90
반응형

Front-end/JQuery12

[Jquery] 마우스 휠& 드래그 이미지 zoom & translate _ 라이브러리X 참고 링크 웹 서핑을 하다 보면 마우스 휠로 줌 인 아웃 많이 해봤을꺼다. 라이브러리를 사용하지않은 코드 😎 import 😎body 😎css #container{ width:500px; height:300px; overflow:hidden; } #slide{ width:100%; height:100%; transition: transform .3s; } img{ width:auto; height:auto; max-width:100%; pointer-events: none; } 😎script $(document).ready(function (){ var scroll_zoom = new ScrollZoom($('#container'),5,0.5) }) //The parameters are: // //cont.. 2022. 11. 10.
[Jquery] Sortable 라이브러리 사용하여 리스트 드래그 앤 드롭 만들기 Todo List / table List 등 다양한 리스트들 있습니다. 리스트들을 드래그 해서 순서를 변경하는 코드 소개합니다 Sortable 라이브러리 사용했습니다. 기본적인 리스트를 마지막버튼을 드래그 하여 초록색 점이 2번째로 이동! 😎 CDN //드래그 & 드롭 Sortable.create(listWithHandle, { handle: '.my-handle', animation: 150, // Element dragging ended onEnd: function (e) { //드롭했을때 이벤트 실행 var itemEl = e.item; // dragged HTMLElement console.log(e.newIndex+1); updateSort(); } }); updateSort()함수를 만들어 리.. 2022. 11. 2.
[JQuery] 엔터키 이벤트 실행 (엔터키 안누르고) var enter = jQuery.Event( "keydown", { keyCode: 13 } ); 엔터키 이벤트 발생하는 함수 만들어준후 $('#input-box').trigger(enter); 엔터키 trigger이벤트로 실행 가능 나의 경우 특정 모달 오픈시 엔터키 이벤트가 필요했기에 사용 2022. 9. 21.
[jQuery] e.preventDefault() 의미 box1 box2 box3 -------------------------------------------- $(function(){ $(".btns li").on("click",function(e){ e.preventDefault(); var i = $(this).index(); //alert(i); $(".btns li a").removeClass("on"); $(".btns li").eq(i).children("a").addClass("on"); }); }); e.preventDefault(); - 이벤트의 기본기능을 막는 것으로 생각하면 된다. 위 소스를 예로 들면 클릭했을때 href로 설정되어있는 주소로 바로 이동하는 것이 아니라 e.preventDefault(); 로 우선 이벤트를 멈춘 후 js.. 2022. 3. 3.
[jQuery]이벤트의 연결 및 처리 .on() .off() .one() 😎 이벤트의 연결(event binding) 특정 요소에서 발생하는 이벤트를 처리하기 위해서는 이벤트 핸들러(event handler) 함수를 작성해야만 한다. 이렇게 작성된 이벤트 핸들러를 특정 요소에 연결하는 것을 이벤트 바인딩(event binding)이라고 한다. jQuery는 이벤트 바인딩을 위한 다양한 방법을 제공한다. 다음 예제는 id가 "btn"인 요소에 클릭(click) 이벤트 핸들러를 바인딩하는 다양한 방법이다. $("#btn").click(function(event) { // 실행하고자 하는 jQuery 코드 }); $("#btn").bind("click", function(event) { // 실행하고자 하는 jQuery 코드 }); $("#btn").on("click", funct.. 2021. 12. 23.
[jQuery/AJAX ] Jquery를 이용한 AJAX연결과 예제 #Jquery #AJAX #JAVASCRIPT 지금까지는 javascript를 이용하여 함수를 생성하고 비동기 통신을 하는 방식을 하였는데, 코드가 길고 좀 복잡한 경향이 있었습니다. 이번엔 깔끔하게 JQUERY를 이용하여 해보도록 하게습니다. 핵심 코드 $.ajax({ 1. url : 자원 (XX.do, json, xml, jsp, html) 2. dataType : 넘겨오는 데이터 형태 ex) json, xml, html, text 3. type : 어떤 방식으로 데이터를 가져오느냐? post, get 4. success(){data} : 연결해서 성공적으로 데이터를 가져왔을 때, 처리 내용 들어온 데이터 내용이 data라는 값 5. error(){} : 에러가 나서 실패했을 때, 처리할 내용 기술 .. 2021. 4. 29.
[jQuery] 제이쿼리 AJAX AJAX가 jQuery 고유의 기능은 아닙니다. 하지만 jQuery는 간단한 문법으로 AJAX를 사용할 수 있게 도와줍니다. AJAX AJAX란 asynchronous Javascript and XML입니다.(요즘은 XML보다 HTML이나 JSON을 더 많이 쓰는 것 같습니다. 그래도 AJAH, AJAJ라고 부르기는 좀 이상하네요 ㅎㅎ) 기존의 웹에서는 한 번 페이지를 로딩하면 다른 페이지를 로딩하기 위해서 링크를 타고 넘어가야 했습니다. 그렇게 되면 흔히 말하는 페이지 깜빡임이 발생합니다. 뭐 예전에는 거의 모든 웹페이지가 그랬고, 현재도 많은 페이지가 그렇기 때문에 별 불편함은 느끼지 못하실텐데요. Google에서 페이지 깜빡임 없이 웹앱을 구현해서 주목을 받았습니다. 구글 검색을 해보면, 페이지를 .. 2021. 4. 29.
[jQuery] vanilla JS -> JQuery 표현법 funtion f`1 과 funtion f`2 는 같은 코드 이다. 스크립트 문법 만 본다면 제이쿼리 사용하기 위해 head안에 넣어주고 getElementsByClassName 하여 클래스 네임을 가져오는건 바닐라 JS 제이쿼리는 $(" ") 안에 클래스 -> .클래스명 아이디 -> #아이디 2021. 4. 29.
[jQuery] 제이쿼리에서 아작스(AJAX) 사용 #7 jQuery에서 Ajax 사용하기 제이쿼리를 사용하면 자바스크립트에서보다 쉽게 아작스 기술을 사용할 수 있습니다.(xhr을 사용하지 않아도 됨) 아작스는 페이지를 새로 로딩하지 않고 동적으로 페이지의 내용을 바꿀 수 있는 기술입니다. Ajax 지원 메서드 $(document).ready(function () { // 1.html 등의 text 문서 읽기 $("#t1").click(function () { // $("#disp").load("jq9_a.html");// load() : Ajax 관련 메소드 $("#disp").hide().load("jq9_a.html", function () { ​ $(this).fadeIn();// fade effect }); }); ​ // 2. json 문서 읽.. 2021. 4. 27.
728x90
반응형

티스토리툴바