Framework/jQuery에 해당하는 글들 13 Articles matched 목록이 없습니다. [JavaScript] 어떻게하면 로그인 시 원래 보고 있던 페이지로 이동시킬 수 있을까? 인터넷을 사용하다 보면 잘 만들어진, 잘 구성되어있는 사이트들을 볼 수 있습니다. 잘 만들어졌다는 것은 사용자가 사용할 때 불편함이 최소화 되어 있고 원하는 정보를 잘 보여주는 것이라고 개인적으로 생각하는데요. 그런 사이트들을 보면 로그인을 했을 때 메인페이지나 정해진 페이지가 아닌 사용자가 원래 보고 있던 페이지로 이동시켜줘서 작업의 흐름을 그대로 유지해주는 사례가 많은 것 같습니다. 우리 시스템에도 요구사항으로 들어와서 구현해보려고 합니다. 처음부터 바로 답을 찾지는 못했습니다. 가장 단순한 뒤로가기 방법인 history.back() 을 이용해서 구현해봤는데 가장 큰 문제가 사용자가 외부에서 로그인페이지로 들어온 경우에는 로그인 시 사이트를 이탈시키는 문제가 있었습니다. 따라서 위의 방법만으로는 해결.. [Javascript] 웹 브라우저 인쇄 버튼 만들기 브라우저 화면을 인쇄하는 방법은 브라우저 메뉴에 있는 인쇄버튼을 클릭하거나 단축키 Ctrl + P를 입력하면 된다. 하지만 사이트 내에 큼직한 인쇄하기 버튼이 있다면 사용자가 더 쉽고 편하게 쓸 수 있지 않을까 생각한다. 클릭 한 번이면 내가 보고 있는 웹 페이지를 인쇄할 수 있으니까 말이다. 인쇄버튼 만드는게 어렵지 않을까 생각했지만 정말 쉬웠다. 인쇄버튼 만들기 ( jQuery ) 그리고 인쇄 화면이 나왔을 때 보여주기 싫은것이라던지 (ex - 인쇄버튼) 그런것들은 따로 CSS를 지정해서 숨길 수 있다. @media print { .print-button { display:none; } } [jQuery] 스크롤 이벤트를 통해 메뉴 따라오게 하기 (menu header fix on scroll event) jQuery 스크롤 이벤트를 통해 메뉴 따라오게 하기 (menu header fix on scroll event)최근들어 스마트폰의 등장과 함께 반응형 웹이 인기다. 작은 화면의 기기에 PC에서 보여주던 내용들을 전부 담아서 보여주려고하니 여간 까다로운게 아니다. 이번에는 쇼핑몰에서 보이는 UI인데 유명한 쇼핑몰들의 UI를 살펴보면 거의다 비슷비슷 하다.그중 내가 구현 하고 싶었던 UI는 상세페이지에서 어떤 메뉴가 있을 때 스크롤 시 그 메뉴가 화면 상단에 따라오는 UI이다. 소스 (Source) $(window).scroll(function() { let wrap_el = $('#ebric_mobile_wrap'); // 전체 wrap 요소 let tab_top = $('.info-type-select.. [jQuery] ajax beforeSend에서 중단 시키는 방법 (stop $.ajax on beforeSend) jQuery(제이쿼리) $.ajax 함수에서 beforeSend 시점에 중단하는 방법 jQuery(제이쿼리)에서 $.ajax 쓰다보면 beforeSend 시점에서 함수를 중단하고 싶은 경우가 생긴다. ( 예를 들어 beforeSend에서 검증을 한다든지 설정 시 비어있는 값이 있는경우에는 alert를 띄우고 중단시키고 싶은,, ) 이 때 beforeSend에서 return false를 하면 beforeSend함수 자체는 중단이 되고 그 안에서 해당 라인 다음 로직은 수행되지 않겠지만 정작 ajax로 해당 url의 컨트롤러, 서블릿의 반환이 성공적으로 이루어졌을 때 수행되는 success 영역을 막진 못할것이다. 이런 상황에서 success로 넘어가지 않고 beforeSend에서 중단하고 싶은 경우 다음과.. [jQuery] keyup, keydown, keypress 차이 jQuery Key Event 오늘은 간단한 포스팅이에요 개발을 하다가 문득 궁금해서 검색해본 내용을 정리하려고 합니다 jquery에서는 브라우저를 통해서 사용자의 수많은 행동을 처리할 수 있는데요 그 많은 이벤트 중에 이번에 다룰 이벤트는 키보드(키입력)에 관련된 이벤트입니다 Keypress, Keydown, Keyup 먼저 간단하게 표로 정리하고 시작! 이벤트종류 실행시점 비고 keypress 사용자가 키를 눌렀을 때 키를 누르고 있을 때 계속 실행 keydown 사용자가 키를 눌렀을 때 키를 누르고 있을 때 단 한번만 실행 keyup 사용자가 키에서 손을 땠을 때 테이블 내용으로도 충분히 이해될 정도로 간단한 개념이에요! up과 down에 차이는 이름에서 느낌이 왔는데 press와 down은 어떤 .. [jQuery] event.preventDefault(), event.stopPropagation() HTML 사용자 이벤트 전달 원리 우리가 매일 사용하는 인터넷 즉, 웹에서는 사용자들이 가장 많이 발생시키는 이벤트 중 하나는 바로 클릭! 사용자가 클릭을 하는 순간 HTML상의 요소들은 클릭을 당한(?) 요소부터 그 요소의 부모님들(?) 부모 요소까지 모두 같이 반응을 하게 되는데요 ( 참고로 이러한 현상을 버블업[Bubble Up] 이라고 해요 ) 이런 현상을 이벤트가 전파, 확산 된다고 하는건데요 영어로는 propagation이라고 합니다 예를들어 다음과 같은 HTML 코드가 있을 때 12345 Test cs a태그를 클릭하게 되면 그 상위 요소인 li 그리고 ul 까지 그 이벤트가 전파된다는 것입니다~ event.stopPropagation() 그러면 제목에서 언급했던 event.stopPropa.. [jQuery] Ajax Rendering jquery 플러그인으로 ajax를 사용하여 rendering을 할 때 유용한 방법을 정리하려고 한다 페이징을 할 때 페이징 마다 ajax함수를 호출해서 랜더링을 하는 방법도 있지만 목록 전부를 불러와서 페이징 시 DB접근 없이 랜더링 하는 방법이다 전역 변수에 랜더링할 목록 데이터 저장 우선 jquery 전역변수를 선언하고 ajax함수를 따로 만들어서 랜더링할 목록 데이터를 저장한다 ( 이게 최선은 아닐 수 있지만 일단 할 수 있는 방법을 정리해놓으려고 한다 ) 이렇게 저장 해놓으면 나머지 활용하는 방법은 입맛대로 사용하면 된다 123456789101112131415161718192021222324var $data = ""; // 목록데이터를 저장할 전역변수 // ajax 함수 전달인자var param.. [jQuery] Uncaught TypeError: Cannot read property jQuery와 ajax함수를 통해서 페이지를 구성하던 중에 에러가 발생했다. Uncaught TypeError: Cannot read property 'value' of undefined 도무지 왜 발생하는지 이해가 안됬다. 페이지도 잘 올라오고 로직 상에 문제가 없었다. ( 예를들면 JS가 HTML보다 위에 있다던지.. ) 해당 에러가 발생하는 경우가 많지만 나의 경우를 정리하려고 한다. 에러 원인 나의 상황은 ajax함수를 통해서 결과물을 받았다. 그 결과물의 List를 얻어서 List의 속성을 사용했다. 그런데 속성에서 위의 에러가 발생했다. 크롬 개발자 모드를 켜서 보니 source창에서 속성 이름에 빨간 줄이 그어져 있었다. 열심히 구글링을 해본 결과 문제는 저 구문 앞에 $memberList[.. 1 2
