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

JavaScript 로 만들어진 HTML5 형 오디오 플레이어 입니다. 플레이어의 주요기능 - 플레이어 확대축소 - 플레이 리스트 - 플레이 리스트 확대 축소 - 볼륨 설정 - 재생/일시 중지 - 셔플 - 자동재생 사용방법 압축파일 해제하시면 index.html 파일이 존재합니다. 해당 파일에서 플레이 리스트를 컨트롤 할 수 있습니다. 그 외의 플레이어는 모두 js/script.js 에서 컨트롤 하고 있습니다. 별다른 수정 없이 디자인만 수정하여 사용하기에는 좋은 듯 합니다.

클릭시 별아이콘에 에니메이션 효과가 있습니다. css를 수정하여 에니메이션 효과 수정이 가능합니다. html 파일과 JS 파일을 수정하여 텍스트 변경이 가능합니다.

- 라이센스 MIT - 설치 방법 혹은 압축 파일을 다운로드한 후 서버에 업로드하여 Putty 등 콘솔로 압축을 풀어도 됩니다. - 사용 방법 1. 파일 상단에 Jquery 라이브러리와 플러그인 js 파일, 플러그인 css 파일을 링크합니다. 2. 언어 JS 파일을 링크합니다. (한국어 : ko) 다른 나라 언어 JS 파일명은 플러그인 사이트를 참고하세요. 3. 에디터에서 사용할 각종 에디터 확장 플러그인을 추가합니다. 각 에디터 확장 플러그인 설명과 데모는 아래 URL을 참고하세요. https://alex-d.github.io/Trumbowyg/documentation/plugins/ 4. 위지윅 에디터를 실행합니다. 5. 에디터와 확장 플러그인의 커스터마이징도 가능하니 해당 문서는 플러그인 사이트를 ..

- 라이센스 MIT - 사용 방법 1. 파일 상단에 Jquery 라이브러리와 플러그인 js 파일, 플러그인 css 파일을 링크합니다. 2. 버튼을 출력할 DIV 를 추가합니다. 3. 플러그인을 호출합니다. 4. 불필요한 SNS 공유 버튼을 제거하거나, 원하시는 SNS 공유 버튼을 추가할 수 있습니다. 삭제 및 추가 방법은 플러그인 사이트 링크를 참고하시기 바랍니다. 5. 버튼 커스터마이징도 가능합니다. - 작동 예제

데모 확인은 다운로드 받은 파일의 압축을 해제한 뒤 demo/index.html 파일을 웹브라우저로 열어보면 확인이 가능합니다. 길이가 긴 텍스트를 웹브라우저의 화면크기에 따라서 위 그림 처럼 텍스트의 일부는 화면에 표시를 해주고, 나머지 텍스트들은 show more 링크를 눌러보면, 감추어져 있던 텍스트들이 화면에 애니메이션 효과와 함께 표시가 됩니다. 웹브라우저의 크기를 조절을 해보면, 화면크기에 맞춰서 텍스트들을 숨기고, show more 버튼을 눌러보면, 숨어있던 텍스트들이 표시가 되게 됩니다. 사용법은 아래와 같습니다.

다운로드 받은 파일의 압축을 풀면 나오는 index.html 파일을 웹브라우저로 열어보면 확인이 가능합니다. 스크롤을 내리거나, 올릴때 웹페이지의 배경에 시차를 둔 스크롤 효과를 확인해볼 수 있습니다. 스크롤을 내리면 아래의 그림 처럼 웹페이지의 배경이 시간의 차이를 두고 변경이 되는 효과를 확인해볼 수 있습니다. 사용하는 방법은 위 설명을 참고하면 되겠습니다.

JavaScript 및 HTML5 캔버스 를 사용하여 스크래치 카드 기능을 만들 수 있습니다. Vanilla JavaScript 플러그인을 사용하면 처음부터 표시될 쿠폰 코드 또는 기타 당첨 코드를 숨길 수 있습니다. 스크래치 영역 뒤에 숫자/텍스트를 배치할 수 있습니다. 사용자는 마우스 커서로 긁거나 스와이프를 터치할 수 있습니다. 또한 실시간 스크래칭 애니메이션을 보여줍니다. 라이센스는 MIT 입니다. 적용 방법 1. HEAD 에 STYLE 을 추가 합니다. 2. BODY 에는 CANVAS 코드를 추가 합니다. 3. 마지막으로 관련 스크립트를 로더 합니다. 압축파일을 해제하면 index.html 파일을 통해 바로 확인할 수 있습니다.

clicky-menus 는 드롭다운 메뉴 onclick 이벤트를 만드는 데 도움이 되는 가벼운 JavaScript 플러그인입니다. 메뉴는 클릭, 탭 또는 키보드 / 키로 열 수 있는 1단계 드롭다운 메뉴 와 함께 제공 됩니다(포커스가 있을 때) 플러그인은 각 상위 항목(드롭다운 링크)을 버튼 요소로 변환하여 드롭다운을 확장합니다. 드롭다운을 토글하기 위해 마우스, 터치 및 키보드 상호 작용을 지원합니다. 마찬가지로 사용자가 메뉴 외부를 클릭하면 열린 드롭다운을 닫을 수 있습니다. 또한 브라우저에서 JavaScript가 비활성화된 경우 메뉴도 작동합니다(순수 CSS 사용). 라이센스는 MIT 입니다. 적용 방법 안내 입니다. 1. CSS 파일을 HTML페이지 HEAD 에서 로드 합니다. 2. 이제 BODY..

웹페이지에 표시하려고 하는 내용을 편집하기 위해서, 편집용 화면과, 실제 표시되는 화면이 분리되어 있는게 아니라, 웹페이지에 표시되는 내용을 보면서 바로 편집하는 인터페이스로 구현된 WYSIWYG 입니다. 에디터의 데모를 확인하는 방법은 압축파일을 해제한 뒤에, demo/index.html 파일을 웹브라우저로 열어보면 확인이 가능합니다. 화면에 표시되는 텍스트를 선택해보면 선택된 부분의 텍스트에 서식을 조절할 수 있는 기능이 있습니다. 텍스트를 추가할 부분을 클릭해서 단어들을 타이핑하면 화면에 바로 반영이 되게 됩니다. 몇몇가지 기본으로 제작되어 있는 테마를 지정할 수 있으며, 테마를 변경해보면 편집하기 위한 인터페이스들의 모양이 약간씩 달라집니다. 설치법은 https://yabwe.github.io/m..

다운로드 받은 파일의 압축을 해제한 뒤에, index.html 파일을 웹브라우저로 열어보면 데모 확인이 가능합니다. 테이블의 각 컬럼의 제목을 클릭하면, 컬럼에 표시되는 데이터들을 정렬이 되어서 화면에 표시가 됩니다. 사용법은 아래와 같습니다. 표형태로 데이터를 화면에 표시하는 화면에서, 데이더틀을 정렬해서 보여주기 위해서 데이터베이스에 실행하는 SQL문의 ORDER BY 구문을 이용하지 않더라도 가능해지게 되는 상황이 생길수도 있겠네요.