본문 바로가기

프로그래밍 언어/jQuery40

[jquery] 제이쿼리로 map()과 join()을 사용해서 객체의 문자열을 연결하는 간단한 방법 See the Pen jquery join sample by zzzznara (@zzznara) on CodePen. map()과 join()을 사용해서 객체의 문자를 연결하는 간단한 방법입니다. join()은 문자열을 콤마(,)로 연결해 줍니다. 2018. 11. 18.
[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] 좌우 Div의 높이를 동일하게 조정하기 (레이아웃이나 템플릿 등에서 사용 가능) See the Pen [jQuery] 좌우 Div의 높이를 동일하게 조정하기 (레이아웃이나 템플릿 등에서 사용 가능) by zzzznara (@zzznara) on CodePen. 3단 레이아웃일 경우, 상단/좌측하단/우측하단 이렇게 구분이 되는데요. 이미지나 내용이 많을 경우 좌측하단과 우측하단의 높이가 일치하지 않는 문제가 생깁니다. 이럴 때 사용하면 좋을 것 같네요~ 예제에서 처음 화면이 열릴 때 좌우측 하단의 높이가 다릅니다. 좌측하단 높이 : 300px 우측하단 높이 : 100px 하지만, setTimeout() 함수로 2초 후에 equalHeights() 함수를 호출하여 높이를 같게 해줍니다. 물론, 실제 레이아웃 등에 사용할 때는 setTimeout() 함수는 필요없으므로 제거하시면 됩니다... 2018. 6. 10.
[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] form의 inputbox, selectbox, radio 버튼을 예쁘게 꾸며주는 jqtransform 플러그인을 소개합니다. Head Javascript $(function(){ $('form').jqTransform({imgPath:'http://www.htmldrive.net/edit_media/2010/201009/20100927/jqtransform/jqtransformplugin/img/'}); }); Body Input Text: Input Password: Checkbox: Radio : oui non Select : 1 2 Select Redimention : Big Option test line with more words Multi line row. Multi line row. Multi line row. Multi line row. Option 2 Option 3 Option 4 Option 5 Option.. 2018. 5. 23.
[jQuery] 제이쿼리로 구현한 alert, confirm 레이어 팝업 샘플 소스 제이쿼리로 구현한 alert, confirm 레이어 팝업 샘플 소스입니다. 2016. 11. 30.
[jQuery] 마우스 클릭하면 마우스 근처에 나타나는 레이어 툴팁(Tooltip) 마우스를 클릭하면 마우스 우측하단에 레이어가 나오는 소스입니다. 만약 레이어가 브라우저 창의 너비나 길이를 벗어나게 되면 반대의 위치에 레이어를 보여줍니다. 반대의 위치에 레이어를 보여줬더니 기준점(0,0)을 벗어나게 되면 기준점(0,0)에 레이어를 배치합니다. 위 샘플 각 환경에 맞게 수정해서 사용하시면 됩니다. 2016. 2. 24.
[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.

티스토리툴바