웹솔루션개발 22년 노하우! 해피CGI의 모든것

- 라이센스 MIT - 사용 방법 1. jQuery 라이브러리와 Jquery.number.format.js 파일을 호출합니다. 2. 숫자 값 앞/뒤로 붙일 화폐 표시도 설정할 수 있습니다. 3. 천 단위에 기분 기호를 지정할 수 있습니다. 기본값 : 콤마(,) 4. 소수점 이하 숫자를 지정된 자리수만큼만 표시할 수 있습니다. 기본값 : 2 5. 소수점 이하 숫자를 지정된 소수 자릿수로 반올림 할 수 있습니다. 기본값 : true 6. 소수점 구분 기호를 지정할 수 있습니다. - 작동 예제

고정된 이미지 vimeo 동영상 youtube 동영상 이미지 또는 자동재생되는 동영상을 슬라이드 되는 형태로 출력합니다. 정해진 가로 세로 비율에 따라 출력됩니다. 첨부된 파일을 다운로드 하거나 해당 사이트에서 전체 소스를 확인할 수 있습니다. css 로 슬라이드시 에니메이션 효과를 변경할 수 있습니다.

탭메뉴는 올바르게 디자인된 경우 매우 편리하고 유용한 인터페이스 요소가 될 수 있습니다. 그러나 모바일 장치와 같은 작은 화면에서 작동하는 반응형 웹 사이트를 구축할 때 탭 기반 인터페이스는 특히 CSS를 통해 모양을 수정하기 어려울 때 큰 문제가 될 수 있습니다. 미디어 쿼리를 삽입하여 탭의 HTML 코드를 수정할 수 있습니다. 그러나 HTML을 수동으로 변경해야 하기 때문에 이것은 매우 어려운 작업입니다. 또는 해당 자료에서 제공할 jQuery 반응형 탭 스크립트를 사용하여 모바일 장치 와 같은 작은 화면에서 탭을 아코디언 인터페이스로 전환하여 모든 공간을 더 중요한 정보에 사용해 보세요. # 일반화면 # 모바일과 같은 가로 디바이스가 작은 화면 사용방법 안내 입니다. 1. 탭메뉴 CSS 호출 2. ..

peekABar는 많은 사용자 지정 옵션이 있는 고정 알림 표시줄을 만드는 데 도움이 되는 매우 가벼운 jQuery 알림 플러그인입니다. 압축 파일 해제하시면 index.html 파일이 있습니다. 참고하시면 좋습니다. peekABar 는 브라우저 상단에 메시지를 보여주는 기능입니다. Default 는 계속 보여주는 기능이며 Auto Hide 는 잠깐 보여주는 기능입니다. 설치 방법은 아래를 참고 해주세요. 1. 라이브러리 호출 2.컨테이너 생성 3. 이벤트 등록 라이센스는 MIT 입니다.

데스크톱 및 모바일 웹 사이트에서 이미지 라이트 박스 및 갤러리 라이트 박스를 만들 수 있습니다. 첨부된 파일을 다운로드 해서, 압축을 해제하고 나면 demo 라는 폴더가 있습니다. demo 폴더에 있는, demo/index.html 파일과, demo/onlyImages.html 파일을 웹브라우저로 열어보면 확인이 가능합니다. 위 와 같은 화면이 표시가 되고, 우측의 이미지를 클릭 해보면, 위 그림과 같이 이미지를 슬라이더로 표시하는 기능을 확인하는게 가능합니다. 사용법은 아래와 같습니다. 지원되는 옵션들은 다양하며, 반응형 터치 지원 이미지 라이트박스 플러그인 | 무료 jQuery 플러그인 (jqueryscript.net) 위 페이지에서 확인이 가능하겠습니다. 그 외의 method 및 event 는 아..

URL의 쿼리스트링을 조작(추가,수정,삭제)할 수 있는 jquery 플러그인 입니다. 쿼리 문자열(URL 쿼리 매개 변수라고도 함)은 웹 사이트 및 웹 응용 프로그램의 여러 위치에서 사용됩니다. URL (요청)의 끝에 추가 정보를 추가 할 수 있으며 응용 프로그램 내에서 요청간에 상태를 전달하거나 사용자 식별과 같은 다양한 작업에 사용할 수 있습니다. 다운로드 받은 파일의 압축을 해제한 뒤 examples/simple-example.html 파일을 웹브라우저로 열어보면 확인이 가능합니다. 사용방법은 아래와 같습니다. URL중에서 일부를 변경해야 하거나, 새로운 값을 추가해야 할 때 사용하기 편리할 것 같네요.

드래그앤드롭 으로 크기조정, 확장, 회원이 가능한 JavaScript 라이브러리 Moveable 드래그 이동, 사이즈 조절, 회전, 각 조절, 핀치 터치를 이용한 회전 및 사이즈조절 선택, 클립마스크, 라운드조절 등 다양한 기능이 제공됩니다. 사용자 정의 설정을 통해 각 기능별 사용여부도 조절 가능합니다. 웹을 통해 편집하는 플랫폼에서는 아주 유용하게 사용이 될꺼 같네요.

터치 및 마우스 호버효과로 만드는 가벼운 무료 오픈 소스 JavaScript 라이브러리 Atropos JavaScript, React 및 Vue.js에서 사용 가능하며 경량화된 소스입니다. 여러가지 변수를 통해 사용자 정의 설정 사용이 가능합니다. 회전 반경, 그림자 효과 관련 등 다양한 사용자 정의 설정이 가능합니다.

기본 선택상자(셀렉트박스) 를 조금 더 이용하기 편한 UI로 변경해주는 jquery 플러그인입니다. 다운로드 받은 파일의 압축을 해제한뒤, demo/index.html 파일을 웹브라우저로 열어보면 확인이 가능합니다. 위와 같은 기본 선택상자를 오른쪽의 그림 처럼 선택가능한 옵션들을 펼쳐서 화면에 보여주고, 이미 선택한 옵션을 표시해주고, 선택 가능한 옵션들 에서 검색어가 포함된 옵션을 검색할수 있습니다. 여러개의 옵션을 선택할 수 있는 선택상자에서도 사용할 수 있습니다. 사용법은 아래와 같습니다.

JavaScript 를 이용하여 Top 버튼을 클릭하면 부드럽게 Top 으로 스크롤 되는 소스 입니다. 적용방법은 아래와 같습니다. 1. CSS 를 추가 합니다. 2. JavaScript 를 호출 합니다. 3. 세부적인 설정 항목은 아래와 같습니다. 설정 항목에서 normal, Iinear 사용해 봤을 때 스크롤이 길지 않다면 Iinear 조금 더 보기 편하고 페이지가 많이 길 경우 normal 로 설정하는게 좋은 듯 합니다.