본문 바로가기

JQuery45

[jQuery] 제이쿼리로 구현한 alert, confirm 레이어 팝업 샘플 소스 제이쿼리로 구현한 alert, confirm 레이어 팝업 샘플 소스입니다. 2016. 11. 30.
[jQuery] outerHTML 간단하게 구현해서 사용하기 javascript에는 outerHTML이라는 게 있어서 해당 객체의 안의 내용 뿐 아니라 자기 자신을 포함한 코드를 가져올 수가 있습니다.공간 학습 회색 공간 이런 소스가 있다고 할 때, 아래처럼 소스를 가져올수가 있습니다. document.getElementById(“p-line”).innerHTML (= $(“.p-line”).html()) 회색 공간 document.getElementById(“p-line”).outerHTML 회색 공간 jQuery에는 의외로 이런 outerHTML 메소드가 없습니다. 그래서, 만들어 주어서 사용해야 하는데, 의외로 간단히 한줄로 해결할수가 있습니다. $(“p-line”).clone().wrapAll(“”).parent().html()소스를 설명을 하자면… 본인 .. 2016. 2. 3.
[jQWidget] 멋진 챠트와 그래프, 트리, 그리드 등을 서비스하는 라이브러리 jQWidgethttp://www.jqwidgets.com/jquery-widgets-demo/ 제가 프로젝트를 하다가 챠트와 그래프, 트리, 그리드가 너무 잘 만들어진 라이브러리가 있어 추천합니다.예제도 많고하고 잘 만들었고 또 따라하기 쉽게 잘 설명되어 있더라구요. 챠트, 그래프, 트리, 그리드 외에 탭, 툴팁, Colorpicker 등 현재 총 56개의 컴퍼넌트들을 제공하고 있습니다. 챠트를 한번 들어가 봤는데... 챠트만 해도 너무너무 다양한 챠트들을 다 지원하고 있더군요.웬만한 챠트나 그래프는 다 있다고 보시면 됩니다. [View Source]를 선택하면 샘플 소스가 보입니다.txt 파일과 JSON, XML 방식으로 데이타를 읽어서 그래프를 읽는 방식의 두가지 예제가 있습니다. 트리건 챠트건 그.. 2016. 1. 20.
[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) - jsfiddle.net inputbox와 연계할 달력을 찾던 중에 아주 좋은 jQuery 달력 플러그인을 발견해서 소개해 드립니다.달력도 달력이지만, "2015-10-06"처럼 포맷에 맞게 입력하도록 inputbox를 셋팅해 주고, 잘못된 날짜가 입력됬는지도 체크해주는 완벽한 플러그인이네요. http://jsfiddle.net/trixta/swqme/이 링크 클릭하시고 가서 한번 확인해 보세요. 이 파일을 다운로드 받아서 압축풀고 실행해 보셔도 됩니다. "연도-월-일" 포맷을 자동으로 설정해 주고 있구요. 이처럼 validation 체크까지 해주고 있습니다. 화살표로 날짜를 이동할수도 있고 달력을 선택할수도 있네요.VB나 델파이같은 애플리케이션으로 구현된 달력 입력란과 거의 동일하게 구현해 놓았네요. 달력이 필요하신분들 한번 .. 2015. 10. 6.
[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] 제이쿼리 항상 가장 최신(마지막) 버전 링크 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.

티스토리툴바