프로그래밍/자바스크립트65 AX5UI - 소개(JavaScript UI Component) 웹으로 업무용 프로그램을 개발 하면서 사용자 인터페이스로 사용되는 컴포넌트들 중 가장 복잡한 것은 GRID 인것 같습니다. 그래서 기능도 좋고 사용하기 편리한 제품이 있는지 종종 찾아보게 됩니다. ActiveX, Flash, JavaScript 등으로 만들어진 많은 제품 들이 있습니다만, 요즘은 웹표준과 크로스 브라우저를 원하는 경우가 많아서 ActiveX 나 플래시 제품보다는 HTML5를 지원하는 JavaScript 제품에 대한 선호가 높아지고 있습니다. 이러한 웹용 UI 컴포넌트들은 아주 고가이거나, 오픈소스이면 GPL 로 배포되므로 상업용으로 사용할 수 없는 경우가 대부분입니다. 그러던 중, MIT 라이센스 이면서 국내 개발자들에 의해 개발되고 있는 JavaScript UI 컴포넌트인 AX5UI 를.. 2018. 4. 3. jQuery Validation Plugin 사용하기 웹프로그래밍에서 입력값 검증은 꼭 필요하며, 상당히 까다로운 작업입니다. 이러한 작업을 좀 쉽게 도와 주는 jQuery Validation Plugin 의 사용법을 알아보도록 하겠습니다. jQuery validation plugin은 다음 주소에서 다운 받을 수 있습니다. https://jqueryvalidation.org/ 이글을 쓰고 있는 현재 버전은 1.16.0 입니다. MIT 라이센스로 배포됩니다. jQuery 플러그인 이므로 jQuery 가 있어야 합니다. 이버전은 jQuery 1.7.2, 1.8.3, 1.9.1, 1.11.1, 3.1.1 버전에서 테스트 되어 졌다고 합니다. jQuery 도 MIT 라이센스로 배포됩니다. 파일은 위 사이트에서 다운받아서 사용되도 되고 다음 CDN 주소를 사용해도.. 2018. 4. 3. jQuery로 요소의 값처리 및 상태변경 앞의 글 "jQuery 선택자 사용하기" 에서 작업을 위한 요소를 선택하는 방법에 대해 알아 봤습니다. 필요한 요소가 선택이 되었다면 그 요소의 값을 얻거나, 변경하고, 상태를 변경 하는 작업을 어떻게 하는지 알아보겠습니다. 들어가기에 앞서 선택된 요소 집합을 다루는데 대한 공통된 사항을 알아 봅시다. 선택된 요소 집합이라고 말하는 이유는 선택자에 의해 선택된 요소가 없을수도 있고, 하나이상일 수도 있기 때문입니다. 그래서 선택된 요소가 있는지 확인하고 위해서는 .length 를 사용해서 선택된 요소의 갯수를 확인해야 합니다. 1. 선택된 요소의 값을 얻고, 변경하기 .html() - 일치하는 요소 집합에서 첫 번째 요소의 HTML 컨텐츠를 가져 오거나, 일치하는 모든 요소의 HTML컨텐츠를 설정합니다... 2018. 4. 3. jQuery 선택자 사용하기 초기 웹 프로그래밍에서는 웹 페이지내의 컨텐츠를 바꾸려면 서버에 필요한 요청을하고, 새로운 내용의 웹페이지 전체를 받아서 화면에 보여주는 방식이었습니다. 이 경우 페이지내의 많은 변하지 않는 부분(헤더, 푸터 등)도 매번 새로 받아와야 했었습니다. 그래서 페이지를 프레임(frame)으로 나누어 변하는 부분은 줄이는 방법도 많이 사용되었습니다. 요즘은 필요한 컨텐츠를 가져올 때는 ajax 를 통해서 백그라운드로 가져오고, 화면은 자바스크립트를 이용해서 페이지내의 요소들을 직접 바꾸는 방법을 주로 사용합니다. 이때 DOM(Document Object Model) 구조로 되어 있는 페이지내의 필요한 요소에 손쉽게 접근할 수 있게 해주는 자바스크립트 라이브러리로 많이 사용되는 것이 jQuery 입니다. 일단 필.. 2018. 4. 3. jquery ui를 사용한 tooltip 텍스트 꾸미기 태그의 title 속성으로 툴팁을 만들 수 있습니다. 하지만 일반 텍스트 밖에 사용할 수 가 없습니다. 툴팁 내용에 html 태그를 사용하면 그대로 보여져 버립니다. jquery UI 의 tooltip 위젯을 사용하면 툴팁의 모양을 예쁘게 꾸밀 수 있습니다. 사용하는 방법을 알아 봅시다. 1. 가장 기본적인 사용법입니다. jquery-ui 를 사용하기 위해서는 jquery 가 필요 합니다. 아래 샘플 코드 에서는 jquery-ui 1.12.1 버전을 jquery 1.12.4 버전을 사용하고 있습니다. 또한 jquery-ui의 기본적인 모양을 지정하는 jquery-ui.css 파일도 사용합니다. $(function() { $(document).tooltip(); }); 위 코드는 문서내의 모든 title .. 2018. 4. 1. 이전 1 2 3 4 5 다음
