본문 바로가기

프로그래밍 언어/jQuery40

[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] 제이쿼리 플러그인(plugin)으로 숫자입력, 알파벳입력 구현하기 - jquery.alphanum.js jQuery 플러그인(plugin)으로 숫자입력, 알파벳입력 구현하기 - jquery.alphanum.js 소스 alphanum() numeric() alphanum() numeric() 설명 $('#alphanum').alphanum({ allow: '%' }); alphanum() 메소드로 알파벳만 입력 받도록 구현합니다. allow: '%' => 해당 문자는 입력을 허락한다는 뜻입니다. 즉, 알파벳 외에 더 입력받고 싶은 문자를 넣으시면 됩니다. $('#numeric').numeric({ maxPreDecimalPlaces : 10, maxDecimalPlaces : 2 }); numeric() 메소드로 숫자만 입력받도록 구현합니다. maxPreDecimalPlaces : 10 => 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] 제이쿼리 항상 가장 최신(마지막) 버전 링크 url 사용하기 다을 링크로 jQuery 최신버전을 링크할 수가 있습니다. jQuery 다운로드는 여기에서~http://docs.jquery.com/Downloading_jQuery 2015. 6. 18.
[jQuery] 제이쿼리로 중복 클릭 방지를 위한 레이어 팝업 띄우기 레이어를 띄운 후, 뒤에 있는 화면을 클릭하지 못하게 하는 스크립트입니다.소스를 보면 레이어를 띄우고 로 감싼 후, 을 입혀서 클릭할 수 없게 만들고 있습니다. 그리고, 어두운 색상으로 클릭할 수 없다는 느낌을 주었습니다.아래 첨부파일을 다운로드 받아서 테스트 해보세요~ blockLayer.zip 2015. 4. 14.
[jQuery] 제이쿼리로 만들어진 막강한 기능의 정말 괜찮은 tree - zTree jQuery로 만들어진 정말 막강한 기능의 zTree를 소개해 드리겠습니다. http://www.ztree.me/위 링크 클릭하시면 zTree에 관한 모든 것을 보실 수 있구요. 데모는 물론 소스도 다운로드 가능합니다. 그렇다면, zTree에 어떤 기능이 있는지 간략하게 알아보겠습니다. 제가 소개해 드리는 기능 외에도 여러분이 원하는 웬만한 기능은 다 있으니 사이트를 방문해 보시기 바랍니다. 1. 기본 트리 2. 아이콘 변경 및 추가 기능 3. 체크박스 및 라디오버튼으로 체크하기 4. 좌측 트리에서 Drag하여 우측에 새로운 트리 만들기 5. 트리 추가/수정/삭제 기능 6. 페이지 기능 - 우측 상단 아이콘을 눌러서 페이지를 트리에 뿌려줄 수 있습니다. 7. Box + Tree 결합 구조 이외에도 Aja.. 2015. 3. 23.
[jQuery]제이쿼리에서 이벤트핸들러의 함수를 강제(자동으)로 실행하는 trigger 명령어 $("[name=textStr]").trigger("focus"); name=textStr 인 객체의 focus() 이벤트를 발생시키라는 명령입니다. 즉, trigger("이벤트명")으로 어떤 이벤트든 해당 객체의 이벤트를 발생시킬 수가 있습니다. 자동으로 부모창이나 팝업창의 버튼을 클릭하고 싶을 때 사용하면 편리합니다. 다른 사람이 만든 소스의 해당 객체의 이벤트를 발생하면 어떤 명령이 실행되는지 잘 모를 때 실행하면 아주 편리합니다. 위 예제에서는 버튼을 클릭하면 inputbox의 focus() 이벤트를 강제 실행하고 있습니다. 2015. 1. 22.
[jQuery] 제이쿼리에서 json 변수 사용(활용)법 jQuery에서 json 변수를 사용하는 방법은 마치 자바스크립트 배열을 사용하는 것처럼 간단하고 편리합니다. push() 메소드를 이용해서 변수를 원하는대로 넣을 수 있습니다.jsonObj.push({ grade: "1학년", name: "김철수", number: "1번", height: "177cm", ... }); json 변수의 값을 가져올 때는 .grade, .name, .number 처럼 속성만 표시하면 됩니다.for(i = 0; i < jsonObj.length; i++) { jsonObj[i].grade +" "+ jsonObj[i].name +" "+ jsonObj[i].number } 각 index 별로 호출하려면 jsonObj[0].grade, jsonObj[1].grade, json.. 2014. 12. 24.
[jQuery] .clone()으로 Dom 요소 복사하기 $(document).ready(function() {$( "b" ).clone().prependTo( "p" );}); $(document).ready(function(){...}); => 화면이 모두 로드되고 이미지를 불러오기 전에 실행하라는 뜻입니다. $( "b" ).clone() 은 b 태그 요소를 복사하라는 뜻입니다. prependTo( "p" ) 는 p 태그 요소 앞에 추가하라는 뜻입니다. 안녕! 좋은하루 되세요. 이렇게 구현돼 있던 게 $( "b" ).clone().prependTo( "p" ); 이 명령이 실행됨으로 아래처럼 구현이 됩니다.안녕!안녕! 좋은하루 되세요. 2014. 12. 6.
[jQuery] 제이쿼리로 필드를 포함한 플레이스홀더(placeholder) 텍스트 만들기 예제 3 2014/12/05 - [프로그래밍 언어/jQuery] - jQuery로 필드를 포함한 플레이스홀더(placeholder) 텍스트 만들기 예제 1 2014/12/05 - [분류 전체보기] - jQuery로 필드를 포함한 플레이스홀더(placeholder) 텍스트 만들기 예제 2 먼저, 위 예제들을 확인하세요. $("#search").submit(function(){ if($("#searchText").val() == searchLabel) { $("#searchText").val(""); } }); inputbox에 아무것도 입력하지 않고 submit 버튼을 눌렀을 때, '사이트 검색'이라는 단어가 넘어가지 않도록 구현을 하는 소스입니다. 아무것도 입력하지 않았을 때 '사이트 검색'이라는 단어를 inpu.. 2014. 12. 5.
[jQuery] 제이쿼리로 필드를 포함한 플레이스홀더(placeholder) 텍스트 만들기 예제 2 2014/12/05 - [프로그래밍 언어/jQuery] - jQuery로 필드를 포함한 플레이스홀더(placeholder) 텍스트 만들기 예제 1 위 글을 먼저 읽은 다음에 다음 설명을 참조하세요. $("#searchText").addClass("placeholder").val(searchLabel).focus(function() { if(this.value == searchLabel) { $(this).removeClass("placeholder").val(""); }; }).blur(function() { if(this.value == "") { $(this).addClass("placeholder").val(searchLabel); } });focus(), blur() 함수를 이용해서 inputbo.. 2014. 12. 5.

티스토리툴바