skylove1982

jquery 를 사용하면서 선택된 여러개의 데이터들을 한번에 이벤트를 주는 경우가 있습니다. 예를 들어서 smsCheck 라는 클래스 이름을 가진 체크 박스가 있다고 생각해 보십시오. 그리고 선택된 체크박스에 대해서만 a 태그로 된 sendSMSBtn 클래스를 가진 버튼이 있다고 생각해 보십시오. 그러면 이 때 선택된 체크박스에 대해서만 해당 테이블 같은 라인에 있는 버튼을 일괄적으로 클릭 이벤트를 발생시켜 보겠습니다. 그런데 문제점은 각 클릭된 이벤트들이 순식간에 일어났을 경우가 문제 입니다. 서버에서는 동시에 여러개의 ajax 관련 내용이 실행이 된다고 했을 경우에 문제가 될 여지가 있어 보입니다. 따라서 jqury를 사용할때 each 문장에서 각 개별적으로 이벤트를 시간적으로 여유를 두고 클릭 이벤..

html 문서중에서 input 태그를 사용하는 경우에 키보드 입력이 될 경우에 처리해야할 경우가 많은데요. 특별한 키가 입력되었다 하였을때.. 예를 들어 엔터키가 눌러졌을 경우에 전송 버튼 누른 효과를 한다든지.. 또는 입력되는 값을 조절을 할 경우가 생깁니다. 예를 들어서 주민번호를 예를 들어 설명해 본다면요.. 물론 요즘엔 주민번호 입력은 않되기 때문에 회사 사원번호라고 생각하고 설명해 드리겠습니다. - 위와 같은 input 태그가 있다고 있다고 생각해 보면, 앞의 input 에는 6자리.. 그리고 뒤의 input 에는 7자리로 된 값을 입력받도록 스크립트로 제한을 한다면 어떻게 해야할까요? 우선은 숫자만 입력 받도록 하기 위해서 input 태그는 타입을 number 로 하였습니다. 그리고 이제는 자..

jQuery 를 이용하여서 title, type, 그리고 이미지 파일을 한개 전송을 한다고 했을때 그것도 aJax를 통해서 말이죠... 적용하느라 하루 이상이 걸렸는데요. 아무튼 여기서 핵심은 FormData 를 생성하고.. 첨부된 파일 정보를 줘야 합니다. 그리고 processData 와 contentType 값을 false 로 해야합니다. 참고로 datatype 를 json 으로 한 이유는 반환받는 값을 json 형태로 값을 인식하기 위함입니다. 이것은 꼭 않하셔도 됩니다. 아래의 예제는 핵심되는 ajax 파일 부분만 있으니 참고만 하시면 될것 같습니다. var currentDlg = $('#add_dialog'); var title = currentDlg.find('#title').val(); va..

