본문 바로가기

제이쿼리19

[JavaScript] inputbox에 숫자와 백스페이스(←)만 Key-In(입력)되게 하는 자바스크립트 소스 See the Pen Input Only Number & Backspace by Woojin Choi (@woojin-choi) on CodePen. Inputbox에 숫자와 백스페이스(←)만 Key-In되게 하는 자바스크립트입니다. event.keyCode로 제어합니다. 문자가 입력되었다 사라지는 게 아니고 아예 문자는 입력이 안됩니다. 2018. 11. 20.
[jQuery] 화면 아무곳이나 마우스로 클릭하면 해당 레이어 사라지게 하는 jQuery 스크립트 (2개 이상의 객체 동시 사용할 경우) See the Pen [jQuery] 화면 아무곳이나 마우스로 클릭하면 해당 레이어 사라지게 하는 jQuery 스크립트 (2개 이상의 객체 동시 사용할 경우) by zzzznara (@zzznara) on CodePen. 해당 레이어의 상하좌우 위치를 계산해서 레이어가 위치하는 곳 이외의 곳을 마우스로 클릭하면 해당 레이어가 사라지게 하는 스크립트입니다. 2가지 이상의 객체를 동시에 사용할 때 사용합니다. 즉, 위 예제에서 버튼과 레이어를 클릭할 때는 사라지지 않아야 하고 그 2개를 제외한 다른 곳을 클릭하면 레이어가 사라집니다. 2018. 11. 14.
[jQuery] 화면 아무곳이나 마우스로 클릭하면 해당 레이어 사라지게 하는 jQuery 스크립트 See the Pen [jQuery] 화면 아무곳이나 마우스로 클릭하면 해당 레이어 사라지게 하는 jQuery 스크립트 by zzzznara (@zzznara) on CodePen. 해당 레이어의 상하좌우 위치를 계산해서 레이어가 위치하는 곳 이외의 곳을 마우스로 클릭하면 해당 레이어가 사라지게 하는 스크립트입니다. 메뉴바나 레이어 메뉴에 많이 사용되는 스크립트랍니다. 2018. 11. 12.
[제이쿼리 플러그인 소스] inputbox에서 커서가 원하는 곳에 위치하게 하는 jquery plugin See the Pen [jQuery plugin] inputbox에서 커서가 원하는 곳에 위치하게 하는 제이쿼리 플러그인 소스 by zzzznara (@zzznara) on CodePen. 자동으로 커서를 inputbox에 위치하게 할 때 inputbox의 내용 뒤에 커서가 위치하게 하는 제이쿼리 플러그인 입니다. $(“[name=cur]”).focus(); 이렇게 focus()를 주게 되면 커서가 앞에 위치합니다. $(“[name=cur]”).focus().setCursorPosition(); 이 플러그인을 넣고 focus() 뒤에 setCursorPosition( 1 )를 하게 되면 커서가 글자 뒤에 위치합니다. setCursorPosition() 안의 숫자는 포커스의 위치입니다. 2018. 10. 25.
[jQuery] jquery ui의 달력을 세팅하고 날짜 유효성 체크 및 기간 설정해주는 플러그인(plugin) See the Pen [jQuery] jquery ui의 달력을 세팅하고 날짜 유효성 체크 및 기간 설정해주는 플러그인(plugin) by zzzznara (@zzznara) on CodePen. 1. 달력에 숫자와 하이픈(-)만 입력가능합니다. 2. 존재하지 않는 날짜를 입력했는지 체크합니다. 3. from ~ to 달력인 경우, 서로 기간이 엇갈리지 않게 체크 및 disabled 처리합니다. (from 달력에 ‘2018-01-01’이 선택된 경우, to 달력은 ‘2018-01-01’ 이후만 선택 가능합니다.) 2018. 5. 31.
[jQuery] jqtransform의 selectbox의 option 추가해도 안 보이는 문제 해결방법 2018/05/23 - [프로그래밍 언어/jQuery] - [jQuery] form의 inputbox, selectbox, radio 버튼을 예쁘게 꾸며주는 jqtransform 플러그인을 소개합니다. Head Javascript /** * * jqTransform * by mathieu vilaplana mvilaplana@dfc-e.com * Designer ghyslain armand garmand@dfc-e.com * * * Version 1.0 25.09.08 * Version 1.1 06.08.09 * Add event click on Checkbox and Radio * Auto calculate the size of a select element * Can now, disabled the .. 2018. 5. 23.
[jQuery] 제이쿼리 - each()의 반대 reverse() 사용하기 each() 문은 같은 객체를 반복해서 어떤 작업을 할 때 사용하는데요.$(“[type=checkbox]”).each({function(){ … }); 반대로 거꾸로 반복 작업을 해야할 때는 어떻게 사용해야 할까요? get().reverse()를 사용하시면 됩니다.$( $(“[type=checkbox]”).get().reverse() ).each(function( index ){ … }); 아래 예제에서 어떻게 동작하는지 확인하실 수 있습니다. 2016. 1. 14.
[jQuery] 제이쿼리로 전체선택/선택해제 구현하기 (하나라도 체크해제되면 전체선택 체크도 해제되게 구현) 1. ‘전체선택 체크박스’를 클릭하면 전체선택 및 해제되도록 구현함. 2. 각각의 체크박스를 클릭시 ‘전체선택 체크박스’도 선택 및 해제되도록 구현함. 2016. 1. 13.
[jQuery] 제이쿼리 숫자에 콤마 찍어주고 소수점 제어하는 플러그인(plugin) jQuery의 장점은 사용하기 너무너무 편리하다는 것 외에.. 원하는 모든 게 플러그인만 받으면 구현이 가능하다는 것입니다. 원하는 게 있다면 먼저 플러그인부터 검색해 보세요. 숫자에 3자리마다 콤마를 찍어야 하는 경우가 있어서 플러그인을 찾아보았습니다. 아래 첨부된 파일 다운로드 받아서 사용하시면 되구요. 아래 링크 들어가셔서 다운로드 받으셔도 됩니다. https://github.com/teamdf/jquery-number jquery.number.min.js 파일만 소스에 추가하시면 되구요. 아래처럼 $.number() 함수 안에 숫자 넣으셔서 사용하시면 됩니다. selecter로 객체를 찾아 구현할 때는 $(객체).number() 사용하시면 되네요. $("span").number( true, 2 ).. 2015. 8. 6.
[jQuery] 마우스로 움직이는 팝업레이어 - 제이쿼리로 만들기 $(function() { $( "#draggable" ).draggable(); });draggable() 메소드만 호출하면 됩니다. 사이에 아래 스크립트 넣어주는 거 잊으면 안되겠죠. 2015. 7. 22.
[jQuery] 제이쿼리 UI 달력/Datepicker/캘린더/Calendar jQuery Datepicker입니다. https://jqueryui.com/datepicker/ 예제(Examples)가 14개 있으니 위 링크 클릭하셔서 확인하시면 됩니다. 달력이 깔끔해서 마음에 드네요. 특별한 설명보다는 사이트 가셔서 예제를 클릭해 보시고 View Source 눌러보시면 소스 확인하실 수 있습니다. 2015. 7. 21.
[jQuery] 제이쿼리 페이지 네비게이션 플러그인(plugin) - PageNavigator (페이지 번호) jQuery 페이지 네비게이션 플러그인이 있어 소개합니다. jQuery 플러그인 정말 찾아보면 없는 게 없네요. 정말 코딩하기 좋은 세상입니다^^ > 프로젝트 사이트 : https://github.com/syakuis/jquery-pagenavigator > 데모 : http://syakuis.github.io/demo/jquery-pagenavigator/demo.html > 다운로드 : https://github.com/syakuis/jquery-pagenavigator/releases // 기본 스타일 jQuery('#document_navi').jaPageNavigator({ page_row : "10" // 보여질 게시물 목록 수 , page_link : "10" // 보여질 페이지 링크 수 ,.. 2015. 7. 15.
[jQuery] 제이쿼리로 전체선택/선택해제 구현하기 $("[name=allCheck]").click(function(){ var isChecked = $(this).is(":checked"); $("[name=checkId]").prop("checked", isChecked); });$(this).is(":checked")가 true면 모든 체크박스가 선택되고, false면 모든 체크박스가 선택해제됩니다. 여기서, $(this)는 $("[name=allCheck]") 개체입니다. $(document).ready(function() { ... }); DOM이 로드되고 이미지가 로드되기 전에 $(document).read() 함수가 실행됩니다. 이곳에 체크박스 click 이벤트를 구현해 주어야 화면이 실행되었을 때 동작합니다. 2015. 7. 15.
[jQuery] plugin(제이쿼리 플러그인)으로 검색 자동완성(autocomplete) 구현하기 자동완성을 구현할 일이 생겨서 찾아보던 차에 좋은 plugin을 발견했네요.jQuery Autocomplete 플러그인인데요.http://dndrb0.blog.me/120205427972저는 이분이 올려놓으신 거 좀 수정해서 다시 올려봅니다. => 다운로드 받아서 실행해 보세요. 12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152자동완성 var availableTags = [ '가나', '가나쵸콜렛', '갈갈이 삼형제', '북마크', '북까페', '엄마', '아빠', '북소리', '여러분', '소문', '소문난 식당', '나나나', '쇼', '쇼팽', '모나미', '한강', '강강수월래.. 2015. 7. 6.
[jQuery] 제이쿼리로 중복 클릭 방지를 위한 레이어 팝업 띄우기 레이어를 띄운 후, 뒤에 있는 화면을 클릭하지 못하게 하는 스크립트입니다.소스를 보면 레이어를 띄우고 로 감싼 후, 을 입혀서 클릭할 수 없게 만들고 있습니다. 그리고, 어두운 색상으로 클릭할 수 없다는 느낌을 주었습니다.아래 첨부파일을 다운로드 받아서 테스트 해보세요~ blockLayer.zip 2015. 4. 14.

티스토리툴바