목록#Accordion (3)

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

[해피CGI][cgimall] 자바스크립트로 제작된 아코디언 메뉴 Accordion Tab

자바스크립트와 CSS를 이용하여 제작된 아코디언 메뉴 Accordion Tab입니다. 기본적으로 HTML로 구성하고, 자바스크립트 + CSS로 제작되었습니다. 애니메이션의 속도 및 디자인은 CSS로 조절이 가능합니다. 개수제한없이 html 편집에 따라서 조절이 가능합니다. 서브 메뉴나, 액션을 가미한 설명에 사용이 가능한 소스네요
웹프로그램밍 자료실/JAVA 자료 2021. 1. 4. 09:20
[해피CGI][cgimall] Flexible Content Expanding and Collapsing Plugin - jQuery Collapse

Accordion 으로 이용할 수 있는 jQuery 플러그인 입니다. 다운로드 받은 파일의 압축을 해제하고 demo/index.html 파일을 웹브라우저로 열어보면 샘플확인이 가능합니다. 가벼운 프로그램이어서 지원되는 옵션은 몇가지는 안됩니다만, 딱 필요한것은 있네요. 기본 예제와, 아코디언으로 활용한 예제 펼쳐진 부분들을 픽스를 시켜버린 예제와, 약간의 애니메이션을 추가한 예제등등이 있네요. 어떤 항목이 열리고 닫히고 했었는지 이벤트를 얻어서 화면에 표시해주는것도 되긴 하네요. 하나의 예제에 대한 화면과, 예제를 위한 HTML와 스크립트 소스코드를 비교해서 보면, 많이 어렵다거나 복잡하진 않네요. 위 화면에 대한 소스코드 예제 가볍고, 쉽다보니 활용하기가 수월해보이네요.
웹프로그램밍 자료실/JAVA 자료 2020. 3. 18. 09:11
[해피CGI][cgimall] Automatic Accordion Slider Plugin For jQuery - Accordion.js

jquery로 제작된 accordion 을 이용한 이미지 슬라이드 입니다. 예제를 확인하는 방법은 다운로드 받은 파일의 압축을 해제한후에 accordion_example/index.html 파일을 웹브라우저로 열어서 보면 됩니다. 위 그림 처럼 이미지가 화면에 표시가 되고, 마우스가 오버되는 이미지로 슬라이드 되는 효과를 볼수 있습니다. HTML 소스코드를 이용해서 적용하는 방법도 상당히 단순해 보이네요. 1. jquery 와 Accordion.js 파일을 include 시켜줍니다. 2. div와 li , img 태그를 이용해서 이미지를 보여주는 코드를 작성합니다. 3. div 에 지정한 class 를 이용해서 작동하도록 자바스크립트를 넣어줍니다. 비교적 간단하게 이미지슬라이드를 구현할수가 있네요. 출처..
웹프로그램밍 자료실/JAVA 자료 2018. 11. 29. 09:29
Prev 1 Next