본문 바로가기

프로그래밍/자바스크립트65

jQuery UI Accordian을 사용한 메뉴 만들기 jQuery UI 의 Accordian 기능을 이용해서 메뉴를 만들어 봅니다. jQuery UI는 http://jqueryui.com/ 에서 다운로드 받을 수 있습니다. 1. 필요한 자바스크립트와 스타일 시트를 포함합니다. 2. 메뉴가 될 HTML 입니다. Menu 1 Sub menu 1-1 Sub menu 1-2 Menu 2 Sub menu 2-1 Sub menu 2-2 Menu 3 Sub menu 3-1 Sub menu 3-2 3. 메뉴를 생성합니다. - header: 기본값을 태그 입니다. 그 외의 태그를 사용하려면 header 옵션을 지정합니다. jQuery의 셀렉터 구문을 사용할 수 있습니다. - collapsible: true를 설정하면 모든 메뉴를 다 닫을 수 있습니다. false로 지정하면.. 2018. 10. 31.
드래그해서 순서를 바꿀 수 있는 리스트 만들기(jQuery UI - Sortable) 순서가 있는 리스트에서 드래그 앤 드랍을 이용해서 아이템의 순서를 바꿀 수 있는 UI(사용자 인터페이스)가 jQuery UI에서 지원이 됩니다. Sortable 기능을 사용하면 원하는 기능을 구현할 수 있습니다. jQuery UI 사이트의 예제에는 기존에 존재하는 리스트 항목을 드래그 앤 드랍으로 순서를 바꿀 수 있는 예제만 나옵니다. 이 글에서는 순서를 바꾸는것 외에 아이템을 추가하고, 삭제하는 기능까지 구현해 보겠습니다. 첫 번째 예제는 Sortable의 기본 기능을 확인해보고, 두 번째 예제에서는 추가, 삭제 기능도 포함된 예제를 보도록 하겠습니다. 1. 필요한 js 라이브러리들 불러오기 jQuery 라이브러리, jQuery UI 라이브러리와 스타일 시트가 필요합니다. 예제에서는 외부 라이브러리를 .. 2018. 8. 31.
새창을 여는 window.open() 함수 사용법 웹브라우저에서 새창을 열기 위해서 가장 간단히 사용할 수 있는 방법이 자바스크립트 window 객체의 open() 함수를 사용하는 것입니다. 1. 문법(Syntax) var ret = window.open(url, name, specs, replace); 1.1. 반환값(ret) 새로 만들어진 창 객체가 반환됩니다. 창의 생성에 실패하면 null을 반환합니다. 이 객체를 통해서 새창을 제어할 수 있습니다. 예로 ret.close(); 로 창을 닫을 수 있습니다. 1.2. url 새창에 보여질 주소 입니다. 선택적인 값으로 비워두면 빈창(about:blank)이 보입니다. 1.3. name 새로 열릴 참의 속성 또는 창의 이름을 지정합니다. 선택적인 값으로 기본값은 "_blank" 입니다. 사용 가능한 값.. 2018. 6. 27.
AX5UI - toast를 사용한 시스템 메세지 출력하기 AX5UI-toast는 웹 애플리케이션 화면상에서 시스템 메세지를 보여주는 라이브러리입니다. 메세지를 출력하면 화면상의 지정된 장소에 메세지가 지정된 시간동안 보여진 다음에 자동으로 사라집니다. 예제 소스는 글 하단에 첨부하여 두었습니다. 사용하는 방법을 알아보겠습니다. 1. 필요한 라이브러리들- jQuery 1.x 이상이 필요합니다.- ax5core 라이브러리가 필요합니다.- ax5toast 라이브러리가 필요합니다.- ax5toast 스타일 시트가 필요합니다.- 샘플에 나오는 테마와 ICON을 사용하기 위해서는 Font Awesome 스타일 시트가 필요합니다. 2. toast 객체를 생성합니다.$(document.body).ready(function () { var toast = new ax5.ui.t.. 2018. 5. 15.
jQuery UI autocomplete(입력필드 자동완성) 사용하기 입력 필드에 타이핑을 하면 관련 정보를 보여주고 선택할 수 있는 기능이 많이 사용됩니다. jQuery UI에서 제공되는 autocomplete 기능을 사용해서 이 기능을 구현해 봅니다. 1. 필요한 파일 인클루드하기 jQuery UI 스타일 시트 파일과 jQuery 파일, jQuery UI 파일이 필요합니다. 각각은 다운로드 받아서 사용해도 되고 CDN 을 이용해서 사용해도 됩니다. 이 예제에서는 CDN을 사용했습니다. 2. 기본 기능 사용하기 도시: id가 city 인 입력 필드에 자동완성기능을 만듭니다. - $("#city").autocomplete() : 자동완성기능을 만듭니다.- source: avalibleCity : 타이핑시 보여질 내용 입니다.- select: function(event, u.. 2018. 4. 20.
자바스크립트 주기적인 실행(setInterval, setTimeout) 자바스크립트로 주기적인 작업을 실행하기 위해서 setInterval과 setTimeout 메소드를 사용할 수 있습니다. 두 가지는 비숫하지만 중요한 차이점을 가집니다. - setInterval 함수 : 일정한 시간 간격으로 작업을 수행하기 위해서 사용합니다.clearInterval 함수를 사용하여 중지할 수 있습니다. 주의할 점은 일정한 시간 간격으로 실행되는 작업이 그 시간 간격보다 오래걸릴 경우 문제가 발생할 수 있습니다. - setTimeout 함수 : 일정한 시간 후에 작업을 한번 실행합니다. 보통 재귀적 호출을 사용하여 작업을 반복합니다. 기본적으로 setInterval 과는 달리 지정된 시간을 기다린후 작업을 수행하고, 다시 일정한 시간을 기다린후 작업을 수행하는 방식입니다. 지정된 시간 사이.. 2018. 4. 20.
jQuery .load() 메소드 - 페이지 내용 동적 교체 웹 페이지의 내용을 동적으로 교체하기 위해서 Ajax로 서버에서 데이터 json 형식으로 받아 HTML 요소를 생성하여 페이지내의 원하는 위치의 내용을 바꾸는 작업을 많이 합니다. jQuery의 .load() 메소드는 주어진 URL로부터 HTML 데이트를 받에서 jQuery 셀렉터로 선택된 위치에 넣어 줌으로써 동적으로 페이지의 내용을 교체하는 작업을 간단하게 처리할 수 있도록 해줍니다. 아래 코드는 간단한 사용법을 보여주고 있습니다. 페이지내에서 아이디(id)가 "result" 인 요소를 선택하고 그 요소의 내용을 "load/test.php" 페이지가 반환하는 내용으로 채웁니다. jQuery .load() 메소드 사용법은 다음과 같습니다. 세 가지 인자를 가질 수 있습니다. .load( url [, d.. 2018. 4. 20.
jQuery UI datepicker - 자바스크립트 달력 사용하기 jQuery UI 의 datepicker 위젯은 웹 프로그램에서 날짜를 선택할 수 있는 자바스크립트 달력 입니다. 간단한 사용방법을 알아보겠습니다. jQuery UI 는 jQuery 플러그인으로 만들어 졌으므로 jQuery가 있어야 합니다. 예제에서는 jQuery는 다운로드 받아서 쓰지 않고 CDN 을 사용해서 테스트 했습니다. jQuery UI 는 http://jqueryui.com/download/ 에서 다운로드 받을 수 있습니다. 필요한 위젯만 선택하여 다운로드 받는것이 가능합니다. 모든 위젯이 포함되어 있는 배포판은 http://jqueryui.com/download/all/ 에서 다운 받을 수 있습니다. 달력의 한글화를 위한 파일은 https://github.com/jquery/jquery-ui.. 2018. 4. 20.
CKEditor 4 설치와 PHP 연동 하기 웹에서 사용하는 HTML에디터로써 많이 사용되고 있는 CKEditor를 설치하고 PHP로 사용하는 방법을 알아봅니다. 오랜만에 CKEditor 웹사이트에 들어가보니 CKEditor 5가 나오고 단순 웹에디터가 아니라 전문 텍스트 편집을 위한 프레임웍으로 사업 영역을 넓혀가고 있는 모습이었습니다. 하지만 거기까지는 필요 없으므로 이글에서는 CKEditor 4를 설치해 봅니다. CKEditor는 GPL, LGPL, MPL 의 세 가지 오픈소스 라이센스 중 선택해서 사용할 수 있고, 커머셜 버전도 있습니다. 전체 예제 소스는 글 아래 첨부 되어 있습니다. 1. 다음 URL에서 CKEditor 4 풀 버전을 다운로드 받습니다. 자신이 기능을 선택해서 다운받는 옵션도 있지만, 일단 풀 버전을 다운로드 받은 다음에.. 2018. 4. 19.
jQuery 무한 스크롤(Infinite scroll) 플러그인 jScroll 사용법 무한 스크롤은 페이지의 내용을 아래로 스크롤하면 새로운 내용이 덧붙여져서 많은 양의 컨텐츠를 동일한 페이지에 계속해서 보여주는 방법입니다. 이러한 기능을 구현해주는 jScroll은 jQuery 플러그인으로 만들어져 있으며, MIT와 GPL v2 의 듀얼 라이선스로 제공되어 집니다. 글 마지막에 예제 전체 소스를 첨부 했습니다. 1. 다음 사이트에서 프로그램을 다운 받습니다.(http://jscroll.com/) - 다운로드 링크는 Github로 연면됩니다. 필요한 파일은 jquery.jscroll.js 만 있으면 됩니다. 2. 필요한 파일을 포함합니다. - jQuery 플러그인이므로 jQuery가 먼저 필요합니다.- 다음받은 jquery.jscroll.js 파일을 포함하니다.- 무한 스크롤을 수행할 코드.. 2018. 4. 19.
다음 지도로 약도 만들기 홈페이지의 "찾아오시는길"에 약도를 넣을때 많이 사용하는 다음 지도로 약도 만드는 방법을 알아보겠습니다. 다음 지도로 약도를 만드는 방법은 두 가지가 있습니다. 첫 번째는 검색을 통해서 검색되어지는 위치에 대해 약도를 만드는 방법과 두 번째는 검색되어지지 않는 곳에 대해서 지도에서 찍어서 약도를 만드는 방법이 되겠습니다. 1. 위치 검색을 통해서 약도 만들기 - http://map.daum.net 에서 원하는 곳을 검색합니다. 여기서는 서울시청을 검색했습니다.- 지도에서 검색이되면 검색위치 표시를 클릭하면 팝업창이 뜹니다. 여기서 "상세보기"를 클릭합니다. - 상세보기 화면에서 우측 상단의 깃발 모양 아이콘을 클릭합니다. 이 아이콘이 약도 만들기 기능 입니다. - 레이어로 창이 뜨고 약도 크기를 지정할 .. 2018. 4. 19.
자바스크립트 정규식 객체와 자주 쓰이는 함수 자바스크립트에서 정규식을 사용하는 방법은 String 객체의 메소드를 사용하는 방법과 정규식 객체 RegExp 를 사용하는 방법이 있습니다. 자주 사용하는 몇가지를 알아 보도록 하겠습니다. 정규식을 다음과 같은 문법을 가집니다. /pattern/flags; flags 로는 다음 세 가지가 있습니다. - g : 일치하는 첫 번째 문자에서 멈추지 않고 전체에서 일치하는 모든 문자를 검색합니다. - m : 시작 혹은 끝 문자 탐색(^ and $)이 행마다 적용되도록 합니다 - i : 대소문자를 구분하지 않고 매칭합니다. var str = "abc\nABC abc"; // 전체의 시작을 검색합니다. var patt = /^abc/gi; var result = str.match(patt); console.log(.. 2018. 4. 17.
자바스크립트 쿠키 - jQuery Cookie Plugin Cookie는 웹 브라우저에 데이터를 저장할 수 있는 방법중에 하나 입니다. 서버 측에서 Set-Cookie 헤더 정보를 설정하여 클라이언트로 보내면 브라우저는 이 값을 저장하고 있다가 다음 요청부터 계속 서버로 보내게 됩니다. 웹 프로그래명 초기에는 세션 유지를 이 쿠키를 사용해서 했었습니다. 요즘에는 클라이언트 측에 자료를 두는 것이 보안문제가 발생할 수 있으므로 세션 데이터를 서버측 세션 객체에 저장하고, 이 세션 객체를 찾기 위한 세션 키만을 쿠키를 사용해서 전달을 하는 방식으로 바꼈습니다. 이제는 세션정보는 쿠키를 사용하여 저장하지 않습니다. 보통 쿠키는 서버측에서 set-cookie 헤더를 사용하여 부여하지만, 클라이언트 쪽에서 자바스크립트를 사용해서 쿠키를 다루는 것도 가능합니다. 가장 많이.. 2018. 4. 17.
자바스크립트의 trim() 함수 사용하기 문자열 좌우에서 공백을 제거하는 함수가 trim() 함수 입니다. 대부분의 언어에서 기본 제공하고 있고, 좌/우 측만 trim 하는 함수를 제공하기도 합니다. 자바스크립트에서도 사용할 일이 자주 있는 편인데, IE8 이하에서는 제공되지 않습니다. 사이트가 IE 8 도 지원해야 한다면 보통 많이 사용하는 방법이 IE 조건부 주석을 사용해서 IE 8이하일때 String 객체의 prototype 에 trim() 함수를 추가하여 IE 8이하에서도 IE 9이상과 동일하게 사용할 수 있도록 지원하는 것입니다. 다른 방법은 jQuery를 사용한다면 jQuery의 $.trim(); 메소드를 사용하여 처리하는 방법입니다. 다음은 각각의 방법을 적용해본 예제입니다. TRIM 결과) :test: :test: :test : .. 2018. 4. 17.
jQuery 플러그인 4 - 년도 select 박스 만들기 웹페이지에서 간단한 년도 선택상자(select 박스, 콤보 박스, 드롭다운 리스트)를 jQuery 플러그인으로 만들어 보겠습니다. 달력까지 제공되는 자바스크립트로된 UI 들이 많이 있지만, jQuery 플러그인 연습도 해볼겸 간단하게 사용할 수 있는 년도 선택상자를 만들어 봅니다. 보통 자바스크립트로 UI 를 만들때 요소를 사용해서 만들어질 곳을 표시하고, 스크립트에서 동적으로 태그를 교체하여 생성을 합니다. 이번 예제에서는 간단히 하기 위해서 요소를 직접 사용하여 내용을 동적으로 채울 수 있도록 합니다. 즉, 모양을 바뀌지 않는다는 것입니다. 요소의 옵션을 년도로 간편하게 채울 수 있는 초 간단 플러그인이 되겠습니다. * 기본적인 기능은 2010년을 시작 년도로하고, 마지막 년도는 현재년도 + 1 년까.. 2018. 4. 12.

티스토리툴바