css 코드 중에 이미지 위에 마우스를 오버 했을 경우에 주위에 영향은 주지 않고 이미지만 확대되어 보이는 효과에 대한 html과 css 코드 예제입니다. css 코드 중에 scale(1.08); 관련 코드를 유의해서 보시면 됩니다. [예제 파일 : albumList.html] 앨범1의 제목비디오 갯수1앨범2의 제목비디오 갯수2앨범3의 제목비디오 갯수3 [예제 파일 : albumList.css] div.album {position: relative;display: inline-block;box-sizing: border-box;text-align: center;width: 214px;} div.album a {position: relative;margin: 0 auto;box-sizing: border-..

jQuery 모바일(jQuery Mobile) 에서는 모바일 개발에 필요한 몇가지 커스텀 이벤트를 제공하고 있습니다. 영어 실력이 많이 부족하지만 이해하는 부분까지만 설명해 놓았으니 이해 부탁드립니다. 자세한것은 맨 아래에 있는 jQuery URL 을 참고해주세요. hashchange북마크 가능한 해쉬 히스토리를 활성화 : 콜백함수 제공 (정확한 것은 사용을 안해봐서 모르겠습니다.ㅠㅠ) mobileinitjquery 모바일의 로딩이 다 끝난후에 실행되는 이벤트를 의미합니다. navigatehashchange 이벤트와 popstate 이벤트가 포함?하는 이벤트입니다. 모든 브라우저에 하나의 추가적인 이벤트를 제공하기 위한것인데요. 또한 통일된 핸들러 허용을 이해서 데이터 오브젝트를 모든 브라우저에 제공한다..

검색창에서 텍스트를 입력하고 엔터를 눌렀을때 자동으로 검색이 되어지는 효과를 구현하고 싶은때가 있습니다. 예를 들어 검색어를 입력하고 매번 확인 버튼을 눌러야 한다면 얼마나 불편 할까요? 그래서 검색어를 입력하고 엔터를 쳤을 때에 확인 버튼을 눌러진 효과를 구현해보고자 합니다. 여기서 검색어 박스는 textarea 로 했는데요. 물론 짤은 검색어이니까 input 으로 하셔서 상관은 없습니다. 만일 input 으로 한다면 대신에 이렇게 해야하겠지만요.. 아무튼 여기에서의 핵심은 엔터를 쳤을때에 확인 버튼을 누른 효과를 구현하기 위함이기 때문에.. 스크립트 부분을 설명하겠습니다. 우선 아래의 소스 코드를 참고하십시오. 위의 소스 코드중에 jquery 스크립트 부분을 보면은.. keypress 이벤트 핸들러를..

버튼을 누르면 특정 html 코드나 텍스트가 클립보드로 복사가 되게 하려면 어떻게 해야할지 소개하고자 합니다. 제가 예시로 소개하고자 하는 것은 배너를 보여주고 소스코드 복사 버튼을 클릭했을때 클립보드로 소스코드가 복사가 되어 바로 붙여넣어 사용할 수 있도록 하기위한 방법을 소개 하도록 하겠습니다. 아래는 소스 코드입니다. 위의 소스 코드 내용을 보면 banner 클래스 부분의 배너 이미지와 배너 소스 복사 버튼이 들어가는 부분입니다. bannerBtn 클래스의 버튼이 눌러지면 해당 배너 이미지를 싸고 있는 banner 클래스의 이미지 html 값을 가져오도록 하고.. 그 값을 textarea (아이디가 ClipBoard) 에 값을 넣은 후에 복사를 하게 됩니다. 이 때 복사를 하려면 document.e..

jQuery 를 이용한 스크립트를 작성할때 스크롤 이벤트에 관련된 함수에 이용 가능한 소스코드를 정리해 보았습니다. 처음에는 퀵메뉴를 고정시키고 슬라이딩 시키는 효과를 주려고 했지만 웹표준 상 퀵메뉴는 css 로 position:fixed 로 했습니다. 혹시 몰라서 스크롤 이벤트에 관련된 변수값과 정보들에 관해 적어 놓습니다. 참고하세요~^^ (참 맨 상단에 jquery.min.js 파일 포함되어야 하는 거 아시죠?^^ 파일을 jquery.com 사이트를 방문하시면 있어요^^)

jQuery 에서 input 타입이 체크박스(checkbox)일 경우에 체크박스를 클릭할때 체크 유무에 따라서 이벤트 발생하도록 하는 방법을 예로 설명하고자 합니다. 그리 어려운 방법은 아니지만 까끔 잊어버리기에 여기에 정리하고자 합니다. 우선 바로 아래의 소스코드를 보면 체크박스에 선택이 된 체크박스가 보일것 입니다. checked 값을 비우고 한다면 선택이 되지 않은 상태로 보일것입니다. 이 상태에서 체크박스를 선택할떄 일어나는 이벤트를 건다고 한다면.. 위의 예제와 같이 소스코드1에 해당하는 함수는 input 이라는 태그에서 타입이 체크박스에 해당되는 모든 것에 이벤트를 걸게 됩니다. 소스코드2의 함수는 input 태그에 네임이 checkValue 라는 것을 찾아서 이벤트를 걸게 됩니다. 즉 이름을..

jQuery 를 이용해서 메인 이미지의 페이드 효과를 주면서 변경해보는 효과를 만들어 보았습니다. ul li 형식에 각 li 에는 클래스 이름으로 지정되어있고 그 클래스에 배경이미지로 잡혀있는 경우입니다. 우선 html 소스코드를 보면은 메인이미지 위와 같습니다. 보시는 것과 같이 각 li 에 클래스 이름이 있고 mainimgview라는 이름과 넘버로 이루어져 있습니다. 그럼 위의 클래스는 스타일시트 즉 css 에 어떻게 적용이 되어있는가를 보면 아래와 같습니다. #mainimg { position:absolute;left:0;top:147px; width:100%; height:727px; z-index:99; } #mainimg .mainimgview01 { position:relative; floa..